:root {


  --color-bg: #0b1220;


  --color-bg-2: #0f1a2b;


  --color-primary: #0d1b2a;


  --color-accent: #f39c12;


  --color-accent-2: #e74c3c;


  --color-accent-3: #9b59b6;


  --color-text: #d9e2ef;


  --color-muted: #a7b4c9;


  --color-white: #ffffff;


  --color-dark: #0a0f1a;


  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.25);


  --shadow-glow: 0 0 40px rgba(243, 156, 18, 0.3);


  --shadow-neon: 0 0 20px rgba(243, 156, 18, 0.5), 0 0 40px rgba(243, 156, 18, 0.3), 0 0 60px rgba(243, 156, 18, 0.1);


  --radius-lg: 18px;


  --radius-md: 12px;


  --radius-sm: 8px;


  --container: 1200px;


  --space-1: 8px;


  --space-2: 12px;


  --space-3: 16px;


  --space-4: 24px;


  --space-5: 32px;


  --space-6: 48px;


  --space-7: 64px;


  --space-8: 96px;


  --font-title: "Montserrat", "Segoe UI", system-ui, sans-serif;


  --font-body: "Poppins", "Segoe UI", system-ui, sans-serif;


}

/* Logo image and accessibility helper */
.logo-img {
  height: 40px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}





* {


  margin: 0;


  padding: 0;


  box-sizing: border-box;


}
.topbar{display:none;}
.VIpgJd-ZVi9od-ORHb-OEVmcd{
  display:none;
    }
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf{
  display:none;
    }
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf VIpgJd-ZVi9od-aZ2wEe-wOHMyf-ti6hGc{
  display:none;
    }
/* Google Translate hover tooltip */
#goog-gt-tt,
.goog-te-balloon-frame,
#goog-gt-vt,
.VIpgJd-suEOdc,
.VIpgJd-yAWNEb-L7lbkb {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Custom scrollbar */


::-webkit-scrollbar {


  width: 10px;


}


::-webkit-scrollbar-track {


  background: var(--color-bg);


}


::-webkit-scrollbar-thumb {


  background: linear-gradient(180deg, var(--color-accent), #e67e22);


  border-radius: 10px;


}


::-webkit-scrollbar-thumb:hover {


  background: linear-gradient(180deg, #ffc107, var(--color-accent));


}





/* Selection */


::selection {


  background: var(--color-accent);


  color: #000;


}





body {


  font-family: var(--font-body);


  color: var(--color-text);


  background: var(--color-primary);


  line-height: 1.6;


  overflow-x: hidden;


}





/* Animated background */


body::before {


  content: "";


  position: fixed;


  inset: 0;


  background: 


    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(243,156,18,0.08) 0%, transparent 50%),


    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(155,89,182,0.05) 0%, transparent 50%);


  pointer-events: none;


  z-index: -1;


}





img {


  max-width: 100%;


  display: block;


}





a {


  color: inherit;


  text-decoration: none;


}





button {


  font-family: inherit;


}





.container {


  width: 100%;


  max-width: var(--container);


  margin: 0 auto;


  padding: 0 var(--space-4);


}





.section {


  padding: var(--space-8) 0;


  position: relative;


}





/* Section floating particles */


.section::before {


  content: "";


  position: absolute;


  width: 300px;


  height: 300px;


  background: radial-gradient(circle, rgba(243,156,18,0.05) 0%, transparent 70%);


  border-radius: 50%;


  top: 50%;


  left: -150px;


  transform: translateY(-50%);


  animation: floatBubble 8s ease-in-out infinite;


  pointer-events: none;


}





.section-title {


  font-family: var(--font-title);


  font-size: clamp(24px, 3vw, 36px);


  letter-spacing: 0.5px;


  margin-bottom: var(--space-3);


}





/* Flashy section titles */


.section-title {


  background: linear-gradient(90deg, #fff 0%, var(--color-accent) 50%, #ffdca0 100%);


  background-size: 200% auto;


  -webkit-background-clip: text;


  background-clip: text;


  color: transparent;


  position: relative;


  text-shadow: 0 8px 30px rgba(243,156,18,0.08);


  animation: textShine 3s linear infinite;


}





@keyframes textShine {


  0% { background-position: 0% center; }


  100% { background-position: 200% center; }


}





.section-title::after {


  content: "";


  position: absolute;


  left: 0;


  bottom: -8px;


  height: 4px;


  width: 60px;


  border-radius: 4px;


  background: linear-gradient(90deg, var(--color-accent), #e74c3c, var(--color-accent));


  background-size: 200% auto;


  animation: gradientMove 2s linear infinite;


}





@keyframes gradientMove {


  0% { background-position: 0% center; }


  100% { background-position: 200% center; }


}





@keyframes underlinePulse {


  0% { transform: scaleX(0.4); opacity: 0.6 }


  50% { transform: scaleX(1); opacity: 1 }


  100% { transform: scaleX(0.4); opacity: 0.6 }


}





.section-subtitle {


  color: var(--color-muted);


  font-size: 14px;


  margin-bottom: var(--space-4);


  opacity: 0.92;


  max-width: 820px;


}





/* small sparkle near titles */


.section-title::before {


  content: "★";


  position: absolute;


  right: -28px;


  top: -6px;


  font-size: 18px;


  color: var(--color-accent);


  opacity: 0.95;


  transform: rotate(-20deg) translateY(-2px);


  animation: spark 2.6s infinite ease-in-out;


}





@keyframes spark {


  0% { transform: scale(0.9) rotate(-20deg); opacity: 0.6 }


  50% { transform: scale(1.15) rotate(-10deg); opacity: 1 }


  100% { transform: scale(0.9) rotate(-20deg); opacity: 0.6 }


}





.topbar {


  background: #0a1324;


  color: var(--color-muted);


  font-size: 14px;


}





.topbar .container {


  display: flex;


  align-items: center;


  justify-content: space-between;


  padding: var(--space-2) var(--space-4);


}





.topbar-info {


  display: flex;


  gap: var(--space-4);


  align-items: center;


}





.topbar-social {


  display: flex;


  gap: var(--space-3);


}





.topbar-social a {


  opacity: 0.8;


  transition: opacity 0.2s ease;


}





/* Mobile nav overlay */


.mobile-nav-overlay {


  position: fixed;


  inset: 0;


  background: rgba(2,6,12,0.45);


  z-index: 998;


  opacity: 0;


  pointer-events: none;


  transition: opacity 0.25s ease;


}





.mobile-nav-overlay.visible {


  opacity: 1;


  pointer-events: auto;


}





/* Prevent body scroll when mobile menu open */


.no-scroll {


  overflow: hidden !important;


}





/* Contact choice popup */


.contact-choice {


  position: absolute;


  width: 200px;


  background: linear-gradient(180deg, #07101a, #0b1724);


  box-shadow: 0 12px 40px rgba(0,0,0,0.6);


  border-radius: 12px;


  padding: 8px;


  z-index: 10001;


  display: flex;


  gap: 6px;


  align-items: center;


  justify-content: space-between;


}





.contact-choice button {


  flex: 1 1 auto;


  padding: 8px 10px;


  border-radius: 8px;


  border: none;


  color: var(--color-white);


  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));


  cursor: pointer;


  font-weight: 600;


}





.contact-choice .contact-close {


  width: 32px;


  background: transparent;


  color: var(--color-muted);


  font-size: 18px;


  line-height: 1;


}





/* Responsive: show menu toggle on small screens and make nav slide-in */


@media (max-width: 900px) {


  .menu-toggle { display: inline-flex; }


  .header .nav { position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: 100vh; width: 100vw; transform: translateX(100%); background: radial-gradient(circle at 20% 20%, rgba(243,156,18,0.12), transparent 35%), radial-gradient(circle at 80% 30%, rgba(155,89,182,0.12), transparent 40%), linear-gradient(180deg, rgba(7,12,24,0.96), rgba(11,18,32,0.98)); background-size: 200% 200%; box-shadow: 0 0 70px rgba(0,0,0,0.7), 0 0 30px rgba(243,156,18,0.25); z-index: 1300; padding: 110px 30px 54px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); overflow-y: auto; backdrop-filter: blur(16px); border-left: 1px solid rgba(255,255,255,0.06); isolation: isolate; animation: menuBgShift 12s ease infinite; }


  .header .nav::before { content: ''; position: fixed; inset: 8% 10%; background: radial-gradient(circle, rgba(243,156,18,0.22) 0%, transparent 50%); filter: blur(60px); opacity: 0.8; pointer-events: none; animation: pulseCta 3.5s ease infinite; z-index: 0; }


  .header .nav.open { transform: translateX(0); transition: transform 0.45s cubic-bezier(0.2,0.9,0.2,1); animation: menuPanelIn 0.5s ease both; }


  .header .nav ul { flex-direction: column; gap: 14px; align-items: stretch; width: 100%; }

  .header .nav li { width: 100%; }


  .header .nav a, .header .nav button { display: block; padding: 14px 18px; font-size: 18px; letter-spacing: 0.2px; }


  .nav-close { display: inline-flex; align-items: center; justify-content: center; animation: menuItemIn 0.4s ease both; }

  .header .nav .lang-select { order: 99; align-self: center; margin: 18px auto 0; width: min(220px, 80%); text-align: center; animation: menuItemIn 0.4s ease both 0.12s; }

  .header .nav.open li { animation: menuItemIn 0.5s ease both; animation-delay: calc(var(--i, 0) * 0.06s); }
  .header .nav.open li:nth-child(1) { --i: 1; }
  .header .nav.open li:nth-child(2) { --i: 2; }
  .header .nav.open li:nth-child(3) { --i: 3; }
  .header .nav.open li:nth-child(4) { --i: 4; }
  .header .nav.open li:nth-child(5) { --i: 5; }
  .header .nav.open li:nth-child(6) { --i: 6; }


  .header .nav .dropdown-menu { position: static; transform: none; opacity: 1; visibility: visible; background: transparent; box-shadow: none; clip-path: none; padding: 0; }


}





.topbar-social a:hover {


  opacity: 1;


}





.header {


  position: sticky;


  top: 0;


  z-index: 1000;


  background: rgba(11, 18, 32, 0.95);


  backdrop-filter: blur(12px);


  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);


  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);


}





.header::after {


  content: '';


  position: absolute;


  bottom: 0;


  left: 0;


  right: 0;


  height: 1px;


  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);


  opacity: 0.3;


}





.header .container {


  display: flex;


  align-items: center;


  justify-content: space-between;


  padding: var(--space-4) var(--space-4);


}





.logo {


  font-family: var(--font-title);


  font-size: 22px;


  font-weight: 700;


  color: var(--color-white);


  letter-spacing: 1px;


  transition: all 0.3s ease;


}





.logo:hover {


  transform: scale(1.05);


}





.logo img {

  height: 48px;

  width: auto;

  transition: all 0.3s ease;

}




.logo:hover img {


  filter: drop-shadow(0 0 15px rgba(243,156,18,0.6));


}





.nav {


  display: flex;


  align-items: center;


  gap: var(--space-4);


}

.nav .lang-select {
  margin-left: auto;
}





.nav ul {


  list-style: none;


  display: flex;


  align-items: center;


  gap: var(--space-4);


}





.nav li {


  position: relative;


}





.nav a,


.nav button {


  color: var(--color-white);


  font-weight: 500;


  padding: 10px 6px;


  background: none;


  border: none;


  cursor: pointer;


  transition: all 0.3s ease;


  position: relative;


}





.nav a::before {


  content: '';


  position: absolute;


  bottom: 0;


  left: 50%;


  width: 0;


  height: 2px;


  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));


  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);


  transform: translateX(-50%);


  border-radius: 2px;


}





.nav a:hover::before {


  width: 100%;


  box-shadow: 0 0 10px var(--color-accent);


}





.nav a:hover,


.nav button:hover {


  color: var(--color-accent);


  text-shadow: 0 0 10px rgba(243,156,18,0.5);


}





.dropdown-menu {


  position: absolute;


  top: 100%;


  left: 0;


  background: linear-gradient(180deg, rgba(15,26,43,0.95), rgba(7,12,24,0.9));


  min-width: 220px;


  padding: 10px;


  opacity: 0;


  visibility: hidden;


  transform: translateY(8px) rotate(-1deg);


  transition: all 0.25s cubic-bezier(0.2,0.9,0.2,1);


  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 30px rgba(155,89,182,0.03);


  clip-path: polygon(0 6%, 6% 0, 94% 0, 100% 6%, 100% 94%, 94% 100%, 6% 100%, 0 94%);


}





.dropdown-menu a {


  display: block;


  padding: 12px 16px;


  border-radius: 8px;


  margin: 6px 4px;


  transition: transform 0.18s ease, box-shadow 0.18s ease;


}





.nav li:hover .dropdown-menu,


.nav li:focus-within .dropdown-menu,


.nav li.open .dropdown-menu {


  opacity: 1;


  visibility: visible;


  transform: translateY(0) rotate(0deg);


}





.lang-select {


  background: #0f1a2b;


  color: var(--color-white);


  border: 1px solid rgba(255, 255, 255, 0.25);


  border-radius: 999px;


  padding: 6px 12px;


  appearance: none;


  background-image: linear-gradient(45deg, transparent 50%, var(--color-white) 50%),


    linear-gradient(135deg, var(--color-white) 50%, transparent 50%),


    linear-gradient(to right, transparent, transparent);


  background-position: calc(100% - 16px) 11px, calc(100% - 11px) 11px, 0 0;


  background-size: 5px 5px, 5px 5px, 100% 100%;


  background-repeat: no-repeat;


  padding-right: 32px;


}





.lang-select option {

  background: #0f1a2b;

  color: var(--color-white);

}



#google_translate_element {

  position: fixed;

  left: -9999px;

  top: 0;

}



.goog-te-banner-frame,

.goog-te-balloon-frame,

.goog-te-gadget,

.goog-te-gadget-simple,

.goog-logo-link,

.goog-te-gadget span {

  display: none !important;

}


.notranslate {
  unicode-bidi: isolate;
}


body {

  top: 0 !important;

}




.menu-toggle {


  display: none;


  border: none;


  background: linear-gradient(135deg, rgba(243,156,18,0.14), rgba(155,89,182,0.06));


  color: var(--color-white);


  padding: 10px 18px;


  border-radius: 14px;


  cursor: pointer;


  position: relative;


  overflow: visible;


  box-shadow: 0 6px 18px rgba(0,0,0,0.4);


}





.menu-toggle::after {


  content: '';


  position: absolute;


  right: -10px;


  top: 50%;


  transform: translateY(-50%) rotate(12deg);


  width: 28px;


  height: 38px;


  background: linear-gradient(135deg, rgba(155,89,182,0.12), rgba(243,156,18,0.08));


  clip-path: polygon(10% 0, 100% 20%, 80% 100%, 0 80%);


  border-radius: 6px;


  box-shadow: 0 8px 20px rgba(0,0,0,0.35);


}





.hero {


  position: relative;


  overflow: hidden;


}





.hero-slider {


  position: relative;


  height: min(85vh, 720px);


  overflow: hidden;


}





.hero-slider::before {


  content: '';


  position: absolute;


  bottom: 0;


  left: 0;


  right: 0;


  height: 150px;


  background: linear-gradient(to top, var(--color-primary), transparent);


  z-index: 2;


  pointer-events: none;


}





.hero-slide {


  position: absolute;


  inset: 0;


  opacity: 0;


  transition: opacity 1s ease, transform 1s ease;


  transform: scale(1.1);


}





.hero-slide.active {


  opacity: 1;


  transform: scale(1);


}





.hero-slide img {


  width: 100%;


  height: 100%;


  object-fit: cover;


  transition: transform 12s ease-out;


}





.hero-slide.active img {


  animation: slowZoom 12s ease-in-out forwards;


  transform: scale(1.15);


}





.hero-overlay {


  position: absolute;


  inset: 0;


  background: 


    linear-gradient(120deg, rgba(7, 12, 24, 0.3), rgba(7, 12, 24, 0.75)),


    radial-gradient(ellipse at bottom right, rgba(243,156,18,0.1) 0%, transparent 60%);


}





.hero-content {


  position: absolute;


  right: 8%;


  top: 50%;


  transform: translateY(-50%);


  background: rgba(11, 18, 32, 0.8);


  backdrop-filter: blur(20px);


  padding: var(--space-6);


  border-radius: var(--radius-lg);


  max-width: 520px;


  box-shadow: 0 25px 80px rgba(0,0,0,0.5), 0 0 40px rgba(243,156,18,0.1);


  animation: fadeInRight 0.9s ease;


  border: 1px solid rgba(255,255,255,0.05);


}





.hero-content::before {


  content: '';


  position: absolute;


  top: -2px;


  left: -2px;


  right: -2px;


  bottom: -2px;


  background: linear-gradient(135deg, rgba(243,156,18,0.3), transparent, rgba(155,89,182,0.2));


  border-radius: inherit;


  z-index: -1;


  opacity: 0;


  transition: opacity 0.4s ease;


}





.hero-content:hover::before {


  opacity: 1;


}





.hero-content h1 {


  font-family: var(--font-title);


  font-size: clamp(28px, 3.2vw, 46px);


  margin-bottom: var(--space-3);


  background: linear-gradient(135deg, #fff, var(--color-accent));


  -webkit-background-clip: text;


  -webkit-text-fill-color: transparent;


  background-clip: text;


}





.hero-content p {


  color: var(--color-muted);


  margin-bottom: var(--space-4);


}





.btn {


  display: inline-flex;


  align-items: center;


  justify-content: center;


  padding: 14px 28px;


  border-radius: 999px;


  border: none;


  background: linear-gradient(135deg, var(--color-accent), #e67e22);


  color: #1a1406;


  font-weight: 600;


  cursor: pointer;


  position: relative;


  overflow: hidden;


  transition: all 0.3s cubic-bezier(.22,1,.36,1);


  box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);


}





.btn::before {


  content: "";


  position: absolute;


  top: 0;


  left: -100%;


  width: 100%;


  height: 100%;


  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);


  transition: left 0.5s ease;


}





.btn:hover::before {


  left: 100%;


}





.nav-close {
  display: none;
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: linear-gradient(135deg, rgba(243,156,18,0.24), rgba(155,89,182,0.16));
  color: var(--color-white);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
}




.btn:hover {


  transform: translateY(-3px) scale(1.02);


  box-shadow: 0 8px 30px rgba(243, 156, 18, 0.5), 0 0 40px rgba(243, 156, 18, 0.2);


}





.btn:active {


  transform: translateY(0) scale(0.98);


}





.btn.secondary {


  background: transparent;


  color: var(--color-white);


  border: 2px solid rgba(255, 255, 255, 0.35);


  box-shadow: none;


}





.btn.secondary:hover {


  background: rgba(255,255,255,0.1);


  border-color: var(--color-accent);


  box-shadow: 0 0 20px rgba(243, 156, 18, 0.2);


}





.slider-controls {


  position: absolute;


  inset: 0;


  display: flex;


  align-items: center;


  justify-content: space-between;


  padding: 0 var(--space-5);


  pointer-events: none;


}





.slider-btn {


  pointer-events: auto;


  background: rgba(11, 18, 32, 0.6);


  color: var(--color-white);


  border: none;


  width: 46px;


  height: 46px;


  border-radius: 50%;


  cursor: pointer;


}





.slider-dots {


  position: absolute;


  bottom: 24px;


  left: 50%;


  transform: translateX(-50%);


  display: flex;


  gap: 10px;


}





.slider-dot {


  width: 12px;


  height: 12px;


  border-radius: 999px;


  background: rgba(255, 255, 255, 0.35);


  border: none;


  cursor: pointer;


}





.slider-dot.active {


  background: var(--color-accent);


}





.card-grid {


  display: grid;


  grid-template-columns: repeat(4, 1fr);


  gap: var(--space-4);


}





.card {


  position: relative;


  border-radius: var(--radius-md);


  overflow: hidden;


  background: #0f1a2b;


  box-shadow: var(--shadow-soft);


  transition: all 0.4s cubic-bezier(.22,1,.36,1);


}





.card::before {


  content: "";


  position: absolute;


  inset: 0;


  background: linear-gradient(135deg, transparent 40%, rgba(243,156,18,0.1) 100%);


  opacity: 0;


  transition: opacity 0.4s ease;


  z-index: 1;


  pointer-events: none;


}





.card:hover {


  transform: translateY(-10px) rotateX(2deg);


  box-shadow: 0 25px 50px rgba(0,0,0,0.4), 0 0 30px rgba(243,156,18,0.1);


}





.card:hover::before {


  opacity: 1;


}





.card img {


  width: 100%;


  height: 240px;


  object-fit: cover;


  transition: transform 0.6s ease;


}





.card:hover img {


  transform: scale(1.1);


}





.card-overlay {


  position: absolute;


  inset: 0;


  background: linear-gradient(180deg, rgba(7, 12, 24, 0.2), rgba(7, 12, 24, 0.9));


  display: flex;


  flex-direction: column;


  justify-content: flex-end;


  padding: var(--space-4);


  z-index: 2;


}





.card-overlay h3 {


  font-family: var(--font-title);


  font-size: 20px;


  margin-bottom: var(--space-2);


  transition: transform 0.3s ease;


}





.card:hover .card-overlay h3 {


  transform: translateY(-5px);


}





.card-overlay p {


  color: var(--color-muted);


  font-size: 14px;


  margin-bottom: var(--space-3);


}





.card.no-image {


  min-height: 260px;


  display: flex;


  background: linear-gradient(145deg, #0f1c31, #0b1424);


  border: 1px solid rgba(255, 255, 255, 0.08);


  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);


}





.card.no-image:hover {


  border-color: rgba(243,156,18,0.3);


}





.card.no-image .card-overlay {


  position: static;


  background: none;


  width: 100%;


}





.card.no-image p {


  color: var(--color-muted);


}





.services-main {


  display: grid;


  grid-template-columns: repeat(4, 1fr);


  gap: var(--space-4);


}





.services-list {


  grid-template-columns: 1fr;


}





.services-list .service-card {


  min-height: 220px;


}





/* ======================= */


/* Ana Sayfa Hizmet Kartları – Vay be efekti */


/* ======================= */


.services-home {


  display: flex;


  flex-wrap: wrap;


  gap: var(--space-4);


  justify-content: center;


}





.service-card-home {


  position: relative;


  flex: 1 1 200px;


  max-width: 240px;


  min-height: 160px;


  padding: var(--space-5) var(--space-4);


  background: linear-gradient(145deg, #12223a 0%, #0b1424 100%);


  border-radius: var(--radius-lg);


  border: 1px solid rgba(243,156,18,0.12);


  display: flex;


  flex-direction: column;


  justify-content: center;


  text-align: center;


  cursor: pointer;


  overflow: hidden;


  box-shadow: 0 12px 40px rgba(0,0,0,0.45);


  transform: translateY(0) scale(1);


  transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s ease, border-color 0.3s ease;


  animation: cardPop 0.6s calc(var(--i,0) * 0.1s) backwards ease-out;


}





@keyframes cardPop {


  0% { opacity: 0; transform: translateY(30px) scale(0.92); }


  100% { opacity: 1; transform: translateY(0) scale(1); }


}





.service-card-home:hover {


  transform: translateY(-12px) scale(1.04);


  box-shadow: 0 24px 64px rgba(243,156,18,0.22), 0 0 0 2px var(--color-accent);


  border-color: var(--color-accent);


}





.service-card-home::before {


  content: "";


  position: absolute;


  inset: -50%;


  background: conic-gradient(from 180deg at 50% 50%, transparent 0deg, var(--color-accent) 60deg, transparent 120deg);


  opacity: 0;


  transition: opacity 0.4s ease;


  animation: rotate 4s linear infinite paused;


}





.service-card-home:hover::before {


  opacity: 0.18;


  animation-play-state: running;


}





@keyframes rotate {


  to { transform: rotate(360deg); }


}





.service-card-home .card-num {


  position: absolute;


  top: 12px;


  left: 14px;


  font-family: var(--font-title);


  font-size: 13px;


  font-weight: 700;


  color: var(--color-accent);


  opacity: 0.7;


}





.service-card-home h3 {


  font-family: var(--font-title);


  font-size: clamp(16px, 2vw, 20px);


  margin: 0;


  line-height: 1.3;


  color: var(--color-white);


  position: relative;


}





.service-card-home .card-arrow {


  position: absolute;


  bottom: 14px;


  right: 16px;


  font-size: 20px;


  color: var(--color-accent);


  opacity: 0;


  transform: translateX(-8px);


  transition: opacity 0.3s ease, transform 0.3s ease;


}





.service-card-home:hover .card-arrow {


  opacity: 1;


  transform: translateX(0);


}





/* ======================= */


/* Diğer sayfalardaki hizmet kartları */


/* ======================= */


.service-card {


  background: #0f1a2b;


  border-radius: var(--radius-md);


  overflow: hidden;


  position: relative;


  min-height: 280px;


  display: flex;


  align-items: flex-end;


  padding: var(--space-4);


  background-size: cover;


  background-position: center;


  border: 1px solid rgba(243, 156, 18, 0.15);


  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);


}





.service-card::after {


  content: "";


  position: absolute;


  inset: 0;


  border: 1px solid rgba(243, 156, 18, 0.25);


  border-radius: var(--radius-md);


  opacity: 0;


  transition: opacity 0.3s ease;


}





.service-card:hover::after {


  opacity: 1;


}





.service-card::before {


  content: "";


  position: absolute;


  inset: 0;


  background: linear-gradient(180deg, rgba(7, 12, 24, 0.55), rgba(7, 12, 24, 0.92));


}





.service-card > * {


  position: relative;


}





.service-card h3 {


  font-family: var(--font-title);


  font-size: 22px;


  margin-bottom: var(--space-2);


}





.service-card p {


  color: var(--color-muted);


  font-size: 14px;


  margin-bottom: var(--space-3);


}





.service-extra {


  color: var(--color-muted);


  font-size: 14px;


  margin-top: var(--space-2);


}





.values-grid {


  display: grid;


  grid-template-columns: repeat(3, 1fr);


  gap: var(--space-4);


}





.value-card {


  background: #0c1424;


  border: 1px solid rgba(255, 255, 255, 0.08);


  border-radius: var(--radius-md);


  padding: var(--space-5);


  position: relative;


  min-height: 280px;


}





.value-card span {


  position: absolute;


  top: -14px;


  left: -14px;


  width: 52px;


  height: 52px;


  border-radius: 50%;


  background: var(--color-accent);


  color: #1a1406;


  display: grid;


  place-items: center;


  font-weight: 700;


  font-size: 18px;


  box-shadow: var(--shadow-soft);


}





.value-card h3 {


  font-family: var(--font-title);


  margin-bottom: var(--space-3);


}





.stats-band {


  background: #0a111f;


  padding: var(--space-6) 0;


}





.stats-grid {


  display: grid;


  grid-template-columns: repeat(4, 1fr);


  gap: var(--space-4);


  text-align: center;


}





.stat-item h3 {


  font-size: 32px;


  font-family: var(--font-title);


}





.stat-item p {


  color: var(--color-muted);


}





.logo-band {


  background: #0f1828;


  padding: var(--space-4) 0;


}





.logo-grid {


  display: grid;


  grid-template-columns: repeat(5, 1fr);


  gap: var(--space-4);


  align-items: center;


}





.logo-grid img {


  filter: grayscale(1) brightness(1.4);


  opacity: 0.7;


  transition: opacity 0.2s ease;


}





.logo-grid img:hover {


  opacity: 1;


}





.page-hero {


  padding: var(--space-8) 0;


  background: linear-gradient(120deg, rgba(7, 12, 24, 0.95), rgba(7, 12, 24, 0.75));


}





.page-hero h1 {


  font-family: var(--font-title);


  font-size: clamp(28px, 3vw, 44px);


  margin-bottom: var(--space-2);


}





.page-hero p {


  color: var(--color-muted);


  max-width: 640px;


}





.content-grid {


  display: grid;


  grid-template-columns: repeat(2, 1fr);


  gap: var(--space-6);


  align-items: center;


}





.content-card {


  background: #0f1a2b;


  padding: var(--space-5);


  border-radius: var(--radius-md);


  box-shadow: var(--shadow-soft);


}





.cert-grid {


  display: grid;


  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));


  gap: var(--space-4);


  align-items: start;


}





.cert-card {


  background: linear-gradient(180deg, rgba(15,26,43,0.85), rgba(11,18,32,0.95));


  border-radius: calc(var(--radius-md) + 4px);


  padding: var(--space-4);


  text-align: center;


  cursor: pointer;


  box-shadow: 0 18px 40px rgba(2, 8, 20, 0.6), inset 0 -6px 20px rgba(0,0,0,0.2);


  transition: transform 0.28s cubic-bezier(.2,.9,.2,1), box-shadow 0.28s ease;


  border: 1px solid rgba(255,255,255,0.03);


}





.cert-card:hover {


  transform: translateY(-8px) scale(1.02);


  box-shadow: 0 30px 60px rgba(2, 8, 20, 0.7), 0 6px 24px rgba(243,156,18,0.06);


}





.cert-card .thumb {


  display: flex;


  width: 100%;


  height: auto;


  padding: var(--space-2) 0;


  border-radius: var(--radius-sm);


  overflow: visible;


  margin-bottom: var(--space-3);


  background: linear-gradient(180deg, #0b1220 0%, #0f1a2b 100%);


  align-items: center;


  justify-content: center;


}





.cert-card .thumb img {


  width: auto;


  max-width: 100%;


  height: auto;


  max-height: 140px;


  object-fit: contain;


  box-shadow: 0 8px 20px rgba(0,0,0,0.35);


}





.cert-card h4 {


  font-family: var(--font-title);


  font-size: 16px;


  margin-top: var(--space-2);


  color: var(--color-white);


  letter-spacing: 0.2px;


}





.cert-card p {


  color: var(--color-muted);


  font-size: 13px;


  margin-top: 6px;


}





.modal {


  position: fixed;


  inset: 0;


  background: rgba(2,6,12,0.6);


  display: flex;


  align-items: center;


  justify-content: center;


  padding: var(--space-4);


  z-index: 1100;


  opacity: 0;


  visibility: hidden;


  pointer-events: none;


  transition: opacity 0.28s ease, backdrop-filter 0.28s ease;


  backdrop-filter: blur(4px) saturate(1.05);


}





.modal.open {


  opacity: 1;


  visibility: visible;


  pointer-events: auto;


}





.modal-content {


  background: linear-gradient(180deg, rgba(15,26,43,0.98), rgba(11,18,32,0.98));


  padding: var(--space-4);


  border-radius: calc(var(--radius-md) + 6px);


  max-width: 940px;


  width: 100%;


  position: relative;


  transform: translateY(12px) scale(0.98);


  transition: transform 0.32s cubic-bezier(.2,.9,.2,1), box-shadow 0.28s ease;


  box-shadow: 0 40px 80px rgba(3,8,20,0.7);


}





.modal.open .modal-content {


  transform: translateY(0) scale(1);


}





.modal-content img {


  width: 100%;


  border-radius: var(--radius-sm);


  margin-bottom: var(--space-3);


  display: block;


  max-height: 70vh;


  object-fit: contain;


}





.modal-content h3 {


  margin: 0;


  color: var(--color-muted);


  font-size: 16px;


  text-align: center;


}





.modal-close {


  position: absolute;


  top: 12px;


  right: 12px;


  background: transparent;


  color: var(--color-white);


  border: none;


  font-size: 24px;


  cursor: pointer;


}





.contact-grid {


  display: grid;


  grid-template-columns: repeat(2, 1fr);


  gap: var(--space-5);


}





form {


  display: grid;


  gap: var(--space-3);


}





input,


textarea,


select {


  background: #0f1a2b;


  border: 1px solid rgba(255, 255, 255, 0.12);


  border-radius: var(--radius-sm);


  padding: 14px 16px;


  color: var(--color-white);


  transition: all 0.3s ease;


}





input:focus,


textarea:focus,


select:focus {


  outline: none;


  border-color: var(--color-accent);


  box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.15), 0 0 20px rgba(243, 156, 18, 0.1);


}





input::placeholder,


textarea::placeholder {


  color: var(--color-muted);


  transition: opacity 0.3s ease;


}





input:focus::placeholder,


textarea:focus::placeholder {


  opacity: 0.5;


}





textarea {


  min-height: 140px;


}





.form-note {


  color: var(--color-muted);


  font-size: 14px;


}





.footer {


  background: linear-gradient(180deg, #08101d 0%, #050a12 100%);


  padding: var(--space-7) 0 var(--space-4);


  position: relative;


  overflow: hidden;


}





.footer::before {


  content: '';


  position: absolute;


  top: 0;


  left: 0;


  right: 0;


  height: 1px;


  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);


}





.footer::after {


  content: '';


  position: absolute;


  bottom: -50%;


  left: -10%;


  width: 60%;


  height: 100%;


  background: radial-gradient(ellipse, rgba(243,156,18,0.03) 0%, transparent 60%);


  pointer-events: none;


}





.footer-grid {


  display: grid;


  grid-template-columns: repeat(4, 1fr);


  gap: var(--space-5);


  margin-bottom: var(--space-5);


}





.footer h4 {


  font-family: var(--font-title);


  margin-bottom: var(--space-3);


  position: relative;


  display: inline-block;


}





.footer h4::after {


  content: '';


  position: absolute;


  bottom: -5px;


  left: 0;


  width: 30px;


  height: 2px;


  background: var(--color-accent);


  border-radius: 2px;


}





.footer ul {


  list-style: none;


  display: grid;


  gap: var(--space-2);


}





.footer ul li {


  transition: all 0.3s ease;


}





.footer ul li:hover {


  transform: translateX(5px);


  color: var(--color-accent);


}





.footer ul li::before {


  content: '→';


  margin-right: 8px;


  opacity: 0;


  transition: opacity 0.3s ease;


}





.footer ul li:hover::before {


  opacity: 1;


}





.footer p {


  color: var(--color-muted);


}





.footer-bottom {


  border-top: 1px solid rgba(255, 255, 255, 0.1);


  padding-top: var(--space-3);


  display: flex;


  justify-content: space-between;


  color: var(--color-muted);


  font-size: 14px;


  position: relative;


}





.notice-grid {


  display: grid;


  grid-template-columns: repeat(3, 1fr);


  gap: var(--space-4);


}





.notice-card {


  background: #0f1a2b;


  padding: var(--space-4);


  border-radius: var(--radius-md);


  box-shadow: var(--shadow-soft);


}





.notice-card h4 {


  margin-bottom: var(--space-2);


}





.reveal {


  opacity: 0;


  transform: translateY(40px);


  transition: opacity 0.8s cubic-bezier(.22,1,.36,1), transform 0.8s cubic-bezier(.22,1,.36,1);


}





.reveal.in-view {


  opacity: 1;


  transform: translateY(0);


}





/* Staggered animations for grid items */


.reveal.in-view:nth-child(1) { transition-delay: 0s; }


.reveal.in-view:nth-child(2) { transition-delay: 0.1s; }


.reveal.in-view:nth-child(3) { transition-delay: 0.2s; }


.reveal.in-view:nth-child(4) { transition-delay: 0.3s; }


.reveal.in-view:nth-child(5) { transition-delay: 0.4s; }


.reveal.in-view:nth-child(6) { transition-delay: 0.5s; }





.card,


.service-card,


.value-card,


.notice-card,


.cert-card,


.content-card,


.stat-item {


  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;


}





.card:hover,


.service-card:hover,


.value-card:hover,


.notice-card:hover,


.cert-card:hover,


.content-card:hover,


.stat-item:hover {


  transform: translateY(-8px) scale(1.02);


  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(243,156,18,0.1);


}





.logo-grid img {


  transition: transform 0.3s ease, opacity 0.3s ease;


}





.logo-grid img:hover {


  transform: translateY(-4px) scale(1.03);


}





@keyframes fadeInRight {


  from {


    opacity: 0;


    transform: translate(40px, -50%);


  }


  to {


    opacity: 1;


    transform: translate(0, -50%);


  }


}





@keyframes slowZoom {


  0% {


    transform: scale(1);


  }


  50% {


    transform: scale(1.05);


  }


  100% {


    transform: scale(1);


  }


}





/* ============================================ */


/* Hizmet Sayfaları - Yeni Modern Tasarım */


/* ============================================ */





/* Service Hero */


.service-hero {


  position: relative;


  min-height: 400px;


  display: flex;


  align-items: center;


  overflow: hidden;


}





.service-hero-detail {


  min-height: 500px;


}





.service-hero-bg {


  position: absolute;


  inset: 0;


  z-index: 0;


}





.service-hero-bg .hero-bg-img {


  width: 100%;


  height: 100%;


  object-fit: cover;


  animation: slowZoom 20s infinite ease-in-out;


}





.hero-overlay-gradient {


  position: absolute;


  inset: 0;


  background: linear-gradient(135deg, rgba(11,18,32,0.95) 0%, rgba(11,18,32,0.7) 50%, rgba(11,18,32,0.85) 100%);


}





.hero-pattern {


  position: absolute;


  inset: 0;


  background: linear-gradient(135deg, #0b1220 0%, #12223a 50%, #0f1828 100%);


}





.hero-pattern::before {


  content: "";


  position: absolute;


  inset: 0;


  background-image: radial-gradient(rgba(243,156,18,0.08) 1px, transparent 1px);


  background-size: 30px 30px;


}





.service-hero-content {


  position: relative;


  z-index: 1;


  max-width: 700px;


}





.service-hero-content h1 {


  font-size: clamp(32px, 5vw, 56px);


  font-family: var(--font-title);


  margin-bottom: var(--space-3);


  line-height: 1.1;


}





.service-hero-content p {


  font-size: 18px;


  color: var(--color-muted);


  max-width: 500px;


}





.hero-badge {


  display: inline-block;


  background: linear-gradient(90deg, var(--color-accent), #ffd280);


  color: #1a1406;


  font-size: 12px;


  font-weight: 600;


  padding: 6px 16px;


  border-radius: 20px;


  margin-bottom: var(--space-3);


  text-transform: uppercase;


  letter-spacing: 1px;


}





.back-link {


  display: inline-block;


  color: var(--color-muted);


  font-size: 14px;


  margin-bottom: var(--space-4);


  transition: color 0.2s ease;


}





.back-link:hover {


  color: var(--color-accent);


}





/* Service Showcase Grid */


.service-showcase {


  display: grid;


  grid-template-columns: repeat(2, 1fr);


  gap: var(--space-4);


}





.showcase-card {


  position: relative;


  border-radius: var(--radius-lg);


  overflow: hidden;


  background: #0f1a2b;


  display: flex;


  flex-direction: column;


  text-decoration: none;


  box-shadow: 0 16px 48px rgba(0,0,0,0.3);


  transition: transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s ease;


  animation: cardPop 0.6s calc(var(--i,0) * 0.1s) backwards ease-out;


}





.showcase-card:hover {


  transform: translateY(-10px);


  box-shadow: 0 28px 64px rgba(243,156,18,0.15);


}





.showcase-card-wide {


  grid-column: span 2;


}





.showcase-img {


  position: relative;


  height: 220px;


  overflow: hidden;


}





.showcase-img img {


  width: 100%;


  height: 100%;


  object-fit: cover;


  transition: transform 0.6s ease;


}





.showcase-card:hover .showcase-img img {


  transform: scale(1.08);


}





.showcase-overlay {


  position: absolute;


  inset: 0;


  background: linear-gradient(180deg, transparent 0%, rgba(11,18,32,0.6) 100%);


}





.showcase-body {


  padding: var(--space-4);


  position: relative;


}





.showcase-num {


  position: absolute;


  top: -24px;


  right: 20px;


  font-family: var(--font-title);


  font-size: 48px;


  font-weight: 700;


  color: var(--color-accent);


  opacity: 0.15;


}





.showcase-body h3 {


  font-family: var(--font-title);


  font-size: 22px;


  margin-bottom: var(--space-2);


}





.showcase-body p {


  color: var(--color-muted);


  font-size: 14px;


  margin-bottom: var(--space-2);


}





.showcase-arrow {


  display: inline-block;


  font-size: 20px;


  color: var(--color-accent);


  opacity: 0;


  transform: translateX(-10px);


  transition: all 0.3s ease;


}





.showcase-card:hover .showcase-arrow {


  opacity: 1;


  transform: translateX(0);


}





/* Feature Grid */


.feature-grid {


  display: grid;


  grid-template-columns: repeat(4, 1fr);


  gap: var(--space-4);


}





.feature-card {


  background: linear-gradient(145deg, #12223a, #0b1424);


  border: 1px solid rgba(255,255,255,0.06);


  border-radius: var(--radius-md);


  padding: var(--space-5);


  text-align: center;


  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;


}





.feature-card:hover {


  transform: translateY(-8px);


  box-shadow: 0 20px 40px rgba(0,0,0,0.3);


  border-color: rgba(243,156,18,0.3);


}





.feature-icon {


  font-size: 36px;


  margin-bottom: var(--space-3);


}





.feature-card h4 {


  font-family: var(--font-title);


  margin-bottom: var(--space-2);


}





.feature-card p {


  color: var(--color-muted);


  font-size: 14px;


}





/* Detail Grid */


.detail-grid {


  display: grid;


  grid-template-columns: 1fr 1fr;


  gap: var(--space-6);


  align-items: center;


}





.detail-content p {


  color: var(--color-muted);


  margin-bottom: var(--space-3);


}





.check-list {


  list-style: none;


  margin-top: var(--space-4);


}





.check-list li {


  position: relative;


  padding-left: 28px;


  margin-bottom: var(--space-2);


  color: var(--color-text);


}





.check-list li::before {


  content: "✓";


  position: absolute;


  left: 0;


  color: var(--color-accent);


  font-weight: 700;


}





.detail-image {


  border-radius: var(--radius-lg);


  overflow: hidden;


  box-shadow: 0 20px 60px rgba(0,0,0,0.4);


}





.detail-image img {


  width: 100%;


  height: auto;


}





/* Process Timeline */


.process-timeline {


  display: flex;


  justify-content: space-between;


  gap: var(--space-3);


  margin-top: var(--space-5);


  position: relative;


}





.process-timeline::before {


  content: "";


  position: absolute;


  top: 28px;


  left: 10%;


  right: 10%;


  height: 2px;


  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);


  opacity: 0.3;


}





.process-step {


  flex: 1;


  text-align: center;


  position: relative;


}





.step-num {


  display: inline-flex;


  align-items: center;


  justify-content: center;


  width: 56px;


  height: 56px;


  background: linear-gradient(135deg, var(--color-accent), #ffd280);


  color: #1a1406;


  font-family: var(--font-title);


  font-size: 20px;


  font-weight: 700;


  border-radius: 50%;


  margin-bottom: var(--space-3);


  box-shadow: 0 8px 24px rgba(243,156,18,0.3);


  position: relative;


  z-index: 1;


}





.process-step h4 {


  font-family: var(--font-title);


  margin-bottom: var(--space-1);


}





.process-step p {


  color: var(--color-muted);


  font-size: 13px;


}





/* Why Grid */


.why-grid {


  display: grid;


  grid-template-columns: repeat(4, 1fr);


  gap: var(--space-4);


}





.why-card {


  background: rgba(255,255,255,0.03);


  border: 1px solid rgba(255,255,255,0.06);


  border-radius: var(--radius-md);


  padding: var(--space-5);


  text-align: center;


  transition: all 0.3s ease;


}





.why-card:hover {


  background: rgba(243,156,18,0.05);


  border-color: rgba(243,156,18,0.2);


  transform: translateY(-6px);


}





.why-icon {


  font-size: 40px;


  margin-bottom: var(--space-3);


}





.why-card h4 {


  font-family: var(--font-title);


  margin-bottom: var(--space-2);


}





.why-card p {


  color: var(--color-muted);


  font-size: 14px;


}





/* CTA Band */


.cta-band {


  background: linear-gradient(135deg, #12223a 0%, var(--color-accent) 200%);


  padding: var(--space-7) 0;


  position: relative;


  overflow: hidden;


}





.cta-band::before {


  content: "";


  position: absolute;


  top: -50%;


  right: -20%;


  width: 600px;


  height: 600px;


  background: radial-gradient(circle, rgba(243,156,18,0.15) 0%, transparent 70%);


  pointer-events: none;


}





.cta-content {


  text-align: center;


  position: relative;


  z-index: 1;


}





.cta-content h2 {


  font-family: var(--font-title);


  font-size: clamp(24px, 3vw, 36px);


  margin-bottom: var(--space-2);


}





.cta-content p {


  color: var(--color-muted);


  margin-bottom: var(--space-4);


}





.btn-glow {


  background: linear-gradient(90deg, var(--color-accent), #ffd280);


  color: #1a1406;


  font-weight: 600;


  padding: 14px 32px;


  border-radius: 30px;


  box-shadow: 0 8px 32px rgba(243,156,18,0.35);


  transition: all 0.3s ease;


}





.btn-glow:hover {


  transform: translateY(-3px);


  box-shadow: 0 12px 40px rgba(243,156,18,0.5);


}





@media (max-width: 1024px) {


  .card-grid,


  .services-main,


  .values-grid,


  .stats-grid,


  .logo-grid,


  .cert-grid,


  .footer-grid,


  .notice-grid,


  .feature-grid,


  .why-grid {


    grid-template-columns: repeat(2, 1fr);


  }





  .content-grid,


  .contact-grid,


  .detail-grid {


    grid-template-columns: 1fr;


  }





  .service-showcase {


    grid-template-columns: 1fr;


  }





  .showcase-card-wide {


    grid-column: span 1;


  }





  .process-timeline {


    flex-wrap: wrap;


  }





  .process-timeline::before {


    display: none;


  }





  .process-step {


    flex: 0 0 calc(33.33% - var(--space-3));


    margin-bottom: var(--space-4);


  }


}





@media (max-width: 768px) {


  .topbar .container {


    flex-direction: column;


    gap: var(--space-2);


  }





  .menu-toggle {


    display: inline-flex;


  }





  .header .nav { position: fixed; inset: 0; width: 100%; background: radial-gradient(circle at 15% 20%, rgba(243,156,18,0.14), transparent 35%), radial-gradient(circle at 70% 15%, rgba(155,89,182,0.14), transparent 40%), linear-gradient(180deg, rgba(7,12,24,0.96), rgba(11,18,32,0.98)); background-size: 200% 200%; transform: translateX(100%); transition: transform 0.45s cubic-bezier(0.2,0.9,0.2,1); padding: 110px 28px 54px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); overflow-y: auto; backdrop-filter: blur(16px); isolation: isolate; z-index: 1400; box-shadow: 0 0 80px rgba(0,0,0,0.75), 0 0 36px rgba(243,156,18,0.28); border-left: 1px solid rgba(255,255,255,0.06); animation: menuBgShift 12s ease infinite; }





  .header .nav.open {


    transform: translateX(0);


  }

  .header .nav::before { content: ''; position: fixed; inset: 10% 12%; background: radial-gradient(circle, rgba(243,156,18,0.24) 0%, transparent 52%); filter: blur(70px); opacity: 0.9; pointer-events: none; animation: pulseCta 3.5s ease infinite; z-index: 0; }





  .header .nav ul {


    flex-direction: column;


    align-items: flex-start;


    width: 100%;


  }





  .header .nav li {


    width: 100%;


  }





  .header .nav .dropdown-menu {


    position: static;


    opacity: 1;


    visibility: visible;


    transform: none;


    background: transparent;


    box-shadow: none;


    padding-left: var(--space-3);


    display: none;


  }





  .nav li.open .dropdown-menu {


    display: block;


  }





  .hero-content {


    position: static;


    transform: none;


    margin: var(--space-6);


    max-width: 100%;


  }





  .slider-controls {


    padding: 0 var(--space-3);


  }





  .card-grid,


  .services-main,


  .values-grid,


  .stats-grid,


  .logo-grid,


  .cert-grid,


  .footer-grid,


  .notice-grid,


  .feature-grid,


  .why-grid {


    grid-template-columns: 1fr;


  }





  .process-step {


    flex: 0 0 100%;


  }





  .footer-bottom {


    flex-direction: column;


    gap: var(--space-2);


  }





  .service-hero {


    min-height: 300px;


  }





  .service-hero-detail {


    min-height: 350px;


  }


}





/* ============================================ */


/* JANJAN ANİMASYONLARI - VAY BE EFEKTLERİ */


/* ============================================ */





/* Floating bubble animation */


@keyframes floatBubble {


  0%, 100% { transform: translateY(-50%) translateX(0); }


  50% { transform: translateY(-50%) translateX(30px); }


}





/* Glow pulse */


@keyframes glowPulse {


  0%, 100% { box-shadow: 0 0 20px rgba(243,156,18,0.3); }


  50% { box-shadow: 0 0 40px rgba(243,156,18,0.6), 0 0 60px rgba(243,156,18,0.3); }


}





/* Neon flicker */


@keyframes neonFlicker {


  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {


    text-shadow: 0 0 10px rgba(243,156,18,0.8), 0 0 20px rgba(243,156,18,0.5), 0 0 30px rgba(243,156,18,0.3);


  }


  20%, 24%, 55% {


    text-shadow: none;


  }


}





/* Bounce in */


@keyframes bounceIn {


  0% { transform: scale(0.3); opacity: 0; }


  50% { transform: scale(1.05); }


  70% { transform: scale(0.9); }


  100% { transform: scale(1); opacity: 1; }


}





/* Slide up fade */


@keyframes slideUpFade {


  from { opacity: 0; transform: translateY(60px); }


  to { opacity: 1; transform: translateY(0); }


}





/* Magnetic hover effect class */


.magnetic {


  transition: transform 0.3s cubic-bezier(.22,1,.36,1);


}





/* Tilt effect on hover */


.tilt-hover {


  transition: transform 0.4s cubic-bezier(.22,1,.36,1);


  transform-style: preserve-3d;


}





.tilt-hover:hover {


  transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) translateZ(10px);


}





/* Glowing border animation */


.glow-border {


  position: relative;


}





.glow-border::after {


  content: "";


  position: absolute;


  inset: -2px;


  background: linear-gradient(45deg, var(--color-accent), #e74c3c, #9b59b6, var(--color-accent));


  background-size: 400% 400%;


  border-radius: inherit;


  z-index: -1;


  animation: borderGlow 3s ease infinite;


  opacity: 0;


  transition: opacity 0.3s ease;


}





.glow-border:hover::after {


  opacity: 1;


}





@keyframes borderGlow {


  0% { background-position: 0% 50%; }


  50% { background-position: 100% 50%; }


  100% { background-position: 0% 50%; }


}





/* Shimmer effect */


.shimmer {


  position: relative;


  overflow: hidden;


}





.shimmer::after {


  content: "";


  position: absolute;


  top: 0;


  left: -150%;


  width: 150%;


  height: 100%;


  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);


  animation: shimmerMove 2s infinite;


}





@keyframes shimmerMove {


  100% { left: 150%; }


}





/* Floating elements */


.float {


  animation: floating 3s ease-in-out infinite;


}





@keyframes floating {


  0%, 100% { transform: translateY(0); }


  50% { transform: translateY(-15px); }


}





/* Pulse ring */


.pulse-ring {


  position: relative;


}





.pulse-ring::before {


  content: "";


  position: absolute;


  inset: -10px;


  border: 2px solid var(--color-accent);


  border-radius: inherit;


  animation: pulseRing 1.5s ease-out infinite;


}





@keyframes pulseRing {


  0% { transform: scale(1); opacity: 1; }


  100% { transform: scale(1.3); opacity: 0; }


}





/* Text reveal animation */


.text-reveal {


  overflow: hidden;


}





.text-reveal span {


  display: inline-block;


  transform: translateY(100%);


  animation: textReveal 0.8s forwards;


}





@keyframes textReveal {


  to { transform: translateY(0); }


}





/* Morphing background */


.morph-bg {


  background: linear-gradient(-45deg, #0b1220, #12223a, #1a1a2e, #16213e);


  background-size: 400% 400%;


  animation: morphBg 15s ease infinite;


}





@keyframes morphBg {


  0% { background-position: 0% 50%; }


  50% { background-position: 100% 50%; }


  100% { background-position: 0% 50%; }


}





/* Particle dots background */


.particle-bg {


  position: relative;


}





.particle-bg::before {


  content: "";


  position: absolute;


  inset: 0;


  background-image: 


    radial-gradient(circle at 20% 80%, rgba(243,156,18,0.1) 0%, transparent 50%),


    radial-gradient(circle at 80% 20%, rgba(155,89,182,0.08) 0%, transparent 50%),


    radial-gradient(circle at 40% 40%, rgba(231,76,60,0.06) 0%, transparent 50%);


  pointer-events: none;


  animation: particleFloat 20s ease-in-out infinite;


}





@keyframes particleFloat {


  0%, 100% { transform: translate(0, 0); }


  25% { transform: translate(10px, -10px); }


  50% { transform: translate(-5px, 15px); }


  75% { transform: translate(-15px, -5px); }


}





/* Counter number animation */


.counter-num {


  display: inline-block;


  animation: countUp 2s ease-out forwards;


}





/* Typewriter effect */


.typewriter {


  overflow: hidden;


  border-right: 3px solid var(--color-accent);


  white-space: nowrap;


  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;


}





@keyframes typing {


  from { width: 0; }


  to { width: 100%; }


}





@keyframes blink-caret {


  from, to { border-color: transparent; }


  50% { border-color: var(--color-accent); }


}





/* 3D Card flip */


.flip-card {


  perspective: 1000px;


}





.flip-card-inner {


  transition: transform 0.8s;


  transform-style: preserve-3d;


}





.flip-card:hover .flip-card-inner {


  transform: rotateY(180deg);


}





/* Ripple effect */


.ripple {


  position: relative;


  overflow: hidden;


}





.ripple::after {


  content: "";


  position: absolute;


  width: 100%;


  height: 100%;


  top: 50%;


  left: 50%;


  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 60%);


  transform: translate(-50%, -50%) scale(0);


  transition: transform 0.5s ease;


}





.ripple:active::after {


  transform: translate(-50%, -50%) scale(2);


}





/* Scrollbar glow on scroll */


html.scrolling::-webkit-scrollbar-thumb {


  box-shadow: 0 0 20px var(--color-accent);


}





/* Link hover underline animation */


.link-fancy {


  position: relative;


  display: inline-block;


}





.link-fancy::after {


  content: "";


  position: absolute;


  width: 100%;


  height: 2px;


  bottom: -2px;


  left: 0;


  background: linear-gradient(90deg, var(--color-accent), #e74c3c);


  transform: scaleX(0);


  transform-origin: right;


  transition: transform 0.3s ease;


}





.link-fancy:hover::after {


  transform: scaleX(1);


  transform-origin: left;


}





/* Image zoom on scroll */


.img-parallax {


  transition: transform 0.1s linear;


  will-change: transform;


}





/* Navbar scroll effect */


.header.scrolled {


  background: rgba(11, 18, 32, 0.95);


  box-shadow: 0 4px 30px rgba(0,0,0,0.4), 0 0 20px rgba(243,156,18,0.05);


}





/* Logo animation */


.logo {


  position: relative;


  transition: all 0.3s ease;


}





.logo:hover {


  text-shadow: 0 0 20px rgba(243,156,18,0.5);


}





/* Nav link hover effect */


.nav a {


  position: relative;


}





.nav a::after {


  content: "";


  position: absolute;


  bottom: 0;


  left: 50%;


  width: 0;


  height: 2px;


  background: var(--color-accent);


  transition: all 0.3s ease;


  transform: translateX(-50%);


}





.nav a:hover::after {


  width: 80%;


}





/* Footer social icons */


.footer a {


  transition: all 0.3s ease;


}





.footer a:hover {


  color: var(--color-accent);


  text-shadow: 0 0 10px rgba(243,156,18,0.3);


}





/* Loading skeleton */


.skeleton {


  background: linear-gradient(90deg, #0f1a2b 25%, #1a2a40 50%, #0f1a2b 75%);


  background-size: 200% 100%;


  animation: skeleton 1.5s ease-in-out infinite;


}





@keyframes skeleton {


  0% { background-position: 200% 0; }


  100% { background-position: -200% 0; }


}





/* Cursor glow effect (add via JS) */


.cursor-glow {


  position: fixed;


  width: 300px;


  height: 300px;


  background: radial-gradient(circle, rgba(243,156,18,0.08) 0%, transparent 70%);


  border-radius: 50%;


  pointer-events: none;


  z-index: 9999;


  transform: translate(-50%, -50%);


  transition: opacity 0.3s ease;


  opacity: 0;


}





body:hover .cursor-glow {


  opacity: 1;


}





/* Header scroll effect */


.header.scrolled {


  background: rgba(11, 18, 32, 0.98) !important;


  backdrop-filter: blur(20px);


  box-shadow: 0 5px 30px rgba(0,0,0,0.5), 0 0 20px rgba(243,156,18,0.1);


}





.header.scrolled .logo img {


  filter: drop-shadow(0 0 10px rgba(243,156,18,0.5));


}





/* Nav links with animated underline */


.nav-links a {


  position: relative;


  padding: 8px 0;


}





.nav-links a::after {


  content: '';


  position: absolute;


  bottom: 0;


  left: 50%;


  width: 0;


  height: 2px;


  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));


  transition: all 0.3s ease;


  transform: translateX(-50%);


  border-radius: 2px;


  box-shadow: 0 0 10px var(--color-accent);


}





.nav-links a:hover::after {


  width: 100%;


}





/* Hero text glow */


.hero-title {


  text-shadow: 0 0 30px rgba(243,156,18,0.3);


}





/* Stats glow number */


.stat-item h3 {


  background: linear-gradient(135deg, var(--color-accent), #fff);


  -webkit-background-clip: text;


  -webkit-text-fill-color: transparent;


  background-clip: text;


  filter: drop-shadow(0 0 10px rgba(243,156,18,0.5));


}





/* Service card icon glow */


.service-icon {


  position: relative;


}





.service-icon::after {


  content: '';


  position: absolute;


  inset: -10px;


  background: radial-gradient(circle, rgba(243,156,18,0.2) 0%, transparent 70%);


  border-radius: 50%;


  z-index: -1;


  animation: pulseRing 2s ease infinite;


}





/* Why card number glow */


.why-number {


  text-shadow: 0 0 20px currentColor;


}





/* Footer social glow */


.social-link {


  transition: all 0.3s ease;


}





.social-link:hover {


  transform: translateY(-3px) scale(1.1);


  box-shadow: 0 0 20px rgba(243,156,18,0.5);


}





/* Contact info hover glow */


.contact-item:hover {


  transform: translateX(5px);


}





.contact-item:hover svg {


  filter: drop-shadow(0 0 8px var(--color-accent));


}





/* Certificates card special effect */


.certificate-item {


  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);


}





.certificate-item:hover {


  transform: translateY(-10px) scale(1.02);


  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 30px rgba(243,156,18,0.2);


}





/* Floating elements animation */


@keyframes float {


  0%, 100% { transform: translateY(0) rotate(0deg); }


  50% { transform: translateY(-20px) rotate(2deg); }


}





.float-element {


  animation: float 4s ease-in-out infinite;


}





/* Loading page effect */


.page-loader {


  position: fixed;


  inset: 0;


  background: var(--color-bg);


  display: flex;


  align-items: center;


  justify-content: center;


  z-index: 99999;


  transition: opacity 0.5s ease;


}





.page-loader.loaded {


  opacity: 0;


  pointer-events: none;


}





.loader-spinner {


  width: 60px;


  height: 60px;


  border: 3px solid rgba(243,156,18,0.2);


  border-top-color: var(--color-accent);


  border-radius: 50%;


  animation: spin 1s linear infinite;


}





@keyframes spin {


  to { transform: rotate(360deg); }


}





/* Gradient border animation */


.gradient-border {


  position: relative;


  background: var(--color-bg-2);


  border-radius: var(--radius-md);


}





.gradient-border::before {


  content: '';


  position: absolute;


  inset: -2px;


  background: linear-gradient(45deg, var(--color-accent), var(--color-accent-2), var(--color-accent-3), var(--color-accent));


  background-size: 400% 400%;


  border-radius: inherit;


  z-index: -1;


  animation: gradientMove 3s linear infinite;


}





/* Glitch text effect */


.glitch {


  position: relative;


}





.glitch::before,


.glitch::after {


  content: attr(data-text);


  position: absolute;


  top: 0;


  left: 0;


  width: 100%;


  height: 100%;


}





.glitch::before {


  animation: glitchTop 1s linear infinite;


  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);


  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);


}





.glitch::after {


  animation: glitchBottom 1.5s linear infinite;


  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);


  -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);


}





@keyframes glitchTop {


  2%, 64% { transform: translate(2px, -2px); }


  4%, 60% { transform: translate(-2px, 2px); }


  62% { transform: translate(13px, -1px) skew(-13deg); }


}





@keyframes glitchBottom {


  2%, 64% { transform: translate(-2px, 0); }


  4%, 60% { transform: translate(-2px, 0); }


  62% { transform: translate(-22px, 5px) skew(21deg); }


}





/* Neon text */


.neon-text {


  color: var(--color-accent);


  text-shadow: 


    0 0 5px var(--color-accent),


    0 0 10px var(--color-accent),


    0 0 20px var(--color-accent),


    0 0 40px var(--color-accent);


  animation: neonFlicker 1.5s ease-in-out infinite alternate;


}





/* Glass morphism card */


.glass-card {


  background: rgba(255,255,255,0.05);


  backdrop-filter: blur(20px);


  border: 1px solid rgba(255,255,255,0.1);


  border-radius: var(--radius-lg);


}





/* Hover lift for all interactive elements */


.hover-lift {


  transition: transform 0.3s ease, box-shadow 0.3s ease;


}





.hover-lift:hover {


  transform: translateY(-5px);


  box-shadow: var(--shadow-glow);


}





/* Scrollbar glow on scroll */


html.scrolling::-webkit-scrollbar-thumb {


  box-shadow: 0 0 20px var(--color-accent);


}





/* Image shine on hover */


.image-shine {


  position: relative;


  overflow: hidden;


}





.image-shine::before {


  content: '';


  position: absolute;


  inset: 0;


  background: linear-gradient(


    45deg,


    transparent 40%,


    rgba(255,255,255,0.3) 50%,


    transparent 60%


  );


  transform: translateX(-100%);


  transition: transform 0.6s ease;


}





.image-shine:hover::before {


  transform: translateX(100%);


}





/* Pulse animation for CTA */


.pulse-cta {


  animation: pulseCta 2s ease infinite;


}





@keyframes pulseCta {


  0%, 100% { box-shadow: 0 0 0 0 rgba(243,156,18,0.4); }


  50% { box-shadow: 0 0 0 15px rgba(243,156,18,0); }


}





/* Mobile touch feedback */


@media (hover: none) {


  .btn:active {


    transform: scale(0.95);


  }


  


  .card:active {


    transform: scale(0.98);


  }


}

@keyframes menuBgShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes menuPanelIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes menuItemIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}