/*
Theme Name: Vivid Dijital Ajans
Theme URI: https://www.vividdijitalajans.com
Author: Vivid Dijital Ajans
Author URI: https://www.vividdijitalajans.com
Description: Custom WordPress theme for Vivid Dijital Ajans — Bursa's performance-driven digital agency. Editorial, premium, lightweight, modular and SEO-optimized.
Version: 1.9.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.1
License: Private — All Rights Reserved
Text Domain: vivid
Tags: custom-theme, digital-agency, editorial, performance

*/

/* ==========================================================================
   DESIGN TOKENS — CSS Custom Properties
   ========================================================================== */

:root {

  /* ---------- Color System (Kurumsal Kimlik) ---------- */

  /* Ana Renkler — Kullanıcı Belirtimli */
  --color-corporate:       #11187A; /* Ana kurumsal renk: Koyu Lacivert */
  --color-blue-main:       #0B5BC4; /* Ana mavi: Canlı Mavi */
  --color-blue-light:      #1679D5; /* Açık mavi: Parlak Mavi */
  --color-blue-secondary:  #2545B8; /* İkincil mavi: Orta Mavi */
  --color-gray-metallic:   #A6A6A6; /* Metalik gri: Gri */
  --color-gray-dark:       #333333; /* Koyu gri: Metin */
  --color-bg-light:        #F5F7FA; /* Arka plan: Çok açık gri */
  --color-white:           #FFFFFF; /* Beyaz */

  /* Neutrals & Structural Shades */
  --color-black:           #0B1048; /* Derin Gece Laciverti */
  --color-off-black:       #11187A; /* Kurumsal Koyu Lacivert */
  --color-dark:            #11187A; /* Ana Kurumsal */
  --color-dark-mid:        #1A2380; /* Orta Koyu Lacivert */
  --color-mid:             #555555;
  --color-light-mid:       #7A8290;
  --color-light:           #DCE2EC; /* Yumuşak Açık Gri Kenarlık */
  --color-off-white:       var(--color-bg-light); /* #F5F7FA */

  /* Accent Mappings */
  --color-accent:          var(--color-blue-main);      /* #0B5BC4 */
  --color-accent-light:    var(--color-blue-light);     /* #1679D5 */
  --color-accent-dark:     var(--color-corporate);      /* #11187A */

  /* Service & Section Palette Aliases */
  --color-primary-blue:    var(--color-blue-main);      /* #0B5BC4 */
  --color-primary-navy:    var(--color-corporate);      /* #11187A */
  --color-metallic-gray:   var(--color-gray-metallic);  /* #A6A6A6 */
  --color-dark-gray:       var(--color-gray-dark);      /* #333333 */

  /* Semantic */
  --color-success:         #1E9E64;
  --color-error:           #D9383A;

  /* Background aliases */
  --bg-primary:            var(--color-bg-light);       /* #F5F7FA */
  --bg-surface:            var(--color-white);          /* #FFFFFF */
  --bg-dark:               var(--color-corporate);      /* #11187A */
  --bg-accent:             var(--color-blue-main);      /* #0B5BC4 */
  --bg-subtle:             rgba(11, 91, 196, 0.05);

  /* Text aliases */
  --text-primary:          var(--color-gray-dark);      /* #333333 */
  --text-heading:          var(--color-corporate);      /* #11187A */
  --text-secondary:        #5C6474;
  --text-light:            var(--color-gray-metallic);  /* #A6A6A6 */
  --text-inverse:          var(--color-white);          /* #FFFFFF */
  --text-accent:           var(--color-blue-main);      /* #0B5BC4 */

  /* ---------- Typography ---------- */

  /* Font families */
  --font-display: 'Bricolage Grotesque', 'Arial Black', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  /* Font sizes — fluid via clamp */
  --fs-display-xl: clamp(3.5rem, 8vw,  9rem);
  --fs-display-lg: clamp(2.75rem, 5vw, 6rem);
  --fs-display-md: clamp(2rem,   3.5vw, 4rem);

  --fs-h1: clamp(2.25rem, 4vw,   4.5rem);
  --fs-h2: clamp(1.625rem, 2.5vw, 2.75rem);
  --fs-h3: clamp(1.125rem, 2vw,   1.75rem);
  --fs-h4: clamp(1rem,    1.5vw,  1.25rem);

  --fs-body-lg: 1.125rem;
  --fs-body-md: 1rem;
  --fs-body-sm: 0.875rem;

  --fs-caption:  0.75rem;
  --fs-label:    0.6875rem;
  --fs-overline: 0.625rem;

  /* Font weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     700;
  --fw-extrabold:800;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;
  --lh-loose:   2;

  /* Letter spacing */
  --ls-tight:  -0.03em;
  --ls-normal:  0;
  --ls-wide:    0.05em;
  --ls-wider:   0.08em;
  --ls-widest:  0.15em;

  /* ---------- Spacing Scale ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;
  --space-11: 12rem;
  --space-12: 16rem;

  /* Section spacing */
  --section-gap:     clamp(4rem, 8vw, 8rem);
  --section-gap-sm:  clamp(2.5rem, 5vw, 5rem);
  --section-gap-lg:  clamp(6rem, 12vw, 12rem);

  /* ---------- Container ---------- */
  --container-sm:  640px;
  --container-md:  900px;
  --container-lg:  1200px;
  --container-xl:  1440px;

  --gutter-sm: 1.25rem;
  --gutter-md: 2rem;
  --gutter-lg: 3rem;
  --gutter-xl: 4rem;

  --container-padding: var(--gutter-sm);

  /* ---------- Border Radius ---------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-full: 9999px;

  /* ---------- Border ---------- */
  --border-thin:   1px solid;
  --border-normal: 1.5px solid;
  --border-thick:  2px solid;

  /* ---------- Motion ---------- */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Z-index ---------- */
  --z-below:  -1;
  --z-base:    0;
  --z-raised:  10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-top:     400;
}

/* ---------- Responsive container padding ---------- */
@media (min-width: 768px) {
  :root {
    --container-padding: var(--gutter-md);
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding: var(--gutter-lg);
  }
}

@media (min-width: 1440px) {
  :root {
    --container-padding: var(--gutter-xl);
  }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-normal: 0ms;
    --duration-slow:   0ms;
    --duration-slower: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, iframe, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-heading); }
p { max-width: 68ch; }

/* ==========================================================================
   TYPOGRAPHY UTILITIES
   ========================================================================== */

.display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.text-label { font-family: var(--font-body); font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-widest); text-transform: uppercase; }

/* ==========================================================================
   LAYOUT — CONTAINERS & GRID
   ========================================================================== */

.container { width: 100%; max-width: var(--container-lg); margin-inline: auto; padding-inline: var(--container-padding); }
.container--narrow { max-width: 820px; }
.container--article { max-width: 860px; }
.container--blog-header { max-width: 1080px; }
.container--wide { max-width: 1100px; }
.container--xl { max-width: var(--container-xl); }
.section { padding-block: var(--section-gap); }
.section--dark { background-color: var(--bg-dark); color: var(--text-inverse); }
.grid { display: grid; gap: var(--space-6); }
.flex { display: flex; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

/* ==========================================================================
   BUTTONS — High Contrast, Readable, Modern Corporate
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  /* 15px - highly readable */ font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: uppercase;
  padding: 0.95rem 2rem;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--duration-normal) var(--ease-default), color var(--duration-normal) var(--ease-default), border-color var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default), transform var(--duration-fast) var(--ease-default);
  white-space: nowrap;
  border: 2px solid transparent;
  position: relative;
}
.btn:focus-visible { outline: 2px solid var(--color-blue-main); outline-offset: 3px; }
.btn--primary, .vivid-cta-primary { background-color: var(--color-blue-main); /* #0B5BC4 */ color: #ffffff !important; border-color: var(--color-blue-main); box-shadow: 0 4px 16px rgba(11, 91, 196, 0.28); }
.btn--primary:hover, .vivid-cta-primary:hover {
  background-color: var(--color-corporate);
  /* #11187A */ border-color: var(--color-corporate);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(11, 91, 196, 0.38);
}
.btn--primary:active, .vivid-cta-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(11, 91, 196, 0.2); }
.btn--secondary, .vivid-cta-secondary { background-color: transparent; color: var(--color-corporate) !important; /* #11187A */ border-color: var(--color-corporate); }
.btn--secondary:hover, .vivid-cta-secondary:hover {
  background-color: var(--color-corporate);
  color: #ffffff !important;
  border-color: var(--color-corporate);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(17, 24, 122, 0.18);
}
.btn--white, .btn--dark { background-color: #ffffff !important; color: var(--color-corporate) !important; /* #11187A */ border-color: #ffffff !important; font-weight: 800; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22); }
.btn--white:hover, .btn--dark:hover {
  background-color: var(--color-bg-light) !important;
  color: var(--color-blue-main) !important;
  /* #0B5BC4 */ border-color: var(--color-bg-light) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}
.btn .btn-arrow { display: inline-block; font-size: 1.15em; line-height: 1; transition: transform var(--duration-normal) var(--ease-default); color: inherit; }
.btn:hover .btn-arrow { transform: translateX(4px); color: inherit; }

/* ==========================================================================
   FORMS
   ========================================================================== */

.vivid-form { display: flex; flex-direction: column; gap: var(--space-6); }
.vivid-form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.vivid-form-label { font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--text-secondary); }
.vivid-form--dark .vivid-form-label { color: var(--color-light-mid); }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  transition: background-color var(--duration-normal) var(--ease-default), border-color var(--duration-normal) var(--ease-default), backdrop-filter var(--duration-normal) var(--ease-default);
}
.admin-bar .site-header { top: 32px; }
.site-header--transparent { background-color: transparent; border-bottom: var(--border-thin) transparent; }
.site-header--scrolled {
  background-color: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid rgba(166, 166, 166, 0.22);
  box-shadow: 0 4px 20px rgba(17, 24, 122, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-4); gap: var(--space-6); }
.site-logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; flex-shrink: 0; }
.site-logo__text { font-family: var(--font-display); font-size: 1.35rem; font-weight: var(--fw-extrabold); letter-spacing: var(--ls-tight); color: var(--color-corporate); line-height: 1; }
.site-logo__text span { color: var(--color-blue-main); }
.site-logo--inverse .site-logo__text { color: var(--color-white); }
.site-logo--inverse .site-logo__text span { color: var(--color-blue-light); }
.primary-nav { display: flex; align-items: center; gap: var(--space-7); }
.nav-menu { display: flex; align-items: center; gap: var(--space-6); }
.nav-menu__item { display: inline-flex; align-items: center; }
.nav-menu__link, .vivid-nav-link {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-corporate);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  transition: color var(--duration-normal) var(--ease-default);
}
.nav-menu__link::after, .vivid-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-blue-main);
  transition: width var(--duration-normal) var(--ease-default);
}
.nav-menu__link:hover::after, .vivid-nav-link:hover::after, .nav-menu__link.current-menu-item::after, .nav-menu__link[aria-current="page"]::after { width: 100%; }
.nav-menu__link:hover, .vivid-nav-link:hover { color: var(--color-blue-main); }
.nav-cta { display: flex; align-items: center; gap: var(--space-4); }
.nav-cta .btn {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.65rem 1.45rem;
  border-radius: 6px;
  background-color: var(--color-blue-main);
  color: #ffffff !important;
  border: 2px solid var(--color-blue-main);
  box-shadow: 0 4px 14px rgba(11, 91, 196, 0.3);
}
.nav-cta .btn:hover { background-color: var(--color-corporate); border-color: var(--color-corporate); color: #ffffff !important; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(17, 24, 122, 0.35); }
.hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: #ffffff;
  border: 1.5px solid rgba(17, 24, 122, 0.18);
  border-radius: 10px;
  cursor: pointer;
  z-index: var(--z-top);
  box-shadow: 0 2px 8px rgba(17, 24, 122, 0.06);
  transition: all var(--duration-fast) var(--ease-default);
}
.hamburger:hover {
  background: rgba(17, 24, 122, 0.05);
  border-color: var(--color-blue-main);
  box-shadow: 0 3px 10px rgba(11, 91, 196, 0.12);
}
.hamburger__line {
  display: block;
  width: 22px;
  height: 2.5px;
  background-color: var(--color-corporate) !important;
  border-radius: 2px;
  transition: transform var(--duration-normal) var(--ease-default), opacity var(--duration-normal) var(--ease-default), background-color var(--duration-normal) var(--ease-default);
  transform-origin: center;
}
.hamburger[aria-expanded="true"] {
  background: rgba(17, 24, 122, 0.06) !important;
  border-color: var(--color-corporate) !important;
  box-shadow: none !important;
}
.hamburger[aria-expanded="true"] .hamburger__line {
  background-color: var(--color-corporate) !important;
  box-shadow: none !important;
}
.hamburger[aria-expanded="true"] .hamburger__line:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger[aria-expanded="true"] .hamburger__line:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.hamburger[aria-expanded="true"]:hover {
  background: var(--color-blue-main) !important;
  border-color: var(--color-blue-main) !important;
}
.hamburger[aria-expanded="true"]:hover .hamburger__line {
  background-color: #ffffff !important;
}

.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  height: 100dvh;
  z-index: var(--z-overlay);
  background: #ffffff;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(75px + env(safe-area-inset-top, 0px)) 1.5rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default);
  transform: translateY(-6px);
}
.mobile-nav.is-open { opacity: 1; pointer-events: all; transform: translateY(0); }
body.mobile-nav-open { overflow: hidden; touch-action: none; }
body.mobile-nav-open .site-header {
  z-index: calc(var(--z-overlay) + 10);
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(17, 24, 122, 0.08) !important;
  box-shadow: none !important;
}
body.mobile-nav-open .site-logo__text { color: var(--color-corporate) !important; }
body.mobile-nav-open .site-logo__text span { color: var(--color-blue-main) !important; }
body.mobile-nav-open .hamburger {
  background: rgba(17, 24, 122, 0.06);
  border-color: rgba(17, 24, 122, 0.16);
}
body.mobile-nav-open .hamburger__line { background-color: var(--color-corporate) !important; }
body.mobile-nav-open .vivid-whatsapp-float,
body.mobile-nav-open .vivid-phone-float {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.mobile-nav__menu {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: clamp(1.5rem, 4vh, 2.75rem);
  margin-bottom: auto;
  padding: 0;
  list-style: none;
}
.mobile-nav__menu li {
  list-style: none;
  border-bottom: 1px solid rgba(17, 24, 122, 0.07);
}
.mobile-nav__menu li:first-child {
  border-top: 1px solid rgba(17, 24, 122, 0.07);
}
.mobile-nav__link {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-corporate);
  padding: 0.75rem 0.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: all var(--duration-fast) var(--ease-default);
}
.mobile-nav__link::after {
  content: '→';
  font-size: 1.1rem;
  font-weight: 500;
  color: rgba(17, 24, 122, 0.3);
  transition: all var(--duration-fast) var(--ease-default);
}
.mobile-nav__link:hover, .mobile-nav__link:active {
  color: var(--color-blue-main);
  padding-left: 0.35rem;
}
.mobile-nav__link:hover::after, .mobile-nav__link:active::after {
  color: var(--color-blue-main);
  transform: translateX(4px);
}
.mobile-nav__link[aria-current="page"],
.mobile-nav__menu li.current-menu-item .mobile-nav__link {
  color: var(--color-blue-main);
  font-weight: 800;
}
.mobile-nav__link[aria-current="page"]::after,
.mobile-nav__menu li.current-menu-item .mobile-nav__link::after {
  color: var(--color-blue-main);
}

.mobile-nav__footer {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1.5px solid rgba(17, 24, 122, 0.08);
  margin-top: auto;
}
.mobile-nav__contacts {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.mobile-nav__contact-link {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: var(--color-bg-light);
  border: 1px solid rgba(17, 24, 122, 0.1);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-corporate);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-default);
}
.mobile-nav__contact-link svg {
  color: var(--color-blue-main);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.mobile-nav__contact-link:hover {
  background: #ffffff;
  border-color: var(--color-blue-main);
  color: var(--color-blue-main);
}
.mobile-nav__contact-link--whatsapp {
  background: rgba(37, 211, 102, 0.1);
  border-color: rgba(37, 211, 102, 0.3);
  color: #128c7e;
}
.mobile-nav__contact-link--whatsapp:hover {
  background: rgba(37, 211, 102, 0.18);
  border-color: #25d366;
}
.mobile-nav__contact-link--whatsapp svg,
.mobile-nav__wp-icon svg {
  color: #25d366 !important;
  fill: #25d366;
}

/* ==========================================================================
   HEADER & MOBILE SOCIAL MEDIA LINKS
   ========================================================================== */

.header-social { display: flex; align-items: center; }
.header-social-list { display: flex; align-items: center; gap: 0.45rem; list-style: none; margin: 0; padding: 0; }
.header-social-list .vivid-social-item { list-style: none; }
.header-social-list .vivid-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #ffffff;
  border: 1.5px solid rgba(17, 24, 122, 0.16);
  color: var(--color-corporate) !important;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(17, 24, 122, 0.04);
  transition: all var(--duration-fast) var(--ease-default);
}
.header-social-list .vivid-social-link svg { width: 17px; height: 17px; }
.header-social-list .vivid-social-link:hover {
  transform: translateY(-2px);
  background: var(--color-blue-main);
  border-color: var(--color-blue-main);
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(11, 91, 196, 0.2);
}

#site-phone-header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #ffffff;
  border: 1.5px solid rgba(17, 24, 122, 0.16);
  color: var(--color-corporate);
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(17, 24, 122, 0.04);
  transition: all var(--duration-fast) var(--ease-default);
}
#site-phone-header:hover {
  background: var(--color-blue-main);
  border-color: var(--color-blue-main);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(11, 91, 196, 0.2);
}

.mobile-nav__contacts { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: var(--space-5); }
.mobile-nav__contact-link--whatsapp {
  background: rgba(37, 211, 102, 0.12) !important;
  border: 1px solid rgba(37, 211, 102, 0.4) !important;
  color: #25D366 !important;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.mobile-nav__contact-link--whatsapp:hover { background: #25D366 !important; color: #ffffff !important; }
.mobile-nav__wp-icon { display: inline-flex; align-items: center; }
.mobile-nav__wp-icon svg { width: 18px; height: 18px; }

.mobile-nav__social {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(17, 24, 122, 0.1);
}
.mobile-nav__social-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-corporate);
  opacity: 0.8;
  font-weight: 700;
  margin: 0;
}
.mobile-social-list {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-social-list .vivid-social-item { list-style: none; }
.mobile-social-list .vivid-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #ffffff;
  border: 1.5px solid rgba(17, 24, 122, 0.16);
  color: var(--color-corporate) !important;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(17, 24, 122, 0.05);
  transition: all var(--duration-fast) var(--ease-default);
}
.mobile-social-list .vivid-social-link svg {
  width: 18px;
  height: 18px;
}
.mobile-social-list .vivid-social-link:hover {
  background: var(--color-blue-main) !important;
  border-color: var(--color-blue-main) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(11, 91, 196, 0.25);
}

.contact-social-links { display: flex; align-items: center; gap: 0.65rem; list-style: none; padding: 0; margin: 0; }
.contact-social-links .vivid-social-item { list-style: none; }
.contact-social-links .vivid-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--color-white);
  border: 1.5px solid rgba(166, 166, 166, 0.3);
  color: var(--color-corporate);
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(17, 24, 122, 0.04);
  transition: all var(--duration-fast) var(--ease-default);
}
.contact-social-links .vivid-social-link svg { width: 20px; height: 20px; }
.contact-social-links .vivid-social-link:hover {
  transform: translateY(-2px);
  background: var(--color-blue-main);
  border-color: var(--color-blue-main);
  color: #ffffff !important;
}

@media (max-width: 1120px) {
  .header-social { display: none; }
}

@media (max-width: 1023px) {
  .site-header {
    position: fixed;
    top: 0 !important;
    left: 0;
    right: 0;
    margin: 0 !important;
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid rgba(17, 24, 122, 0.08) !important;
    box-shadow: 0 4px 18px rgba(17, 24, 122, 0.05) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }
  .header-inner { padding-block: 0.75rem; }
  .primary-nav, .nav-menu, .nav-cta { display: none !important; }
  .hamburger { display: flex; }
  .mobile-nav { display: flex; }
}

@media (min-width: 601px) and (max-width: 782px) {
  .admin-bar .site-header { top: 46px !important; }
  .admin-bar .hero { padding-top: calc(122px + 1.5rem) !important; }
}

@media (max-width: 600px) {
  .admin-bar .site-header { top: 0 !important; }
}

@media (max-width: 480px) {
  .header-inner { padding-block: 0.65rem; }
  .site-logo__text { font-size: 1.25rem; }
  .mobile-nav__link { font-size: 1.05rem; padding: 0.75rem 0.5rem; }
  .mobile-nav__menu { margin-top: clamp(1.25rem, 3.5vh, 2rem); margin-bottom: auto; }
}

/* ==========================================================================
   SKIP LINK (Accessibility)
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-top);
  background-color: var(--color-blue-main);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: top var(--duration-fast) var(--ease-default);
}
.skip-link:focus { top: var(--space-4); }

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */

.breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-caption); color: var(--text-secondary); flex-wrap: wrap; }
.breadcrumb__separator { color: var(--color-gray-metallic); }
.breadcrumb__link { text-decoration: none; transition: color var(--duration-fast); }
.breadcrumb__link:hover { color: var(--color-blue-main); }
.breadcrumb__current { color: var(--text-secondary); }

/* ==========================================================================
   FOCUS STATES — Accessibility
   ========================================================================== */

:focus-visible { outline: 2px solid var(--color-blue-main); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* ==========================================================================
   SELECTION
   ========================================================================== */

::selection { background-color: var(--color-blue-main); /* #0B5BC4 */ color: var(--color-white); /* #FFFFFF */; }

/* ==========================================================================
   SCROLLBAR
   ========================================================================== */

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg-light); /* #F5F7FA */; }
::-webkit-scrollbar-thumb { background: rgba(166, 166, 166, 0.6); /* #A6A6A6 */ border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-blue-main); /* #0B5BC4 */; }

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.hidden { display: none !important; }
.block { display: block !important; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-4-3 { aspect-ratio: 4 / 3; }

@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

/* ==========================================================================
   SECTION HEADERS
   ========================================================================== */

.section-header { margin-bottom: var(--space-8); }
.section-header--split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.section-label { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--color-blue-main); /* #0B5BC4 */ margin-bottom: var(--space-3); }
.section-label--inverse, .section-label--dark { color: var(--color-blue-light) !important; /* #1679D5 */; }
.section-title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: var(--color-corporate); /* #11187A */; }
.section-title--inverse { color: var(--color-white) !important; /* #FFFFFF */; }
.section-title--xl { font-size: var(--fs-display-md); }

/* ==========================================================================
   STAT / METRIC DISPLAY
   ========================================================================== */

/* ==========================================================================
   DIVIDER
   ========================================================================== */

.divider { width: 100%; height: 1px; background-color: rgba(166, 166, 166, 0.3); /* #A6A6A6 */ border: none; margin: 0; }
.divider--dark { background-color: rgba(255, 255, 255, 0.15); }

/* ==========================================================================
   TAG / BADGE
   ========================================================================== */

.tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border: 1px solid rgba(166, 166, 166, 0.4);
  /* #A6A6A6 */ color: var(--text-secondary);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   IMAGE UTILITIES
   ========================================================================== */

/* ==========================================================================
   FOOTER
   ========================================================================== */

/* ==========================================================================
   FOOTER (Modern Luxury Midnight Studio Footer)
   ========================================================================== */

.site-footer {
  background: linear-gradient(180deg, #F8FAFD 0%, #EEF2F8 100%);
  color: #4A5568;
  padding-block: clamp(4.5rem, 7vw, 6.5rem) var(--space-7);
  border-top: 1px solid rgba(166, 166, 166, 0.25);
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(850px, 90vw);
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(11, 91, 196, 0.4), transparent);
}
.site-footer::after { content: ''; position: absolute; top: -150px; right: -80px; width: 450px; height: 450px; background: radial-gradient(circle, rgba(11, 91, 196, 0.06) 0%, transparent 70%); pointer-events: none; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: clamp(2rem, 3.5vw, 3.25rem); align-items: start; margin-bottom: clamp(3rem, 5vw, 4.5rem); position: relative; z-index: 1; }
.footer-brand { display: flex; flex-direction: column; }
.footer-logo-wrapper { margin-bottom: var(--space-4); }
.site-footer .site-logo {
  display: inline-flex;
  align-items: center;
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
  width: fit-content;
  transition: opacity var(--duration-fast) var(--ease-default);
}
.site-footer .site-logo:hover { transform: none; box-shadow: none; opacity: 0.85; }
.site-footer .site-logo__img { height: 56px; max-height: 56px; width: auto; max-width: 260px; object-fit: contain; display: block; }
.site-footer .site-logo__text { color: var(--color-corporate); font-family: var(--font-display); font-size: 1.65rem; font-weight: 800; letter-spacing: -0.02em; }
.footer-tagline { font-size: 0.9375rem; color: #555E6D; margin: 0 0 var(--space-4); max-width: 34ch; line-height: 1.6; }
.footer-contact-list { display: flex; flex-direction: column; gap: 0.65rem; margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.footer-contact-list li { list-style: none; }
.footer-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--color-corporate);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all var(--duration-fast) var(--ease-default);
}
.footer-contact-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid rgba(166, 166, 166, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-main);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(17, 24, 122, 0.04);
  transition: all var(--duration-fast) var(--ease-default);
}
.footer-contact-icon--whatsapp { color: #25D366; background: rgba(37, 211, 102, 0.08); border-color: rgba(37, 211, 102, 0.25); }
.footer-contact-icon--whatsapp svg { width: 20px; height: 20px; }
.footer-contact-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.footer-contact-link:hover { color: var(--color-blue-main); transform: translateX(3px); }
.footer-contact-link:hover .footer-contact-icon { background: var(--color-blue-main); border-color: var(--color-blue-main); color: #ffffff; box-shadow: 0 4px 12px rgba(11, 91, 196, 0.25); }
.footer-col-title {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-corporate);
  margin-bottom: var(--space-5);
  position: relative;
  padding-bottom: 0.5rem;
}
.footer-col-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 24px; height: 2px; background: var(--color-blue-main); border-radius: 2px; }
.footer-nav-list { display: flex; flex-direction: column; gap: 0.7rem; list-style: none; margin: 0; padding: 0; }
.footer-nav-list li { list-style: none; }
.footer-nav-link { font-size: 0.9375rem; color: #555E6D; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; transition: all var(--duration-fast) var(--ease-default); }
.footer-nav-link:hover { color: var(--color-blue-main); transform: translateX(4px); }
.footer-col--cta { display: flex; flex-direction: column; }
.footer-cta-card {
  background: #ffffff;
  border: 1px solid rgba(166, 166, 166, 0.28);
  border-radius: 18px;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: 0 10px 30px rgba(17, 24, 122, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-cta-badge { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.12em; color: var(--color-blue-main); text-transform: uppercase; }
.footer-cta-title { color: var(--color-corporate); font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; margin: 0; line-height: 1.3; }
.footer-cta-text { font-size: 0.875rem; line-height: 1.6; color: #666666; margin: 0; }
.footer-cta-btn {
  background: var(--color-corporate) !important;
  color: #ffffff !important;
  border: 2px solid var(--color-corporate) !important;
  font-weight: 800;
  font-size: 0.875rem;
  padding: 0.75rem 1.25rem;
  border-radius: 10px;
  width: 100%;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(17, 24, 122, 0.18);
  margin-top: 0.35rem;
  transition: all var(--duration-normal) var(--ease-default);
}
.footer-cta-btn .btn-arrow { color: rgba(255, 255, 255, 0.8); margin-left: 0.35rem; display: inline-block; transition: transform var(--duration-fast); }
.footer-cta-btn:hover {
  background: var(--color-blue-main) !important;
  color: #ffffff !important;
  border-color: var(--color-blue-main) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(11, 91, 196, 0.28);
}
.footer-cta-btn:hover .btn-arrow { transform: translateX(4px); }
.footer-hours { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.75rem; color: #666666; margin-top: 0.2rem; }
.footer-hours-dot { width: 6px; height: 6px; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); display: inline-block; }
.footer-social-list { display: flex; align-items: center; gap: 0.55rem; list-style: none; padding: 0; margin: 0; }
.footer-social-list .vivid-social-item { list-style: none; }
.footer-social-list .vivid-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(166, 166, 166, 0.28);
  color: var(--color-corporate);
  text-decoration: none;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(17, 24, 122, 0.04);
  transition: all var(--duration-fast) var(--ease-default);
}
.footer-social-list .vivid-social-link:hover { color: #ffffff; background: var(--color-corporate); border-color: var(--color-corporate); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(17, 24, 122, 0.18); }
.site-footer hr.divider { border: none; height: 1px; background: linear-gradient(90deg, transparent, rgba(166, 166, 166, 0.25), transparent); margin: var(--space-8) 0 var(--space-6); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.footer-copyright { font-size: 0.8125rem; color: #718096; margin: 0; }
.footer-legal-links { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.footer-legal-link { font-size: 0.8125rem; color: #718096; text-decoration: none; transition: color var(--duration-fast); }
.footer-legal-link:hover { color: var(--color-blue-main); }

/* ==========================================================================
   PAGE HEADER (Inner pages)
   ========================================================================== */

.page-header, .page-hero { padding-top: calc(90px + clamp(2.5rem, 5vw, 4.5rem)); padding-bottom: var(--space-8); border-bottom: 1px solid rgba(166, 166, 166, 0.22); background: var(--color-bg-light); }
.admin-bar .page-header, .admin-bar .page-hero { padding-top: calc(122px + clamp(2.5rem, 5vw, 4.5rem)); }
.page-header__description, .page-hero__description { font-size: var(--fs-body-lg); color: var(--text-secondary); max-width: 65ch; margin-top: var(--space-4); line-height: var(--lh-relaxed); }

/* ==========================================================================
   404 PAGE
   ========================================================================== */

/* ==========================================================================
   SCROLL REVEAL ANIMATIONS
   ========================================================================== */

[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
[data-reveal-stagger].is-visible > * { opacity: 1 !important; transform: translateY(0) !important; }
[data-reveal-stagger].is-visible > *:nth-child(1)  { transition-delay: 0ms; }
[data-reveal-stagger].is-visible > *:nth-child(2)  { transition-delay: 60ms; }
[data-reveal-stagger].is-visible > *:nth-child(3)  { transition-delay: 120ms; }
[data-reveal-stagger].is-visible > *:nth-child(4)  { transition-delay: 180ms; }
[data-reveal-stagger].is-visible > *:nth-child(5)  { transition-delay: 240ms; }
[data-reveal-stagger].is-visible > *:nth-child(6)  { transition-delay: 300ms; }
[data-reveal-stagger].is-visible > *:nth-child(7)  { transition-delay: 360ms; }
[data-reveal-stagger].is-visible > *:nth-child(8)  { transition-delay: 420ms; }
[data-reveal-stagger].is-visible > *:nth-child(9)  { transition-delay: 480ms; }
[data-reveal-stagger].is-visible > *:nth-child(10) { transition-delay: 540ms; }
[data-reveal-stagger].is-visible > *:nth-child(11) { transition-delay: 600ms; }
[data-reveal-stagger].is-visible > *:nth-child(12) { transition-delay: 660ms; }
[data-reveal="left"] { transform: translateX(-30px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.95); }
[data-reveal="scale"].is-visible { transform: scale(1); }
.hero [data-reveal], .abt-hero [data-reveal], .cnt-hero [data-reveal] { transition-duration: 0.9s; }

/* ==========================================================================
   FLOATING WHATSAPP BUTTON (SITEWIDE)
   ========================================================================== */

.vivid-whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  background: linear-gradient(135deg, #25D366 0%, #1ea952 100%);
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
  text-decoration: none;
  transition: transform var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal);
}
.vivid-whatsapp-float:hover { transform: scale(1.08) translateY(-3px); box-shadow: 0 12px 32px rgba(37, 211, 102, 0.6); color: #ffffff !important; }
.vivid-whatsapp-float__icon { display: flex; align-items: center; justify-content: center; }
.vivid-whatsapp-float__icon svg { width: 30px; height: 30px; color: #ffffff; }
.vivid-whatsapp-float__ping { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #25D366; animation: vividWpFloatPulse 2.4s cubic-bezier(0.24, 0, 0.38, 1) infinite; pointer-events: none; }
@keyframes vividWpFloatPulse {
0% { transform: scale(0.95); opacity: 0.9; }
  60% { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
.vivid-whatsapp-float__tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--color-corporate);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-fast), transform var(--duration-fast), visibility var(--duration-fast);
  box-shadow: 0 6px 18px rgba(17, 24, 122, 0.25);
}
.vivid-whatsapp-float__tooltip::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent var(--color-corporate);
}
.vivid-whatsapp-float:hover .vivid-whatsapp-float__tooltip { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }

/* ==========================================================================
   FLOATING PHONE CALL BUTTON (SITEWIDE - LEFT)
   ========================================================================== */

.vivid-phone-float {
  position: fixed;
  bottom: 28px;
  left: 28px;
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #E53E3E;
  background: linear-gradient(135deg, #FF3B30 0%, #D32F2F 100%);
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(229, 62, 62, 0.45);
  text-decoration: none;
  transition: transform var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal);
}
.vivid-phone-float:hover { transform: scale(1.08) translateY(-3px); box-shadow: 0 12px 32px rgba(229, 62, 62, 0.65); color: #ffffff !important; }
.vivid-phone-float__icon { display: flex; align-items: center; justify-content: center; }
.vivid-phone-float__icon svg { width: 26px; height: 26px; stroke: #ffffff; }
.vivid-phone-float__ping { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #FF3B30; animation: vividPhoneFloatPulse 2.4s cubic-bezier(0.24, 0, 0.38, 1) infinite; pointer-events: none; }
@keyframes vividPhoneFloatPulse {
0% { transform: scale(0.95); opacity: 0.9; }
  60% { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
.vivid-phone-float__tooltip {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: var(--color-corporate);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-fast), transform var(--duration-fast), visibility var(--duration-fast);
  box-shadow: 0 6px 18px rgba(17, 24, 122, 0.25);
}
.vivid-phone-float__tooltip::after {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent var(--color-corporate) transparent transparent;
}
.vivid-phone-float:hover .vivid-phone-float__tooltip { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

@media (max-width: 782px) {
  .admin-bar .page-header, .admin-bar .page-hero { padding-top: calc(136px + clamp(2.5rem, 5vw, 4.5rem)); }
}

@media (max-width: 768px) {
  .vivid-whatsapp-float { bottom: 20px; right: 20px; width: 52px; height: 52px; }
  .vivid-whatsapp-float__icon svg { width: 26px; height: 26px; }
  .vivid-whatsapp-float__tooltip { display: none; }
  .vivid-phone-float { bottom: 20px; left: 20px; width: 52px; height: 52px; }
  .vivid-phone-float__icon svg { width: 23px; height: 23px; }
  .vivid-phone-float__tooltip { display: none; }

  /* Mobile Footer Centering */
  .site-footer { text-align: center; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-7); text-align: center; }
  .footer-brand { align-items: center; text-align: center; }
  .footer-logo-wrapper { display: flex; justify-content: center; width: 100%; }
  .site-footer .site-logo { margin-inline: auto; }
  .footer-tagline { margin-inline: auto; text-align: center; max-width: 42ch; }
  .footer-contact-list { align-items: center; justify-content: center; width: 100%; }
  .footer-contact-link { justify-content: center; }
  .footer-social-list { justify-content: center; width: 100%; }
  .footer-col { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
  .footer-col-title { text-align: center; display: inline-block; }
  .footer-col-title::after { left: 50%; transform: translateX(-50%); }
  .footer-nav-list { align-items: center; justify-content: center; width: 100%; }
  .footer-nav-link { justify-content: center; }
  .footer-col--cta { align-items: center; width: 100%; }
  .footer-cta-card { text-align: center; align-items: center; max-width: 440px; margin-inline: auto; width: 100%; }
  .footer-hours { justify-content: center; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); }
  .footer-copyright { text-align: center; }
  .footer-legal-links { justify-content: center; gap: var(--space-4); width: 100%; }
}

@media (max-width: 767px) {
  .section-header--split { flex-direction: column; align-items: flex-start; }
}

@media print {
  .site-header, .site-footer, .mobile-nav, .hamburger, .vivid-whatsapp-float { display: none; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   HOMEPAGE SECTION 1: HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(90px + clamp(1.75rem, 3.5vw, 3rem));
  padding-bottom: var(--space-9);
  background-color: var(--color-bg-light);
  /* #F5F7FA */ background-image: radial-gradient(circle at 85% 20%, rgba(22, 121, 213, 0.12) 0%, transparent 45%), radial-gradient(circle at 15% 80%, rgba(11, 91, 196, 0.08) 0%, transparent 40%), linear-gradient(180deg, #FFFFFF 0%, var(--color-bg-light) 100%);
  overflow: hidden;
}
.admin-bar .hero {
  padding-top: calc(122px + clamp(1.75rem, 3.5vw, 3rem));
}
.hero::after {
  content: '';
  position: absolute;
  top: 15%;
  right: 8%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(11, 91, 196, 0.1) 0%, rgba(22, 121, 213, 0.06) 40%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: heroOrbFloat 8s ease-in-out infinite;
  z-index: 0;
}
@keyframes heroOrbFloat {
0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-20px, 15px) scale(1.05); }
  66% { transform: translate(10px, -10px) scale(0.97); }
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(166, 166, 166, 0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(166, 166, 166, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 0%, transparent 75%);
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-lg);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
}
.hero__content { display: flex; flex-direction: column; align-items: flex-start; }
.hero__overline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.9rem;
  background-color: rgba(11, 91, 196, 0.08);
  border: 1px solid rgba(11, 91, 196, 0.22);
  border-radius: 9999px;
  color: var(--color-blue-main);
  /* #0B5BC4 */ font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.hero__overline::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background-color: var(--color-blue-light); /* #1679D5 */ box-shadow: 0 0 8px var(--color-blue-light); }
.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--color-corporate);
  /* #11187A - Koyu Lacivert */ margin-bottom: var(--space-4);
}
.hero__headline-accent {
  font-style: normal;
  display: inline-block;
  background: linear-gradient(135deg, var(--color-blue-main) 0%, var(--color-blue-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
.hero__description { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--color-gray-dark); /* #333333 - Koyu gri metin */ max-width: 52ch; margin-bottom: var(--space-7); }
.hero__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.hero__visual { position: relative; width: 100%; height: 460px; display: flex; align-items: center; justify-content: center; }
.hero__visual-block { position: absolute; border-radius: 20px; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); animation: heroCardFloat 6s ease-in-out infinite; }
.hero__visual-block--2 { animation-delay: -3s; }
@keyframes heroCardFloat {
0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.hero__visual-block--1 {
  width: 86%;
  height: 350px;
  right: 0;
  top: 20px;
  background: linear-gradient(145deg, var(--color-corporate) 0%, var(--color-blue-secondary) 55%, var(--color-blue-main) 100%);
  box-shadow: 0 30px 60px rgba(17, 24, 122, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-6);
  color: var(--color-white);
  overflow: hidden;
}
.hero__visual-block--1::after {
  content: '';
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(22, 121, 213, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(20px);
}
.hero__visual-block--2 {
  width: 84%;
  min-height: 290px;
  height: auto;
  left: 0;
  bottom: 10px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(166, 166, 166, 0.35);
  /* #A6A6A6 */ box-shadow: 0 20px 45px rgba(11, 91, 196, 0.12);
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
}
.hero__card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.hero__card-badge {
  font-size: var(--fs-overline);
  font-weight: 700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.16);
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.hero__card-code { font-family: var(--font-mono, monospace); font-size: var(--fs-overline); letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.7); }
.hero__card-middle { margin-block: var(--space-2); }
.hero__card-metric { font-family: var(--font-display); font-size: clamp(2.25rem, 4.5vw, 3.25rem); font-weight: 800; line-height: 1; color: var(--color-white); letter-spacing: -0.03em; }
.hero__card-metric sup { font-size: 1.5rem; color: var(--color-blue-light); /* #1679D5 */; }
.hero__card-title { font-size: var(--fs-body-sm); color: rgba(255, 255, 255, 0.85); font-weight: 500; margin-top: 4px; }
.hero__card-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid rgba(255, 255, 255, 0.15); }
.hero__card-bars { display: flex; align-items: flex-end; gap: 5px; height: 36px; }
.hero__card-bars span { width: 6px; background: linear-gradient(to top, var(--color-blue-secondary), var(--color-blue-light)); border-radius: 3px; transition: height 0.3s ease; }
.hero__card-bar-label { font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.7); }
.hero__card-subheading { font-size: 0.725rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-corporate); /* #11187A */; }
.hero__card-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-block: 0.25rem; }
.hero__pill {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  background-color: var(--color-bg-light);
  /* #F5F7FA */ color: var(--color-blue-main);
  /* #0B5BC4 */ border: 1px solid rgba(11, 91, 196, 0.18);
  line-height: 1.3;
}
.hero__card-quote {
  font-size: 0.75rem;
  color: var(--color-gray-dark);
  /* #333333 */ line-height: 1.35;
  font-style: italic;
  border-left: 2px solid var(--color-blue-main);
  padding-left: var(--space-3);
  padding-right: 2rem;
  margin: 0;
}
.hero__visual-stat {
  position: absolute;
  right: -15px;
  bottom: 10px;
  z-index: 3;
  background: var(--color-white);
  /* #FFFFFF */ border: 1px solid rgba(166, 166, 166, 0.35);
  /* #A6A6A6 */ box-shadow: 0 16px 36px rgba(17, 24, 122, 0.15);
  border-radius: 14px;
  padding: 1rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}
.hero__stat-number {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--color-blue-main) 0%, var(--color-blue-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__stat-label { font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-gray-dark); /* #333333 */; }
.hero__scroll {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-gray-metallic);
  /* #A6A6A6 */ font-size: var(--fs-overline);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  z-index: 1;
}
.hero__scroll-line { width: 1.5px; height: 28px; background: linear-gradient(to bottom, var(--color-blue-main), transparent); animation: heroScrollAnim 2s infinite ease-in-out; }
@keyframes heroScrollAnim {
0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.1% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ==========================================================================
   HERO TRUST & METRICS STRIP (Minimal, High-Authority Proof)
   ========================================================================== */

.hero__trust-strip {
  display: inline-flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  padding: 0.85rem 1.4rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(17, 24, 122, 0.1);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(17, 24, 122, 0.05);
  width: auto;
  max-width: 100%;
}

.hero__trust-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.hero__trust-val {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-corporate);
}

.hero__trust-val sup {
  font-size: 0.85rem;
  color: var(--color-blue-main);
  font-weight: 700;
}

.hero__trust-val small {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-blue-main);
  margin-left: 2px;
}

.hero__trust-lbl {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-gray-dark);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.hero__trust-sep {
  width: 1px;
  height: 28px;
  background-color: rgba(17, 24, 122, 0.12);
}

/* ==========================================================================
   HOMEPAGE SECTION 2: SELECTED WORK & CARDS
   ========================================================================== */

.selected-work { background-color: var(--color-white); /* #FFFFFF */ position: relative; }
.selected-work__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6); }
.selected-work__grid .project-card--large { grid-column: span 6; }
.selected-work__grid .project-card--small { grid-column: span 6; }
.card { position: relative; display: flex; flex-direction: column; }
.project-card {
  display: block;
  text-decoration: none;
  background-color: var(--color-bg-light);
  /* #F5F7FA */ border: 1px solid rgba(166, 166, 166, 0.3);
  /* #A6A6A6 */ border-radius: 14px;
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default), border-color var(--duration-normal) var(--ease-default);
}
.project-card:hover { transform: translateY(-5px); border-color: var(--color-blue-main); /* #0B5BC4 */ box-shadow: 0 20px 40px rgba(17, 24, 122, 0.10); }
.project-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.project-card__image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  display: flex;
  background: radial-gradient(circle at 20% 15%, rgba(22, 121, 213, 0.22) 0%, transparent 55%), radial-gradient(circle at 85% 90%, rgba(17, 24, 122, 0.20) 0%, transparent 55%), linear-gradient(135deg, #eaf1fb 0%, #dfe8f8 100%);
}
.project-card__frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: clamp(0.9rem, 4%, 1.5rem) clamp(0.9rem, 5%, 1.75rem) 0;
  background: #ffffff;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  box-shadow: 0 18px 40px -12px rgba(17, 24, 122, 0.35), 0 0 0 1px rgba(17, 24, 122, 0.08);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card:hover .project-card__frame { transform: translateY(-4px); }
.project-card__frame-bar { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; height: 20px; padding: 0 10px; background: #f1f3f9; border-bottom: 1px solid rgba(17, 24, 122, 0.08); }
.project-card__frame-bar span { width: 7px; height: 7px; border-radius: 50%; background: #ff5f56; }
.project-card__frame-bar span:nth-child(2) { background: #ffbd2e; }
.project-card__frame-bar span:nth-child(3) { background: #27c93f; }
.project-card__frame { position: relative; }
.project-card__media-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(17, 24, 122, 0.85);
  color: #ffffff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.project-card__media-badge--video { background: rgba(220, 38, 38, 0.9); color: #ffffff; }
.project-card__media-badge--ads { background: rgba(11, 91, 196, 0.9); color: #ffffff; }
.project-card__media-badge--social { background: linear-gradient(135deg, rgba(131, 58, 180, 0.9), rgba(253, 29, 29, 0.9)); color: #ffffff; }
.project-card__media-badge--graphic { background: linear-gradient(135deg, rgba(11, 91, 196, 0.95), rgba(124, 58, 237, 0.95)); color: #ffffff; }
.project-card__media-badge--content { background: linear-gradient(135deg, rgba(13, 148, 136, 0.95), rgba(16, 185, 129, 0.95)); color: #ffffff; }
.project-card__play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 20, 66, 0.25);
  transition: all var(--duration-fast);
  z-index: 2;
  pointer-events: none;
}
.project-card__play-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-corporate);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
  transition: transform var(--duration-fast), background var(--duration-fast);
}
.project-card:hover .project-card__play-btn { transform: scale(1.15); background: #ffffff; color: var(--color-blue-main); }
.project-card__image { display: block; width: 100%; height: auto; flex: 1 1 auto; min-height: 0; object-fit: cover; object-position: top center; }
.project-card__placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #11187A 0%, #0B5BC4 100%); display: flex; align-items: center; justify-content: center; position: relative; min-height: 220px; }
.project-card__placeholder::before { content: 'VIVID'; font-family: var(--font-display); font-size: 2.25rem; font-weight: 800; letter-spacing: 0.15em; color: rgba(255, 255, 255, 0.25); }
.project-card__body { padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); flex-grow: 1; }
.project-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.project-card__category { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--color-blue-main); /* #0B5BC4 */; }
.project-card__year { font-size: var(--fs-caption); color: var(--color-gray-metallic); /* #A6A6A6 */ font-weight: 500; }
.project-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: var(--color-corporate);
  /* #11187A */ line-height: var(--lh-snug);
  transition: color var(--duration-fast);
}
.project-card:hover .project-card__title { color: var(--color-blue-main); /* #0B5BC4 */; }
.project-card__client { font-size: var(--fs-body-sm); color: var(--color-gray-dark); /* #333333 */ margin-top: 2px; }
.project-card__excerpt {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.55;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--color-blue-main);
  /* #0B5BC4 */ margin-top: var(--space-3);
  transition: transform var(--duration-fast);
}
.project-card:hover .project-card__cta { transform: translateX(4px); color: var(--color-blue-light); /* #1679D5 */; }

/* ==========================================================================
   HOMEPAGE SECTION 3: SERVICES OVERVIEW
   ========================================================================== */

.services-overview,
section.services-overview,
.services-overview.section {
  background-color: var(--color-bg-light); /* #F5F7FA */
  position: relative;
  padding-bottom: clamp(1rem, 2vw, 1.75rem) !important;
  padding-block-end: clamp(1rem, 2vw, 1.75rem) !important;
  margin-bottom: 0 !important;
}
.services-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: 0 !important; }
.services-list__item { width: 100%; display: flex; opacity: 1 !important; visibility: visible !important; }
.service-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  background-color: var(--color-white);
  border: 1px solid rgba(166, 166, 166, 0.22);
  border-radius: 16px;
  padding: clamp(1.4rem, 2.5vw, 1.85rem);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(17, 24, 122, 0.04);
  transition: transform var(--duration-normal) var(--ease-default), border-color var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default);
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-blue-main), var(--color-blue-secondary));
  opacity: 0;
  transition: opacity var(--duration-fast);
}
.service-card:hover::before { opacity: 1; }
.service-card:hover { transform: translateY(-4px); border-color: rgba(11, 91, 196, 0.4); box-shadow: 0 16px 36px rgba(17, 24, 122, 0.1), 0 0 0 1px rgba(11, 91, 196, 0.15); }
.service-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.service-card__meta-bar { display: flex; align-items: center; gap: 0.65rem; }
.service-card__num {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--color-blue-main);
  background: rgba(11, 91, 196, 0.08);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  letter-spacing: 0.05em;
  line-height: 1;
}
.service-card__category { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.service-card__arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg-light);
  color: var(--color-corporate);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid rgba(166, 166, 166, 0.2);
  transition: all var(--duration-fast);
}
.service-card:hover .service-card__arrow { background: var(--color-blue-main); color: #ffffff; border-color: var(--color-blue-main); transform: translate(3px, -3px); }
.service-card__body { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--space-4); flex-grow: 1; }
.service-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
  font-weight: 800;
  color: var(--color-corporate);
  letter-spacing: -0.015em;
  line-height: 1.3;
  transition: color var(--duration-fast);
}
.service-card:hover .service-card__title { color: var(--color-blue-main); }
.service-card__description { font-size: 0.9125rem; color: var(--color-gray-dark); line-height: 1.55; margin: 0; }
.service-card__tags { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; padding-top: var(--space-3); border-top: 1px solid rgba(166, 166, 166, 0.14); }
.service-card__tag { font-size: 0.75rem; font-weight: 600; color: var(--color-corporate); background: rgba(17, 24, 122, 0.05); padding: 0.2rem 0.6rem; border-radius: 9999px; transition: all var(--duration-fast); }
.service-card:hover .service-card__tag { background: rgba(11, 91, 196, 0.08); color: var(--color-blue-main); }

/* ==========================================================================
   HOMEPAGE SECTION 4: APPROACH
   ========================================================================== */

.approach,
section.approach,
.approach.section,
.approach.section--dark {
  background: linear-gradient(135deg, #11187A 0%, #0d1358 100%);
  /* #11187A - Koyu Lacivert */ position: relative;
  overflow: hidden;
  color: var(--color-white);
  padding-top: clamp(1.25rem, 2.2vw, 2rem) !important;
  padding-block-start: clamp(1.25rem, 2.2vw, 2rem) !important;
  margin-top: 0 !important;
}
.approach .section-header {
  margin-bottom: clamp(1rem, 1.8vw, 1.5rem) !important;
}
.approach.section--dark::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(22, 121, 213, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.approach.section--dark .section-label { color: var(--color-blue-light); /* #1679D5 - Parlak Mavi */; }
.approach.section--dark .section-title { color: var(--color-white); /* #FFFFFF - Beyaz */; }
.approach-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); position: relative; z-index: 1; }
.approach-step {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(166, 166, 166, 0.22);
  /* #A6A6A6 */ border-top: 3px solid var(--color-blue-secondary);
  /* #2545B8 */ border-radius: 10px;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-default), border-top-color var(--duration-normal) var(--ease-default), background var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default);
}
.approach-step::after {
  content: '';
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 121, 213, 0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-default);
  pointer-events: none;
}
.approach-step:hover::after { opacity: 1; }
.approach-step:hover { transform: translateY(-4px); border-top-color: var(--color-blue-light); /* #1679D5 */ background: rgba(255, 255, 255, 0.08); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); }
.approach-step__number { font-family: var(--font-display); font-size: 2.25rem; font-weight: 800; line-height: 1; color: var(--color-blue-light); /* #1679D5 */ margin-bottom: var(--space-4); letter-spacing: -0.02em; }
.approach-step__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; color: var(--color-white); /* #FFFFFF */ margin-bottom: var(--space-2); }
.approach-step__description { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: rgba(255, 255, 255, 0.80); }

/* ==========================================================================
   HOMEPAGE SECTION 5: INSIGHTS & POST CARDS
   ========================================================================== */

.insights { background-color: var(--color-white); /* #FFFFFF */ position: relative; }
.insights-grid, .blog-archive__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.post-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-light);
  /* #F5F7FA */ border: 1px solid rgba(166, 166, 166, 0.28);
  /* #A6A6A6 */ border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--duration-normal) var(--ease-default), border-color var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default);
}
.post-card:hover { transform: translateY(-4px); border-color: var(--color-blue-main); /* #0B5BC4 */ box-shadow: 0 16px 36px rgba(17, 24, 122, 0.08); }
.post-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.post-card__image-wrap { aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, var(--color-corporate) 0%, var(--color-blue-main) 100%); position: relative; }
.post-card__image-wrap img, .post-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-default); }
.post-card:hover .post-card__image-wrap img, .post-card:hover .post-card__image img { transform: scale(1.05); }
.post-card__placeholder { width: 100%; height: 100%; min-height: 180px; background: linear-gradient(135deg, #11187A 0%, #0B5BC4 100%); display: flex; align-items: center; justify-content: center; }
.post-card__placeholder::before { content: 'BLOG'; font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: 0.15em; color: rgba(255, 255, 255, 0.25); }
.post-card__body { padding: var(--space-5); display: flex; flex-direction: column; flex-grow: 1; gap: var(--space-2); }
.post-card__category { font-size: var(--fs-label); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--color-blue-main); /* #0B5BC4 */ font-weight: 700; }
.post-card__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; color: var(--color-corporate); /* #11187A */ line-height: var(--lh-snug); transition: color var(--duration-fast); }
.post-card:hover .post-card__title { color: var(--color-blue-main); /* #0B5BC4 */; }
.post-card__excerpt { font-size: var(--fs-body-sm); color: var(--color-gray-dark); /* #333333 */ line-height: var(--lh-normal); margin-top: 2px; }
.post-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(166, 166, 166, 0.22);
  /* #A6A6A6 */ padding-top: var(--space-3);
  margin-top: auto;
  font-size: var(--fs-caption);
  color: var(--color-gray-metallic);
  /* #A6A6A6 */;
}

/* ==========================================================================
   HOMEPAGE SECTION 6: CONTACT CTA
   ========================================================================== */

/* ==========================================================================
   HOMEPAGE SECTION 6: CONTACT CTA (Floating Modern Studio Card)
   ========================================================================== */

.contact-cta { background: var(--color-bg-light); padding: clamp(3.5rem, 6vw, 5.5rem) 0; position: relative; }
.contact-cta__card {
  background: linear-gradient(135deg, #090e2f 0%, #0d1442 35%, #11187A 70%, #0B5BC4 100%);
  border-radius: clamp(22px, 3.5vw, 32px);
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.75rem, 5vw, 4.25rem);
  box-shadow: 0 35px 85px -15px rgba(17, 24, 122, 0.28), 0 15px 35px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  position: relative;
  overflow: hidden;
}
.contact-cta__glow--1 { position: absolute; top: -40%; right: 15%; width: 550px; height: 550px; background: radial-gradient(circle, rgba(22, 121, 213, 0.38) 0%, transparent 65%); pointer-events: none; }
.contact-cta__glow--2 { position: absolute; bottom: -45%; left: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(11, 91, 196, 0.3) 0%, transparent 70%); pointer-events: none; }
.contact-cta__pattern { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1.5px, transparent 1.5px); background-size: 24px 24px; pointer-events: none; opacity: 0.7; }
.contact-cta__grid { display: grid; grid-template-columns: 1.35fr 1fr; align-items: center; gap: clamp(2.5rem, 5vw, 5rem); position: relative; z-index: 1; }
.contact-cta__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.95rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 9999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: var(--space-4);
}
.contact-cta__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #27c93f; box-shadow: 0 0 0 3px rgba(39, 201, 63, 0.25); display: inline-block; animation: ctaDotPulse 2s ease-in-out infinite; }
@keyframes ctaDotPulse {
0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
}
.contact-cta__badge-text { font-size: var(--fs-label); font-weight: 800; text-transform: uppercase; letter-spacing: var(--ls-widest); color: #ffffff; }
.contact-cta__title { color: var(--color-white); font-family: var(--font-display); font-size: clamp(2rem, 3.8vw, 3.25rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; margin-bottom: var(--space-4); }
.contact-cta__lead { font-size: clamp(1.0625rem, 1.25vw, 1.2rem); line-height: 1.7; color: rgba(255, 255, 255, 0.88); margin-bottom: var(--space-6); max-width: 58ch; }
.contact-cta__pillars { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; }
.contact-cta__pillar-item { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.875rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.contact-cta__pillar-icon { color: #27c93f; flex-shrink: 0; }
.contact-cta__action-panel { display: flex; justify-content: flex-end; }
.contact-cta__action-box {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: 420px;
}
.contact-cta__box-label { font-size: var(--fs-label); font-weight: 800; text-transform: uppercase; letter-spacing: var(--ls-widest); color: rgba(255, 255, 255, 0.75); }
.contact-cta__btn-primary {
  background: #ffffff !important;
  color: var(--color-corporate) !important;
  /* #11187A */ border: 2px solid #ffffff !important;
  font-weight: 800;
  font-size: 1rem;
  padding: 0.95rem 1.75rem;
  border-radius: 12px;
  box-shadow: 0 10px 25px -4px rgba(13, 20, 66, 0.4), 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all var(--duration-normal) var(--ease-default);
  width: 100%;
  justify-content: center;
}
.contact-cta__btn-primary .btn-arrow { color: var(--color-blue-main); font-weight: 800; margin-left: 0.45rem; display: inline-block; transition: transform var(--duration-fast); }
.contact-cta__btn-primary:hover {
  background: #f0f7ff !important;
  color: var(--color-blue-main) !important;
  border-color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -4px rgba(13, 20, 66, 0.5), 0 0 25px rgba(255, 255, 255, 0.45);
}
.contact-cta__btn-primary:hover .btn-arrow { transform: translateX(4px); color: var(--color-blue-secondary); }
.contact-cta__btn-primary:active { transform: translateY(-1px); box-shadow: 0 6px 16px -2px rgba(13, 20, 66, 0.3); }
.contact-cta__btn-whatsapp {
  background: rgba(37, 211, 102, 0.15) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(37, 211, 102, 0.5) !important;
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.85rem 1.5rem;
  border-radius: 12px;
  transition: all var(--duration-normal) var(--ease-default);
  width: 100%;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.contact-cta__btn-whatsapp svg { color: #25D366; flex-shrink: 0; transition: transform var(--duration-fast); }
.contact-cta__btn-whatsapp:hover { background: #25D366 !important; border-color: #25D366 !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 10px 25px -4px rgba(37, 211, 102, 0.4); }
.contact-cta__btn-whatsapp:hover svg { color: #ffffff; transform: scale(1.1); }
.contact-cta__direct-call { display: flex; flex-direction: column; gap: 0.25rem; padding-top: var(--space-2); border-top: 1px solid rgba(255, 255, 255, 0.12); text-align: center; }
.contact-cta__call-note { font-size: 0.75rem; color: rgba(255, 255, 255, 0.65); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.contact-cta__call-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--duration-fast);
}
.contact-cta__call-link svg { color: rgba(255, 255, 255, 0.8); transition: transform var(--duration-fast), color var(--duration-fast); }
.contact-cta__call-link:hover { color: #f0f7ff; }
.contact-cta__call-link:hover svg { transform: scale(1.15) rotate(-10deg); color: var(--color-blue-light); }
.testimonial-card { padding: var(--space-6); border: var(--border-thin) var(--color-light); }
.testimonial-card__quote { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--text-primary); font-style: italic; margin-bottom: var(--space-5); }
.testimonial-card__quote::before { content: '\201C'; }
.testimonial-card__quote::after { content: '\201D'; }
.testimonial-card__author { display: flex; align-items: center; gap: var(--space-3); }
.testimonial-card__avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background-color: var(--color-light); }
.testimonial-card__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   HOMEPAGE & GLOBAL RESPONSIVE FINE-TUNING (< 991px, < 768px, < 575px, < 380px)
   ========================================================================== */

@media (max-width: 991px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-7); }
  .hero__visual { height: 480px; max-width: 540px; margin-top: var(--space-5); width: 100%; margin-inline: auto; position: relative; display: block; }
  .approach-steps { grid-template-columns: repeat(2, 1fr); }
  .hero { min-height: auto; padding-top: calc(75px + 2rem); padding-bottom: var(--space-8); }
  .hero__content { align-items: flex-start; max-width: 680px; margin-inline: auto; text-align: left; }
  .hero__visual-block--1 { width: 82%; height: 310px; top: 0; right: 0; padding: var(--space-5); border-radius: 20px; box-shadow: 0 24px 50px rgba(17, 24, 122, 0.25); }
  .hero__visual-block--2 { width: 84%; min-height: 270px; height: auto; bottom: 12px; left: 0; padding: 1.2rem 1.35rem; border-radius: 18px; z-index: 2; box-shadow: 0 20px 45px rgba(11, 91, 196, 0.16); }
  .hero__visual-stat { right: -10px; bottom: 18px; z-index: 3; padding: 0.85rem 1.25rem; }
}

@media (max-width: 991px) and (min-width: 641px) {
  .insights-grid, .blog-archive__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .contact-cta__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .contact-cta__action-panel { justify-content: stretch; }
  .contact-cta__action-box { max-width: 100%; }
}

@media (max-width: 899px) {
  .selected-work__grid .project-card--large, .selected-work__grid .project-card--small { grid-column: span 12; }
}

@media (max-width: 820px) {
  .services-list { grid-template-columns: 1fr; gap: var(--space-3); }
}

@media (max-width: 767px) {
  .hero { padding-top: calc(72px + 1.25rem); padding-bottom: var(--space-6); min-height: auto; }
  .hero__inner { grid-template-columns: 1fr; gap: 0; width: 100%; padding-inline: 1.25rem; }
  .hero__content { width: 100%; max-width: 100%; align-items: flex-start; text-align: left; }
  .hero__overline {
    font-size: 0.72rem;
    padding: 0.35rem 0.85rem;
    margin-bottom: 1rem;
    display: inline-flex;
  }
  .hero__headline {
    font-size: clamp(2.1rem, 7.5vw, 2.9rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
    margin-bottom: 0.9rem;
    text-shadow: 0 2px 16px rgba(17, 24, 122, 0.06);
  }
  .hero__headline-accent {
    background: linear-gradient(135deg, var(--color-blue-main) 0%, var(--color-blue-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .hero__description {
    font-size: 1rem;
    line-height: 1.55;
    color: #333333;
    margin-bottom: 1.5rem;
    max-width: 100%;
  }
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.75rem;
  }
  .hero__actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding-block: 0.9rem;
    font-size: 0.96rem;
    font-weight: 600;
    border-radius: 12px;
  }
  .hero__actions .btn--primary {
    box-shadow: 0 8px 24px rgba(11, 91, 196, 0.28);
  }
  .hero__actions .btn--secondary {
    background: #FFFFFF;
    border: 1.5px solid rgba(17, 24, 122, 0.15);
    color: var(--color-corporate);
  }
  .hero__trust-strip {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0.85rem 1rem;
    margin-top: 1.5rem;
    gap: 0.5rem;
    background: #FFFFFF;
    border: 1px solid rgba(17, 24, 122, 0.1);
    box-shadow: 0 8px 24px rgba(17, 24, 122, 0.05);
    border-radius: 14px;
    box-sizing: border-box;
  }
  .hero__trust-item {
    align-items: center;
    text-align: center;
    flex: 1;
  }
  .hero__trust-val {
    font-size: 1.3rem;
  }
  .hero__trust-lbl {
    font-size: 0.65rem;
    white-space: normal;
    line-height: 1.25;
    margin-top: 2px;
  }
  .hero__trust-sep {
    height: 24px;
  }
  .hero__visual { display: none !important; }
  .hero__scroll { display: none !important; }
  .section { padding-block: clamp(3rem, 7vw, 4.5rem); }
  .section-header--split { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .section-title { font-size: clamp(1.85rem, 5.5vw, 2.75rem); }
  .services-list { grid-template-columns: 1fr; gap: var(--space-3); }
  .services-overview, section.services-overview, .services-overview.section {
    padding-bottom: 0.5rem !important;
    padding-block-end: 0.5rem !important;
  }
  .approach, section.approach, .approach.section, .approach.section--dark {
    padding-top: 1rem !important;
    padding-block-start: 1rem !important;
  }
  .approach .section-header { margin-bottom: 1rem !important; }
}

@media (max-width: 640px) {
  .insights-grid, .blog-archive__grid { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
  .approach-steps { grid-template-columns: 1fr; }
  .services-overview, section.services-overview, .services-overview.section {
    padding-bottom: 0.25rem !important;
    padding-block-end: 0.25rem !important;
  }
  .approach, section.approach, .approach.section, .approach.section--dark {
    padding-top: 0.75rem !important;
    padding-block-start: 0.75rem !important;
  }
  .approach .section-header { margin-bottom: 0.75rem !important; }
  .hero { padding-top: calc(68px + 1rem); padding-bottom: var(--space-6); }
  .hero__actions, .abt-hero__actions { flex-direction: column; align-items: stretch; width: 100%; gap: var(--space-3); }
  .hero__actions .btn, .abt-hero__actions .btn { width: 100%; justify-content: center; text-align: center; padding-block: 0.875rem; font-size: 0.95rem; border-radius: 12px; }
  .hero__actions .btn--primary { box-shadow: 0 8px 22px rgba(11, 91, 196, 0.28); }
  .hero__visual { display: none !important; }
  .hero__scroll { display: none !important; }
  .project-card__frame { margin: 0.75rem 0.75rem 0; border-radius: 8px 8px 0 0; }
  .project-card__title { font-size: 1.2rem; line-height: 1.3; }
  .service-card { padding: 1.15rem 1.15rem; border-radius: 14px; }
  .service-card__num { font-size: 1.1rem; }
  .service-card__category { font-size: 0.68rem; padding: 0.18rem 0.5rem; }
  .service-card__title { font-size: 1.18rem; }
  .service-card__description { font-size: 0.875rem; line-height: 1.55; }
  .service-card__tags { gap: 0.28rem; margin-top: 0.6rem; }
  .service-card__tag { font-size: 0.68rem; padding: 0.15rem 0.45rem; }
  .approach-step { padding: 1.25rem 1.1rem; border-radius: 12px; }
  .approach-step__title { font-size: 1.1rem; }
  .contact-cta { padding-block: clamp(2rem, 5vw, 3.5rem); }
  .contact-cta__card { padding: 1.5rem 1.15rem; border-radius: 18px; }
  .contact-cta__title { font-size: 1.55rem; line-height: 1.2; margin-bottom: var(--space-3); }
  .contact-cta__lead { font-size: 0.925rem; line-height: 1.55; margin-bottom: var(--space-4); }
  .contact-cta__pillars { gap: 0.4rem 0.85rem; }
  .contact-cta__pillar-item { font-size: 0.8rem; }
  .contact-cta__action-box { padding: 1.25rem 1rem; border-radius: 16px; gap: var(--space-3); }
  .contact-cta__btn-primary, .contact-cta__btn-whatsapp { padding: 0.85rem 1.25rem; font-size: 0.925rem; }
  .contact-cta__call-link { font-size: 0.98rem; }
  .abt-hero__trust-strip, .cnt-hero__trust-strip { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .cnt-map-card iframe { height: 320px; }
}

@media (max-width: 480px) {
  .abt-hero__dashboard { padding: 1.25rem 1rem; border-radius: 14px; }
  .abt-hero__dash-main { margin-bottom: var(--space-3); }
  .abt-hero__stat-value { font-size: 2.15rem; }
  .abt-hero__stats-grid { gap: 0.75rem 0.5rem; }
  .abt-mission__quote p { font-size: 1.4rem; }
  .abt-mission__tags { gap: 0.4rem; }
  .abt-mission__tag { font-size: 0.75rem; padding: 0.3rem 0.75rem; }
  .cnt-card { padding: 0.85rem 1rem; gap: 0.75rem; }
  .cnt-card__val { font-size: 1rem; word-break: break-word; }
  .cnt-form-card { padding: 1.25rem 1rem; border-radius: 14px; }
}

@media (max-width: 380px) {
  .hero__headline { font-size: 1.95rem; }
  .hero__trust-strip { padding: 0.75rem 0.6rem; gap: 0.35rem; }
  .hero__trust-val { font-size: 1.15rem; }
  .hero__trust-lbl { font-size: 0.6rem; }
}

/* ==========================================================================
   SERVICE DETAIL PAGE — Editorial + Industrial + Corporate Palette
   ========================================================================== */

.srv-detail { background-color: var(--color-bg-light); color: var(--color-dark-gray); overflow-x: hidden; }

/* ---------- 1. Service Hero ---------- */
.srv-hero {
  padding-top: clamp(6.5rem, 12vw, 9.5rem);
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
  border-bottom: 1px solid rgba(166, 166, 166, 0.25);
  position: relative;
  background: radial-gradient(ellipse at 85% 10%, rgba(22, 121, 213, 0.08) 0%, transparent 60%), var(--color-bg-light);
}
.srv-hero__topbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid rgba(166, 166, 166, 0.25);
}
.srv-hero__eyebrow-wrap { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.srv-hero__eyebrow { font-size: 0.8125rem; letter-spacing: 0.12em; font-weight: 700; color: var(--color-primary-blue); text-transform: uppercase; }
.srv-hero__spec {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--color-primary-navy);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: var(--color-white);
  padding: 0.4rem 0.85rem;
  border-radius: 4px;
  border: 1px solid rgba(166, 166, 166, 0.35);
  box-shadow: 0 2px 8px rgba(17, 24, 122, 0.04);
}
.srv-hero__spec-dot { width: 7px; height: 7px; background-color: var(--color-primary-blue); border-radius: 50%; box-shadow: 0 0 10px rgba(11, 91, 196, 0.7); }
.srv-hero__grid { display: grid; grid-template-columns: 1fr minmax(280px, 340px); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.srv-hero__title { font-size: clamp(2.5rem, 5.5vw, 4.75rem); line-height: 1.06; letter-spacing: -0.035em; font-weight: 800; color: var(--color-primary-navy); margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.srv-hero__title-indent { display: inline-block; padding-left: clamp(1rem, 3vw, 3rem); }
.srv-hero__title-accent { font-style: normal; color: var(--color-primary-blue); font-weight: 800; }
.srv-hero__lead { font-size: clamp(1.125rem, 1.35vw, 1.3rem); line-height: 1.68; color: var(--color-dark-gray); max-width: 50ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.srv-hero__action-bar { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.srv-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1.1rem 2.25rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background-color: #0B5BC4 !important;
  color: #ffffff !important;
  border: 2px solid #0B5BC4 !important;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(11, 91, 196, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}
.srv-hero__cta:hover { background-color: #11187A !important; border-color: #11187A !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(17, 24, 122, 0.42); }
.srv-hero__action-note { font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--color-metallic-gray); font-weight: 600; text-transform: uppercase; }
.srv-tech-bracket { position: relative; border: 1px solid rgba(166, 166, 166, 0.35); border-radius: 8px; padding: 2.25rem 2rem; background-color: var(--color-white); box-shadow: 0 12px 36px rgba(17, 24, 122, 0.08); }
.srv-tech-bracket__corner { position: absolute; width: 10px; height: 10px; border: 2px solid var(--color-primary-blue); }
.srv-tech-bracket__corner--tl { top: -1px; left: -1px; border-right: none; border-bottom: none; border-top-left-radius: 4px; }
.srv-tech-bracket__corner--br { bottom: -1px; right: -1px; border-left: none; border-top: none; border-bottom-right-radius: 4px; }
.srv-tech-bracket__label {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--color-primary-navy);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed rgba(166, 166, 166, 0.4);
}
.srv-tech-bracket__list { list-style: none; margin: 0; padding: 0; font-size: 0.78125rem; line-height: 2.3; }
.srv-tech-bracket__list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.15rem 0; }
.srv-tech-bracket__list .key { color: var(--color-dark-gray); font-weight: 600; }
.srv-tech-bracket__list .val { font-weight: 700; color: var(--color-primary-navy); }

/* ---------- 2. Shared Split Grid (Positioning, Scope) ---------- */
.srv-section { padding: clamp(4rem, 8vw, 7rem) 0; border-bottom: 1px solid rgba(166, 166, 166, 0.2); }
.srv-grid-split { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.srv-grid-split--borderless { border-bottom: none; }
.srv-label { font-size: 0.75rem; letter-spacing: 0.14em; font-weight: 700; color: var(--color-primary-blue); text-transform: uppercase; margin-bottom: 1.25rem; }
.srv-label--inverse { color: var(--color-bright-blue); }
.srv-label--accent { color: var(--color-bright-blue); }
.srv-pos { background-color: var(--color-white); }
.srv-pos__lead { font-size: clamp(1.85rem, 3.2vw, 2.75rem); line-height: 1.2; letter-spacing: -0.025em; font-weight: 800; color: var(--color-primary-navy); margin-bottom: 1.75rem; max-width: 28ch; }
.srv-pos__body p { font-size: clamp(1.0625rem, 1.25vw, 1.25rem); line-height: 1.75; color: var(--color-dark-gray); max-width: 60ch; margin: 0; }

/* ---------- 3. Approach / 3 Ana Prensip ---------- */
.srv-pillars { background-color: var(--color-bg-light); }
.srv-pillars__list { border-top: 1px solid rgba(166, 166, 166, 0.25); }
.srv-pillar-row {
  display: grid;
  grid-template-columns: 80px minmax(240px, 320px) 1fr;
  gap: 2rem;
  align-items: baseline;
  padding: clamp(2rem, 4vw, 3.25rem) 0;
  border-bottom: 1px solid rgba(166, 166, 166, 0.2);
  transition: all 0.25s ease;
}
.srv-pillar-row:hover { border-bottom-color: var(--color-primary-blue); background-color: rgba(255, 255, 255, 0.6); }
.srv-pillar-row__num { font-size: 1.35rem; font-weight: 800; color: var(--color-primary-blue); }
.srv-pillar-row__title { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 800; letter-spacing: -0.02em; color: var(--color-primary-navy); margin: 0 0 0.4rem 0; }
.srv-pillar-row__tech { font-size: 0.6875rem; letter-spacing: 0.12em; font-weight: 600; color: var(--color-secondary-blue); text-transform: uppercase; }
.srv-pillar-row__desc { font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.7; color: var(--color-dark-gray); max-width: 52ch; margin: 0; }

/* ---------- 4. Service Scope (Kapsam — Corporate Navy) ---------- */
.srv-scope { background: linear-gradient(155deg, #11187A 0%, #0c1259 100%); color: var(--color-white); border-bottom: 1px solid rgba(255, 255, 255, 0.12); position: relative; }
.srv-scope::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.srv-scope__lead { font-size: clamp(1.4rem, 2.2vw, 1.95rem); line-height: 1.32; letter-spacing: -0.02em; font-weight: 800; color: var(--color-white); max-width: 24ch; }
.srv-scope__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem 1.75rem; }
.srv-scope__item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  padding: 1.1rem 1.25rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}
.srv-scope__item:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--color-bright-blue); transform: translateX(4px); }
.srv-scope__num { font-size: 0.8125rem; font-weight: 700; color: var(--color-bright-blue); transition: color 0.2s ease; }
.srv-scope__item:hover .srv-scope__num { color: var(--color-white); }
.srv-scope__text { font-size: clamp(0.95rem, 1.1vw, 1.0625rem); font-weight: 500; letter-spacing: -0.01em; color: var(--color-white); padding-right: 0.5rem; }
.srv-scope__marker { font-size: 1rem; color: var(--color-bright-blue); opacity: 0.4; transform: translateX(-4px); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.srv-scope__item:hover .srv-scope__marker { opacity: 1; transform: translateX(0); color: var(--color-white); }

/* ---------- 5. Process (Süreç — Çizgisel Timeline) ---------- */
.srv-process { background-color: var(--color-bg-light); }
.srv-process__header { margin-bottom: clamp(3rem, 5vw, 4.5rem); }
.srv-process__title { font-size: clamp(1.85rem, 3.5vw, 2.75rem); line-height: 1.15; letter-spacing: -0.025em; font-weight: 800; color: var(--color-primary-navy); }
.srv-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
.srv-timeline__item {
  background: var(--color-white);
  border-top: 3px solid var(--color-primary-navy);
  border-radius: 0 0 8px 8px;
  padding: 2rem 1.5rem;
  border-left: 1px solid rgba(166, 166, 166, 0.25);
  border-right: 1px solid rgba(166, 166, 166, 0.25);
  border-bottom: 1px solid rgba(166, 166, 166, 0.25);
  box-shadow: 0 6px 20px rgba(17, 24, 122, 0.05);
  position: relative;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.srv-timeline__item:hover { border-top-color: var(--color-primary-blue); transform: translateY(-4px); box-shadow: 0 12px 28px rgba(17, 24, 122, 0.12); }
.srv-timeline__meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--color-primary-blue); font-weight: 700; margin-bottom: 1.25rem; }
.srv-timeline__node { width: 8px; height: 8px; background-color: var(--color-primary-blue); border-radius: 50%; display: inline-block; box-shadow: 0 0 8px rgba(11, 91, 196, 0.6); }
.srv-timeline__title { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; color: var(--color-primary-navy); margin-bottom: 0.85rem; }
.srv-timeline__desc { font-size: 0.9375rem; line-height: 1.6; color: var(--color-dark-gray); margin: 0; }

/* ---------- 6. Measurement (Ölçüm — Corporate Navy Glassmorphic KPI Grid) ---------- */
.srv-meas { background: linear-gradient(180deg, #0d135e 0%, #11187A 100%); color: var(--color-white); border-bottom: 1px solid rgba(255, 255, 255, 0.12); position: relative; }
.srv-meas__hero { max-width: 72ch; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.srv-meas__title { font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.15; letter-spacing: -0.025em; font-weight: 800; color: var(--color-white); margin-bottom: 1.5rem; }
.srv-meas__body { font-size: clamp(1.0625rem, 1.25vw, 1.25rem); line-height: 1.7; color: rgba(255, 255, 255, 0.88); margin: 0; }
.srv-kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; background: transparent; border: none; }
.srv-kpi-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(166, 166, 166, 0.28);
  border-radius: 8px;
  padding: 1.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.srv-kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-secondary-blue); transition: background 0.25s ease; }
.srv-kpi-card:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--color-bright-blue); transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); }
.srv-kpi-card:hover::before { background: var(--color-bright-blue); }
.srv-kpi-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}
.srv-kpi-card__tag { font-size: 0.6875rem; letter-spacing: 0.08em; font-weight: 700; color: var(--color-metallic-gray); white-space: nowrap; }
.srv-kpi-card__status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.6875rem; letter-spacing: 0.08em; font-weight: 700; color: var(--color-bright-blue); white-space: nowrap; }
.srv-kpi-card__dot { width: 6px; height: 6px; background-color: var(--color-bright-blue); border-radius: 50%; display: inline-block; box-shadow: 0 0 6px rgba(22, 121, 213, 0.9); flex-shrink: 0; }
.srv-kpi-card__code { font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; color: var(--color-white); line-height: 1; margin: 0 0 0.5rem 0; }
.srv-kpi-card__name { font-size: 0.75rem; letter-spacing: 0.06em; font-weight: 700; color: var(--color-bright-blue); margin-bottom: 0.85rem; text-transform: uppercase; }
.srv-kpi-card__label { font-size: 0.875rem; line-height: 1.55; color: rgba(255, 255, 255, 0.76); margin: auto 0 0 0; }

/* ---------- 7. Related Projects Vitrine ---------- */
.srv-projects { background-color: var(--color-bg-light); }
.srv-projects__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }

/* ---------- 8. Final CTA (Editorial & Premium Ambient) ---------- */
.srv-final-cta {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 0%, #1679D5 0%, #11187A 50%, #090e38 100%);
  padding: clamp(5.5rem, 11vw, 8.5rem) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.srv-final-cta__ambient-glow {
  position: absolute;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(22, 121, 213, 0.45) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(50px);
}
.srv-final-cta__card { max-width: 820px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
.srv-final-cta__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.45rem 1.25rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9999px;
  color: #ffffff !important;
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem) auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.srv-final-cta__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 12px #38bdf8, 0 0 4px #ffffff; flex-shrink: 0; }
.srv-final-cta__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.75vw, 3.85rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: #ffffff !important;
  margin: 0 0 1.25rem 0;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}
.srv-final-cta__desc {
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88) !important;
  max-width: 52ch;
  margin: 0 auto clamp(2rem, 4vw, 3rem) auto;
  text-align: center;
  text-wrap: pretty;
}
.srv-final-cta__actions { display: flex; justify-content: center; align-items: center; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); width: 100%; }
.srv-final-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.2rem 2.85rem;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  background-color: #ffffff !important;
  color: #11187A !important;
  border: 2px solid #ffffff !important;
  border-radius: 8px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3), 0 0 24px rgba(255, 255, 255, 0.25);
  text-decoration: none;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.srv-final-cta__btn .btn-arrow { transition: transform 0.2s ease; font-size: 1.2rem; }
.srv-final-cta__btn:hover {
  background-color: #F5F7FA !important;
  color: #0B5BC4 !important;
  border-color: #F5F7FA !important;
  transform: translateY(-3px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.38), 0 0 32px rgba(255, 255, 255, 0.4);
}
.srv-final-cta__btn:hover .btn-arrow { transform: translateX(4px); }
.srv-final-cta__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
}
.srv-final-cta__trust-sep { opacity: 0.4; }

/* ---------- 9. Service Navigation ---------- */
.srv-nav { padding: 2.25rem 0; background-color: var(--color-white); border-bottom: 1px solid rgba(166, 166, 166, 0.25); }
.srv-nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; }
.srv-nav__link { display: inline-flex; flex-direction: column; gap: 0.35rem; text-decoration: none; color: inherit; transition: all 0.2s ease; }
.srv-nav__link:hover { color: var(--color-primary-blue); }
.srv-nav__dir { font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--color-metallic-gray); text-transform: uppercase; font-weight: 600; }
.srv-nav__title { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.01em; color: var(--color-primary-navy); }
.srv-nav__link:hover .srv-nav__title { color: var(--color-primary-blue); }
.srv-nav__all { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--color-primary-navy); font-weight: 700; text-decoration: none; transition: color 0.2s ease; }
.srv-nav__all:hover { color: var(--color-primary-blue); }

/* ---------- Responsive Breakpoints (1024px, 768px, 430px, 390px, 360px) ---------- */

/* ==========================================================================
   SERVICES ARCHIVE PAGE (/hizmetler/)
   ========================================================================== */

.page-header--services {
  padding-top: clamp(6.5rem, 12vw, 9.5rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
  background: radial-gradient(ellipse at 85% 10%, rgba(22, 121, 213, 0.08) 0%, transparent 60%), var(--color-bg-light);
  border-bottom: 1px solid rgba(166, 166, 166, 0.25);
}
.page-header--services .page-header__content { max-width: 68ch; }
.page-header--services .page-header__title { color: var(--color-primary-navy); font-weight: 800; margin: 0.75rem 0 1.25rem 0; }
.page-header--services .page-header__description { font-size: clamp(1.125rem, 1.3vw, 1.25rem); line-height: 1.65; color: var(--color-dark-gray); margin: 0; }
.services-archive { background-color: var(--color-bg-light); padding: clamp(3.5rem, 7vw, 6rem) 0; }
.services-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.service-card--archive {
  background-color: var(--color-white);
  border: 1px solid rgba(166, 166, 166, 0.28);
  border-top: 3px solid var(--color-primary-navy);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(17, 24, 122, 0.04);
}
.service-card--archive:hover { transform: translateY(-5px); border-top-color: var(--color-primary-blue); box-shadow: 0 14px 32px rgba(17, 24, 122, 0.1); }
.service-card--archive .service-card__link { display: flex; flex-direction: column; height: 100%; padding: 2.25rem 1.75rem; text-decoration: none; color: inherit; }
.service-card--archive .service-card__meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.service-card--archive .service-card__num { font-size: 1.125rem; font-weight: 800; color: var(--color-primary-blue); }
.service-card--archive .service-card__badge {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--color-secondary-blue);
  background: rgba(37, 69, 184, 0.08);
  padding: 0.3rem 0.65rem;
  border-radius: 4px;
}
.service-card--archive .service-card__title { font-size: 1.35rem; font-weight: 800; color: var(--color-primary-navy); margin-bottom: 0.75rem; letter-spacing: -0.015em; transition: color 0.2s ease; }
.service-card--archive:hover .service-card__title { color: var(--color-primary-blue); }
.service-card--archive .service-card__tagline { font-size: 0.95rem; font-weight: 600; color: var(--color-primary-blue); margin-bottom: 0.85rem; line-height: 1.45; }
.service-card--archive .service-card__desc { font-size: 0.9375rem; line-height: 1.6; color: var(--color-dark-gray); margin-bottom: 1.75rem; }
.service-card--archive .service-card__footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 1.25rem; border-top: 1px dashed rgba(166, 166, 166, 0.35); }
.service-card--archive .service-card__action { font-size: 0.75rem; letter-spacing: 0.08em; font-weight: 700; color: var(--color-primary-navy); transition: color 0.2s ease; }
.service-card--archive:hover .service-card__action { color: var(--color-primary-blue); }
.service-card--archive .service-card__arrow { font-size: 1.125rem; color: var(--color-primary-blue); transition: transform 0.2s ease; }
.service-card--archive:hover .service-card__arrow { transform: translateX(4px); color: var(--color-bright-blue); }

/* ---------- 2. SERVICES (Hizmetler - Archive & Single) DETAILED RESPONSIVE ---------- */

@media (max-width: 1024px) {
  .srv-hero__grid { grid-template-columns: 1fr; gap: 3rem; }
  .srv-hero__meta-card { max-width: 440px; }
  .srv-grid-split { grid-template-columns: 1fr; gap: 1.75rem; }
  .srv-scope__list { grid-template-columns: repeat(2, 1fr); }
  .srv-timeline { grid-template-columns: 1fr; gap: 1.5rem; }
  .srv-timeline__item { border-top: none; border-left: 3px solid var(--color-primary-navy); border-radius: 0 8px 8px 0; padding: 1.5rem 1.5rem; }
  .srv-timeline__item:hover { border-left-color: var(--color-primary-blue); }
  .srv-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .srv-projects__grid { grid-template-columns: 1fr; }
  .services-archive-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .page-header--services { padding-top: calc(75px + var(--space-6)); padding-bottom: var(--space-6); }
  .page-header--services .page-header__title { font-size: clamp(2.2rem, 6vw, 3.25rem); }
  .services-archive-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .srv-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .srv-hero__meta-card { max-width: 100%; width: 100%; }
  .srv-scope__list { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .srv-timeline { grid-template-columns: 1fr; gap: var(--space-3); }
  .srv-timeline__item { border-top: none; border-left: 3px solid var(--color-blue-main); border-radius: 0 12px 12px 0; padding: 1.35rem 1.25rem; }
  .srv-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
}

@media (max-width: 768px) {
  .srv-scope__list { grid-template-columns: 1fr; gap: 0.75rem; }
  .srv-pillar-row { grid-template-columns: 50px 1fr; gap: 1rem; }
  .srv-pillar-row__col-desc { grid-column: 2 / -1; margin-top: 0.5rem; }
  .srv-hero__action-bar { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .srv-nav__inner { grid-template-columns: 1fr; gap: 1.75rem; text-align: left; }
  .srv-nav__col--all { text-align: left; }
  .srv-nav__col--next { text-align: left; }
  .srv-kpi-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .services-archive-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .service-card--archive .service-card__link { padding: 1.35rem 1.15rem; }
  .service-card--archive .service-card__title { font-size: 1.22rem; }
  .service-card--archive .service-card__tagline { font-size: 0.88rem; }
  .service-card--archive .service-card__desc { font-size: 0.875rem; margin-bottom: 1.15rem; }
  .srv-hero__topbar { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .srv-hero__eyebrow { font-size: 0.72rem; }
  .srv-hero__spec { font-size: 0.68rem; }
  .srv-hero__title { font-size: clamp(2rem, 7.5vw, 2.85rem); line-height: 1.15; }
  .srv-hero__title-indent { padding-left: 0; }
  .srv-hero__lead { font-size: 1rem; line-height: 1.6; }
  .srv-hero__action-bar { flex-direction: column; align-items: stretch; width: 100%; gap: var(--space-3); }
  .srv-hero__cta { width: 100%; justify-content: center; text-align: center; }
  .srv-pillar-row { grid-template-columns: 1fr; gap: 0.65rem; padding: 1.25rem 1.1rem; border-radius: 14px; margin-bottom: 0.75rem; }
  .srv-pillar-row__col-num { font-size: 1.35rem; }
  .srv-pillar-row__title { font-size: 1.15rem; }
  .srv-pillar-row__desc { font-size: 0.88rem; line-height: 1.6; }
  .srv-scope__list { grid-template-columns: 1fr; gap: 0.65rem; }
  .srv-scope__item { padding: 0.85rem 1rem; font-size: 0.9rem; border-radius: 10px; }
  .srv-kpi-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .srv-kpi-card { padding: 1.25rem 1.1rem; border-radius: 14px; }
  .srv-final-cta__card { padding: 1.75rem 1.15rem; border-radius: 18px; }
  .srv-final-cta__title { font-size: clamp(1.6rem, 5.5vw, 2.2rem); }
  .srv-final-cta__desc { font-size: 0.925rem; line-height: 1.55; }
  .srv-final-cta__btn { width: 100%; justify-content: center; text-align: center; }
  .srv-final-cta__trust { font-size: 0.75rem; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
  .srv-nav__inner { grid-template-columns: 1fr; gap: 1.25rem; text-align: left; }
  .srv-nav__col--all, .srv-nav__col--next { text-align: left; }
}

@media (max-width: 600px) {
  .srv-final-cta__btn { width: 100%; max-width: 360px; }
}

@media (max-width: 430px) {
  .srv-hero__title { font-size: 2.25rem; }
  .srv-hero__title-indent { padding-left: 0; }
  .srv-pillar-row { grid-template-columns: 1fr; gap: 0.75rem; }
  .srv-pillar-row__col-desc { grid-column: 1 / -1; }
  .srv-scope__item { grid-template-columns: 35px 1fr auto; font-size: 0.95rem; }
  .srv-hero__cta, .srv-final-cta__btn { width: 100%; text-align: center; justify-content: center; }
}

/* ==========================================================================
   ABOUT PAGE (Hakkımızda)
   ========================================================================== */

/* ---------- About Hero ---------- */
.abt-hero {
  padding-top: calc(76px + clamp(1rem, 2vw, 1.75rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  background: radial-gradient(ellipse at 85% 15%, rgba(22, 121, 213, 0.12) 0%, transparent 60%), radial-gradient(ellipse at 15% 85%, rgba(11, 91, 196, 0.08) 0%, transparent 55%), linear-gradient(180deg, #FFFFFF 0%, var(--color-bg-light) 100%);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(166, 166, 166, 0.25);
}
.admin-bar .abt-hero { padding-top: calc(108px + clamp(1rem, 2vw, 1.75rem)); }
.abt-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(166, 166, 166, 0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(166, 166, 166, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, transparent 70%);
}
.abt-hero .breadcrumb {
  margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  position: relative;
  z-index: 2;
}
.abt-hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 3.5vw, 3.5rem); align-items: center; position: relative; z-index: 1; }
.abt-hero__badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  background: rgba(11, 91, 196, 0.08);
  border: 1px solid rgba(11, 91, 196, 0.2);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--color-blue-main);
  margin-bottom: 0.75rem;
}
.abt-hero__badge-pulse { width: 8px; height: 8px; border-radius: 50%; background-color: #10B981; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); animation: abtPulse 2s infinite; }
@keyframes abtPulse {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.abt-hero__title { font-family: var(--font-display); font-size: clamp(2.15rem, 3.5vw, 3.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; color: var(--color-corporate); margin-bottom: 1rem; }
.abt-hero__title-accent {
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-blue-main) 0%, var(--color-blue-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.abt-hero__lead { font-size: clamp(1rem, 1.1vw, 1.125rem); line-height: 1.6; color: var(--color-gray-dark); max-width: 56ch; margin-bottom: 1.25rem; }
.abt-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-bottom: 1.25rem; }
.abt-hero__trust-strip { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; padding-top: 1rem; border-top: 1px solid rgba(166, 166, 166, 0.22); }
.abt-hero__trust-item { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--fs-caption); font-weight: 600; color: var(--color-gray-dark); }
.abt-hero__trust-item svg { color: var(--color-blue-main); flex-shrink: 0; }

/* ---------- Hero Visual / Dashboard Component ---------- */
.abt-hero__visual { position: relative; display: flex; justify-content: center; align-items: center; padding: 0.75rem 0; }
.abt-hero__dashboard {
  width: 100%;
  max-width: 440px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(166, 166, 166, 0.3);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 25px 60px rgba(17, 24, 122, 0.12);
  position: relative;
  z-index: 2;
  transition: transform var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default);
}
.abt-hero__dashboard:hover { transform: translateY(-4px); box-shadow: 0 32px 70px rgba(17, 24, 122, 0.16); }
.abt-hero__dash-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(166, 166, 166, 0.2); margin-bottom: 0.75rem; }
.abt-hero__dash-status { display: flex; align-items: center; gap: 0.5rem; }
.abt-hero__pulse-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #10B981; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2); }
.abt-hero__dash-title { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; color: var(--color-corporate); text-transform: uppercase; }
.abt-hero__dash-badge {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.5rem;
  background: var(--color-light);
  border-radius: 4px;
  color: var(--text-secondary);
}
.abt-hero__dash-main { margin-bottom: 1rem; }
.abt-hero__dash-metric-wrap { display: flex; align-items: baseline; gap: 0.75rem; }
.abt-hero__stat-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.65rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--color-corporate) 0%, var(--color-blue-main) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.abt-hero__stat-value sup { font-size: 0.45em; -webkit-text-fill-color: var(--color-blue-light); }
.abt-hero__stat-badge { font-size: var(--fs-caption); font-weight: 700; color: #10B981; background: rgba(16, 185, 129, 0.1); padding: 0.2rem 0.6rem; border-radius: 9999px; }
.abt-hero__stat-lead { font-size: var(--fs-body-sm); color: var(--text-secondary); margin-top: 0.35rem; margin-bottom: 0.75rem; line-height: 1.45; }
.abt-hero__dash-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  height: 44px;
  padding: 0.4rem 0.65rem 0.85rem;
  background: var(--color-bg-light);
  border-radius: 8px;
  border: 1px solid rgba(166, 166, 166, 0.18);
}
.abt-hero__dash-bar {
  flex: 1;
  height: var(--bar-h, 50%);
  background: linear-gradient(180deg, var(--color-blue-light) 0%, var(--color-blue-main) 100%);
  border-radius: 4px 4px 0 0;
  position: relative;
  transition: height 0.6s ease;
}
.abt-hero__dash-bar--peak { background: linear-gradient(180deg, #10B981 0%, var(--color-blue-main) 100%); box-shadow: 0 -2px 8px rgba(16, 185, 129, 0.4); }
.abt-hero__dash-bar-tooltip { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); font-size: 0.5625rem; font-family: var(--font-mono); color: var(--color-gray-dark); font-weight: 600; }
.abt-hero__dash-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(166, 166, 166, 0.25), transparent); margin-bottom: 0.85rem; }
.abt-hero__stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-4); }
.abt-hero__stat-item { display: flex; flex-direction: column; gap: 0.15rem; }
.abt-hero__stat-num { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--color-corporate); line-height: 1.1; }
.abt-hero__stat-num sup { font-size: 0.65em; color: var(--color-blue-main); }
.abt-hero__stat-name { font-size: var(--fs-caption); color: var(--text-secondary); font-weight: 500; }
.abt-hero__floating-card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(166, 166, 166, 0.35);
  padding: 0.5rem 0.85rem;
  border-radius: 12px;
  box-shadow: 0 14px 35px rgba(17, 24, 122, 0.12);
  animation: abtFloat 6s ease-in-out infinite;
  pointer-events: none;
}
.abt-hero__floating-card--top { top: -10px; left: -20px; }
.abt-hero__floating-card--bottom { bottom: -15px; right: -20px; animation-delay: -3s; }
@keyframes abtFloat {
0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.abt-hero__floating-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(11, 91, 196, 0.1);
  color: var(--color-blue-main);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.abt-hero__floating-icon--check { background: rgba(16, 185, 129, 0.12); color: #10B981; }
.abt-hero__floating-text { display: flex; flex-direction: column; line-height: 1.25; }
.abt-hero__floating-text strong { font-size: 0.8125rem; color: var(--color-corporate); }
.abt-hero__floating-text span { font-size: 0.6875rem; color: var(--text-secondary); }

/* ---------- Metrics Ribbon ---------- */
.abt-metrics { background: var(--color-white); border-bottom: 1px solid rgba(166, 166, 166, 0.25); padding: var(--space-6) 0; position: relative; z-index: 2; }
.abt-metrics__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); align-items: center; }
.abt-metric-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: 12px;
  background: var(--color-bg-light);
  border: 1px solid rgba(166, 166, 166, 0.2);
  transition: transform var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.abt-metric-card:hover { transform: translateY(-2px); border-color: var(--color-blue-light); box-shadow: 0 8px 20px rgba(17, 24, 122, 0.06); }
.abt-metric-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(11, 91, 196, 0.08);
  color: var(--color-blue-main);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.abt-metric-card__icon--tl { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; line-height: 1; }
.abt-tl-symbol { display: flex; align-items: center; justify-content: center; }
.abt-metric-card__data { display: flex; flex-direction: column; }
.abt-metric-card__val { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--color-corporate); line-height: 1.1; }
.abt-metric-card__val sup { font-size: 0.55em; color: var(--color-blue-main); }
.abt-metric-card__lbl { font-size: var(--fs-caption); color: var(--text-secondary); font-weight: 500; }

/* ---------- About Story — Split Layout ---------- */
.abt-story { background-color: var(--color-white); }
.abt-story__grid { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: clamp(3rem, 6vw, 5.5rem); align-items: start; }
.abt-story__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--color-corporate);
  position: relative;
  padding-bottom: var(--space-4);
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
}
.abt-story__title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 48px; height: 3px; background: linear-gradient(90deg, var(--color-blue-main), var(--color-blue-light)); border-radius: 2px; }
.abt-story__manifesto-quote {
  margin: var(--space-5) 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-blue-main);
  background: rgba(11, 91, 196, 0.04);
  border-radius: 0 10px 10px 0;
}
.abt-story__manifesto-quote p { font-style: italic; font-size: var(--fs-body-md); line-height: 1.6; color: var(--color-corporate); margin: 0; font-weight: 500; }
.abt-story__identity-card { background: var(--color-bg-light); border: 1px solid rgba(166, 166, 166, 0.25); border-radius: 14px; padding: var(--space-5); }
.abt-story__identity-heading { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; color: var(--color-corporate); margin-bottom: var(--space-4); }
.abt-story__identity-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.abt-story__identity-list li { display: flex; flex-direction: column; font-size: var(--fs-body-sm); border-bottom: 1px dashed rgba(166, 166, 166, 0.25); padding-bottom: var(--space-2); }
.abt-story__identity-list li:last-child { border-bottom: none; padding-bottom: 0; }
.abt-story__identity-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); font-weight: 600; }
.abt-story__identity-val { color: var(--color-corporate); font-weight: 600; margin-top: 0.15rem; }
.abt-story__content { font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); line-height: 1.78; color: var(--color-gray-dark); }
.abt-story__lead-text { font-size: 1.2rem; color: var(--color-corporate); font-weight: 500; line-height: 1.7; margin-bottom: var(--space-4); }
.abt-story__content p { max-width: 65ch; margin-bottom: var(--space-5); }
.abt-comparison { margin-top: var(--space-6); background: var(--color-bg-light); border: 1px solid rgba(166, 166, 166, 0.25); border-radius: 14px; padding: var(--space-6); }
.abt-comparison__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; color: var(--color-corporate); margin-bottom: var(--space-4); }
.abt-comparison__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.abt-comparison__col { border-radius: 12px; padding: var(--space-5); }
.abt-comparison__col--traditional { background: rgba(0, 0, 0, 0.03); border: 1px dashed rgba(166, 166, 166, 0.35); }
.abt-comparison__col--vivid { background: var(--color-white); border: 1.5px solid var(--color-blue-main); box-shadow: 0 6px 20px rgba(11, 91, 196, 0.08); }
.abt-comparison__col-header { display: block; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; margin-bottom: var(--space-3); }
.abt-comparison__col--traditional .abt-comparison__col-header { color: var(--text-secondary); }
.abt-comparison__col--vivid .abt-comparison__col-header { color: var(--color-blue-main); }
.abt-comparison__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; font-size: var(--fs-body-sm); }
.abt-comparison__col--traditional .abt-comparison__list li { color: var(--text-secondary); line-height: 1.5; }
.abt-comparison__col--vivid .abt-comparison__list li { color: var(--color-corporate); font-weight: 500; line-height: 1.5; }

/* ---------- 4-Step Process Section ---------- */
.abt-process.section--alt { background-color: var(--color-bg-light); }
.abt-process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.abt-process__card {
  background: var(--color-white);
  border: 1px solid rgba(166, 166, 166, 0.25);
  border-radius: 14px;
  padding: var(--space-6) var(--space-5);
  position: relative;
  transition: transform var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default);
}
.abt-process__card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(17, 24, 122, 0.08); }
.abt-process__step { position: absolute; top: var(--space-4); right: var(--space-4); font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; color: rgba(11, 91, 196, 0.12); line-height: 1; }
.abt-process__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(11, 91, 196, 0.08);
  color: var(--color-blue-main);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.abt-process__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; color: var(--color-corporate); margin-bottom: var(--space-2); }
.abt-process__text { font-size: var(--fs-body-sm); color: var(--color-gray-dark); line-height: 1.6; margin: 0; }

/* ---------- Mission Quote Band ---------- */
.abt-mission {
  background: linear-gradient(135deg, var(--color-corporate) 0%, var(--color-blue-secondary) 50%, var(--color-blue-main) 100%);
  background-size: 200% 200%;
  animation: ctaGradientShift 6s ease infinite;
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}
.abt-mission::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; }
.abt-mission__inner { text-align: center; position: relative; z-index: 1; }
.abt-mission__quote { margin: 0; }
.abt-mission__quote p {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: 36ch;
  margin: 0 auto var(--space-7);
  color: var(--color-white);
}
.abt-mission__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.abt-mission__tag {
  font-size: var(--fs-caption);
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-white);
  letter-spacing: 0.02em;
  transition: background var(--duration-normal) var(--ease-default), transform var(--duration-fast);
}
.abt-mission__tag:hover { background: rgba(255, 255, 255, 0.24); transform: translateY(-2px); }

/* ---------- About Pillars / Values ---------- */
.abt-pillars.section--dark { background: linear-gradient(135deg, #11187A 0%, #0d1358 100%); position: relative; overflow: hidden; }
.abt-pillars.section--dark::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(22, 121, 213, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.abt-pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); position: relative; z-index: 1; }
.abt-pillar-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(166, 166, 166, 0.2);
  border-top: 3px solid var(--color-blue-secondary);
  border-radius: 14px;
  padding: var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-default), border-top-color var(--duration-normal) var(--ease-default), background var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default);
}
.abt-pillar-card::after {
  content: '';
  position: absolute;
  bottom: -25px;
  right: -25px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 121, 213, 0.2) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-default);
  pointer-events: none;
}
.abt-pillar-card:hover::after { opacity: 1; }
.abt-pillar-card:hover { transform: translateY(-5px); border-top-color: var(--color-blue-light); background: rgba(255, 255, 255, 0.09); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18); }
.abt-pillar-card__icon { color: var(--color-blue-light); margin-bottom: var(--space-4); transition: color var(--duration-normal); }
.abt-pillar-card:hover .abt-pillar-card__icon { color: var(--color-white); }
.abt-pillar-card__number { font-family: var(--font-display); font-size: 2rem; font-weight: 800; line-height: 1; color: var(--color-blue-light); margin-bottom: var(--space-3); letter-spacing: -0.02em; }
.abt-pillar-card__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; color: var(--color-white); margin-bottom: var(--space-3); }
.abt-pillar-card__text { font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); color: rgba(255, 255, 255, 0.78); }

/* ---------- Tech Ecosystem Grid ---------- */
.abt-tech { background-color: var(--color-white); }
.abt-tech__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.abt-tech__item {
  background: var(--color-white);
  border: 1px solid rgba(166, 166, 166, 0.22);
  border-radius: 12px;
  padding: var(--space-5);
  transition: transform var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.abt-tech__item:hover { transform: translateY(-3px); border-color: var(--color-blue-light); box-shadow: 0 10px 25px rgba(17, 24, 122, 0.06); }
.abt-tech__badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-blue-main);
  background: rgba(11, 91, 196, 0.08);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  margin-bottom: var(--space-3);
}
.abt-tech__name { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--color-corporate); margin-bottom: 0.35rem; }
.abt-tech__desc { font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.5; margin: 0; }

/* ---------- Why Vivid — Differentiators ---------- */
.abt-why.section--alt { background-color: var(--color-bg-light); }
.abt-why__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.abt-why__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
  background: var(--color-white);
  border: 1px solid rgba(166, 166, 166, 0.28);
  border-left: 4px solid var(--color-corporate);
  border-radius: 12px;
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-default), border-left-color var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default);
}
.abt-why__item::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(11, 91, 196, 0.04), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
}
.abt-why__item:hover::after { left: 120%; }
.abt-why__item:hover { transform: translateY(-3px); border-left-color: var(--color-blue-main); box-shadow: 0 12px 30px rgba(17, 24, 122, 0.08); }
.abt-why__num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: rgba(11, 91, 196, 0.15); line-height: 1; min-width: 36px; transition: color var(--duration-normal); }
.abt-why__item:hover .abt-why__num { color: rgba(11, 91, 196, 0.35); }
.abt-why__body { display: flex; flex-direction: column; gap: var(--space-2); }
.abt-why__item-title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; color: var(--color-corporate); letter-spacing: var(--ls-tight); transition: color var(--duration-fast); }
.abt-why__item:hover .abt-why__item-title { color: var(--color-blue-main); }
.abt-why__body p { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--color-gray-dark); margin: 0; max-width: 48ch; }
.section--alt { background-color: var(--color-bg-light); }

/* ---------- About Page Responsive Fine-Tuning (< 991px, < 768px, < 575px, < 380px) ---------- */

/* ==========================================================================
   DETAILED RESPONSIVE SYSTEM: ABOUT, SERVICES & PROJECTS
   ========================================================================== */

/* ---------- 1. ABOUT PAGE (Hakkımızda) DETAILED RESPONSIVE ---------- */

@media (max-width: 991px) {
  .abt-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .abt-metrics__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .abt-story__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .abt-process__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .abt-pillars__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .abt-tech__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .abt-hero { padding-top: calc(90px + 2.5rem); padding-bottom: 3.5rem; }
  .abt-hero__content { max-width: 650px; margin-inline: auto; }
  .abt-hero__title { font-size: clamp(2.4rem, 6.5vw, 3.6rem); line-height: 1.12; }
  .abt-process__grid, .abt-pillars__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .abt-why__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .abt-hero__visual { max-width: 540px; margin-inline: auto; width: 100%; }
  .abt-story__sidebar { max-width: 100%; }
  .abt-comparison__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}

@media (max-width: 782px) {
  .admin-bar .abt-hero { padding-top: calc(122px + clamp(1rem, 2vw, 1.5rem)); }
}

@media (max-width: 767px) {
  .abt-hero__floating-card { position: relative; inset: auto; width: 100%; max-width: 330px; margin-inline: auto; padding: 0.65rem 0.95rem; border-radius: 12px; box-shadow: 0 10px 24px rgba(17, 24, 122, 0.12); }
  .abt-hero__floating-card--top { margin-bottom: -14px; z-index: 2; }
  .abt-hero__floating-card--bottom { margin-top: -14px; z-index: 2; }
  .abt-hero__floating-icon { width: 34px; height: 34px; }
  .abt-hero__floating-icon svg { width: 17px; height: 17px; }
  .abt-hero__floating-text strong { font-size: 0.78rem; }
  .abt-hero__floating-text span { font-size: 0.65rem; }
  .abt-why__grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .abt-metrics__grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .abt-metric-card { padding: 0.95rem 0.85rem; gap: 0.75rem; }
  .abt-metric-card__val { font-size: 1.45rem; }
  .abt-metric-card__lbl { font-size: 0.75rem; }
  .abt-comparison__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .abt-comparison__col { padding: 1.35rem 1.15rem; border-radius: 14px; }
  .abt-tech__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .abt-why__item { grid-template-columns: 44px 1fr; gap: 1rem; padding: 1.25rem 1.1rem; border-radius: 14px; }
  .abt-why__num { display: flex !important; font-size: 1.15rem; width: 44px; height: 44px; }
  .abt-hero { padding-top: calc(75px + var(--space-6)); padding-bottom: var(--space-6); }
  .abt-hero__title { font-size: clamp(2.15rem, 7.5vw, 3.25rem); line-height: 1.15; }
  .abt-hero__lead { font-size: 1.05rem; line-height: 1.65; }
}

@media (max-width: 640px) {
  .abt-comparison__grid { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
  .abt-metrics__grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .abt-process__grid { grid-template-columns: 1fr; }
  .abt-tech__grid { grid-template-columns: 1fr; gap: 0.65rem; }
  .abt-hero { padding-top: calc(80px + 1.5rem); padding-bottom: 2.5rem; }
  .abt-hero__title { font-size: clamp(2rem, 8vw, 2.75rem); margin-bottom: var(--space-3); }
  .abt-hero__lead { font-size: 0.98rem; line-height: 1.6; margin-bottom: var(--space-5); }
  .abt-hero__actions { flex-direction: column; align-items: stretch; width: 100%; gap: var(--space-3); }
  .abt-hero__actions .btn { width: 100%; justify-content: center; text-align: center; }
  .abt-hero__dashboard { padding: 1.15rem 1rem; border-radius: 16px; }
  .abt-hero__stat-value { font-size: 2.15rem; }
  .abt-hero__dash-chart { height: 40px; gap: 0.35rem; margin-block: var(--space-3); }
  .abt-hero__stats-grid { gap: 0.65rem 0.5rem; }
  .abt-hero__stat-num { font-size: 1.25rem; }
  .abt-hero__stat-name { font-size: 0.68rem; line-height: 1.3; }
  .abt-metric-card { padding: 0.75rem 0.65rem; gap: 0.5rem; border-radius: 10px; }
  .abt-metric-card__val { font-size: 1.25rem; }
  .abt-metric-card__lbl { font-size: 0.68rem; }
  .abt-process__grid, .abt-pillars__grid { grid-template-columns: 1fr; gap: 0.85rem; }
  .abt-process__card, .abt-pillar-card { padding: 1.25rem 1.1rem; border-radius: 14px; }
  .abt-mission__quote p { font-size: 1.25rem; line-height: 1.45; }
  .abt-mission__tags { gap: 0.35rem; margin-top: 1.25rem; }
  .abt-mission__tag { font-size: 0.72rem; padding: 0.25rem 0.65rem; }
  .abt-tech__item { padding: 1.15rem 1rem; border-radius: 12px; }
  .abt-why__item { grid-template-columns: 38px 1fr; gap: 0.75rem; padding: 1.15rem 1rem; }
  .abt-why__num { width: 38px; height: 38px; font-size: 0.95rem; }
  .abt-hero__badge-pill { font-size: 0.72rem; padding: 0.3rem 0.8rem; }
  .abt-hero__trust-strip { flex-direction: column; align-items: flex-start; gap: 0.65rem; margin-top: var(--space-4); }
  .abt-hero__trust-item { font-size: 0.8125rem; }
  .abt-hero__dash-status { gap: 0.4rem; }
  .abt-hero__dash-title { font-size: 0.7rem; }
  .abt-hero__dash-badge { font-size: 0.65rem; }
  .abt-hero__stat-badge { font-size: 0.68rem; padding: 0.2rem 0.5rem; }
  .abt-metrics { padding: var(--space-5) 0; }
  .abt-story__identity-card { padding: 1.25rem 1.1rem; border-radius: 14px; }
  .abt-story__identity-heading { font-size: 1.05rem; }
  .abt-story__identity-list li { font-size: 0.85rem; gap: 0.35rem; }
  .abt-process__step { font-size: 1.75rem; }
  .abt-process__title, .abt-pillar-card__title { font-size: 1.15rem; }
  .abt-process__text, .abt-pillar-card__text { font-size: 0.875rem; line-height: 1.6; }
  .abt-mission__inner { padding: 1.75rem 1.25rem; border-radius: 18px; }
  .abt-why__item-title { font-size: 1.05rem; }
}

@media (max-width: 380px) {
  .abt-metrics__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CONTACT PAGE (İletişim)
   ========================================================================== */

/* ---------- Contact Hero ---------- */
.cnt-hero {
  padding-top: calc(90px + clamp(3rem, 6vw, 5.5rem));
  padding-bottom: clamp(3.5rem, 6vw, 5rem);
  background: radial-gradient(ellipse at 85% 15%, rgba(22, 121, 213, 0.12) 0%, transparent 60%), radial-gradient(ellipse at 15% 85%, rgba(11, 91, 196, 0.08) 0%, transparent 55%), linear-gradient(180deg, #FFFFFF 0%, var(--color-bg-light) 100%);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(166, 166, 166, 0.25);
}
.admin-bar .cnt-hero { padding-top: calc(122px + clamp(3rem, 6vw, 5.5rem)); }
.cnt-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(166, 166, 166, 0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(166, 166, 166, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, transparent 70%);
}
.cnt-hero .breadcrumb {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  position: relative;
  z-index: 2;
}
.cnt-hero .container,
.cnt-section .container {
  max-width: 1480px;
  width: 100%;
}
.cnt-hero__content { max-width: 100%; width: 100%; position: relative; z-index: 1; }
.cnt-hero__badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 1rem;
  border-radius: 9999px;
  background: rgba(11, 91, 196, 0.08);
  border: 1px solid rgba(11, 91, 196, 0.2);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--color-blue-main);
  margin-bottom: var(--space-4);
}
.cnt-hero__badge-pulse { width: 8px; height: 8px; border-radius: 50%; background-color: #10B981; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); animation: abtPulse 2s infinite; }
.cnt-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.8vw, 3.85rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--color-corporate);
  margin-bottom: var(--space-5);
  max-width: 100%;
}
.cnt-hero__title-line {
  display: inline;
}
@media (min-width: 900px) {
  .cnt-hero__title-line {
    white-space: nowrap;
    display: inline-block;
  }
}
.cnt-hero__title-accent {
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-blue-main) 0%, var(--color-blue-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cnt-hero__lead { font-size: clamp(1.0625rem, 1.25vw, 1.25rem); line-height: 1.7; color: var(--color-gray-dark); max-width: 78ch; margin-bottom: var(--space-6); }
.cnt-hero__trust-strip { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; padding-top: var(--space-5); border-top: 1px solid rgba(166, 166, 166, 0.22); }
.cnt-hero__trust-item { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--fs-caption); font-weight: 600; color: var(--color-gray-dark); }
.cnt-hero__trust-item svg { color: var(--color-blue-main); flex-shrink: 0; }

/* ---------- Main Contact Section & Grid ---------- */
.cnt-section { background-color: var(--color-white); }
.cnt-grid { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }

/* ---------- Left Column: Info & Cards ---------- */
.cnt-info__status-box {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--space-4) var(--space-5);
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 12px;
  margin-bottom: var(--space-5);
  width: 100%;
}
.cnt-info__status-header { display: flex; align-items: center; gap: 0.5rem; color: #065F46; font-size: var(--fs-body-sm); }
.cnt-info__status-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #10B981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25); }
.cnt-info__status-text { font-size: var(--fs-caption); color: #047857; margin: 0; }
.cnt-info__title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 800; letter-spacing: -0.02em; color: var(--color-corporate); margin-bottom: var(--space-3); }
.cnt-info__desc { font-size: var(--fs-body-sm); color: var(--color-gray-dark); line-height: 1.65; margin-bottom: var(--space-6); }
.cnt-cards-list { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-7); }
.cnt-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-light);
  border: 1px solid rgba(166, 166, 166, 0.22);
  border-radius: 14px;
  transition: transform var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.cnt-card:hover { transform: translateY(-2px); border-color: var(--color-blue-light); box-shadow: 0 10px 25px rgba(17, 24, 122, 0.06); }
.cnt-card--whatsapp {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  background: linear-gradient(145deg, rgba(37, 211, 102, 0.08) 0%, rgba(255, 255, 255, 0.98) 100%);
  border: 1.5px solid rgba(37, 211, 102, 0.45);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.09);
  position: relative;
  overflow: hidden;
}
.cnt-card--whatsapp:hover { border-color: #25D366; box-shadow: 0 14px 32px rgba(37, 211, 102, 0.2); transform: translateY(-2px); }
.cnt-card__top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.cnt-card__icon--whatsapp {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #25D366;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}
.cnt-card__icon--whatsapp svg { width: 24px; height: 24px; color: #ffffff; }
.cnt-card__wp-status { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.8rem; background: rgba(37, 211, 102, 0.12); border: 1px solid rgba(37, 211, 102, 0.3); border-radius: 50px; }
.cnt-card__pulse-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #25D366; position: relative; }
.cnt-card__pulse-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #25D366; opacity: 0.75; animation: vividWpPulse 2s cubic-bezier(0.24, 0, 0.38, 1) infinite; }
@keyframes vividWpPulse {
0% { transform: scale(0.9); opacity: 0.9; }
  70% { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}
.cnt-card__wp-status-text { font-size: 0.75rem; font-weight: 700; color: #0f8543; letter-spacing: 0.02em; }
.cnt-card__label--whatsapp { color: #0f8543 !important; font-weight: 800; }
.cnt-card__val--phone { font-size: 1.25rem; font-weight: 800; color: var(--color-corporate); letter-spacing: -0.01em; }
.cnt-card__action { margin-top: 0.5rem; width: 100%; }
.cnt-whatsapp-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.9rem 1.35rem;
  background: linear-gradient(135deg, #25D366 0%, #1ea952 100%);
  color: #ffffff !important;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
  transition: all var(--duration-fast) var(--ease-default);
}
.cnt-whatsapp-cta-btn:hover { background: linear-gradient(135deg, #20bd5a 0%, #189849 100%); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45); color: #ffffff !important; }
.cnt-whatsapp-cta-btn__icon { display: flex; align-items: center; justify-content: center; }
.cnt-whatsapp-cta-btn__icon svg { width: 20px; height: 20px; }
.cnt-whatsapp-cta-btn__arrow { transition: transform var(--duration-fast); }
.cnt-whatsapp-cta-btn:hover .cnt-whatsapp-cta-btn__arrow { transform: translateX(4px); }
.cnt-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(11, 91, 196, 0.08);
  color: var(--color-blue-main);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cnt-card__content { display: flex; flex-direction: column; gap: 0.15rem; }
.cnt-card__label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.cnt-card__val { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--color-corporate); text-decoration: none; transition: color var(--duration-fast); }
.cnt-card__val:hover { color: var(--color-blue-main); }
.cnt-card__val--address { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; font-style: normal; line-height: 1.5; color: var(--color-corporate); }
.cnt-card__sub { font-size: var(--fs-caption); color: var(--text-secondary); margin-top: 0.15rem; }
.cnt-card__map-link { display: inline-block; font-size: 0.8125rem; font-weight: 600; color: var(--color-blue-main); margin-top: 0.35rem; text-decoration: none; transition: color var(--duration-fast); }
.cnt-card__map-link:hover { color: var(--color-blue-dark); text-decoration: underline; }
.cnt-info__social { padding-top: var(--space-5); border-top: 1px solid rgba(166, 166, 166, 0.2); }
.cnt-info__social-title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; color: var(--color-corporate); margin-bottom: var(--space-3); }

/* ---------- Right Column: Form Card ---------- */
.cnt-form-card {
  background: var(--color-white);
  border: 1.5px solid rgba(166, 166, 166, 0.3);
  border-top: 4px solid var(--color-blue-main);
  border-radius: 18px;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: 0 25px 60px rgba(17, 24, 122, 0.08);
  position: relative;
}
.cnt-form-card__header { margin-bottom: var(--space-5); }
.cnt-form-card__title { font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; color: var(--color-corporate); margin-bottom: var(--space-2); }
.cnt-form-card__desc { font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: 1.6; margin: 0; }
.cnt-form-alert { margin-bottom: var(--space-5); }
.cnt-alert { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-radius: 10px; font-size: var(--fs-body-sm); font-weight: 500; }
.cnt-alert--success { background: #ECFDF5; border: 1px solid #10B981; color: #065F46; }
.cnt-alert--error { background: #FEF2F2; border: 1px solid #EF4444; color: #991B1B; }
.cnt-alert__icon { font-size: 1.25rem; font-weight: 800; flex-shrink: 0; }
.cnt-form { display: flex; flex-direction: column; gap: var(--space-4); }
.cnt-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.cnt-form__group { display: flex; flex-direction: column; gap: 0.35rem; }
.cnt-form__label { font-size: 0.8125rem; font-weight: 600; color: var(--color-corporate); letter-spacing: 0.01em; }
.cnt-form__req { color: #EF4444; }
.cnt-form__input, .cnt-form__select, .cnt-form__textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--color-bg-light);
  border: 1.5px solid rgba(166, 166, 166, 0.28);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-corporate);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
}
.cnt-form__input:focus, .cnt-form__select:focus, .cnt-form__textarea:focus { outline: none; background: var(--color-white); border-color: var(--color-blue-main); box-shadow: 0 0 0 3px rgba(11, 91, 196, 0.15); }
.cnt-form__select { cursor: pointer; }
.cnt-form__textarea { resize: vertical; min-height: 100px; }
.cnt-form__consent { margin-top: 0.25rem; }
.cnt-form__checkbox-label { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; user-select: none; }
.cnt-form__checkbox-label input { position: absolute; opacity: 0; cursor: pointer; }
.cnt-form__checkbox-custom {
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(166, 166, 166, 0.45);
  border-radius: 4px;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all var(--duration-fast);
}
.cnt-form__checkbox-label input:checked ~ .cnt-form__checkbox-custom { background: var(--color-blue-main); border-color: var(--color-blue-main); }
.cnt-form__checkbox-label input:checked ~ .cnt-form__checkbox-custom::after { content: '✓'; color: var(--color-white); font-size: 0.75rem; font-weight: 800; }
.cnt-form__checkbox-text { font-size: 0.8125rem; color: var(--color-gray-dark); line-height: 1.45; }
.cnt-form__submit-btn { width: 100%; padding-block: 1rem; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: var(--space-2); }
.cnt-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 50%; border-top-color: #FFFFFF; animation: cntSpin 0.7s linear infinite; }
@keyframes cntSpin {
to { transform: rotate(360deg); }
}

/* ---------- Google Maps Section ---------- */
.cnt-map-section.section--alt { background-color: var(--color-bg-light); }
.cnt-map-wrapper { position: relative; }
.cnt-map-card { position: relative; border-radius: 18px; overflow: hidden; border: 1.5px solid rgba(166, 166, 166, 0.28); box-shadow: 0 20px 50px rgba(17, 24, 122, 0.08); background: var(--color-white); }
.cnt-map-card iframe { display: block; width: 100%; height: 480px; }
.cnt-map-floating-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(166, 166, 166, 0.3);
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 12px 30px rgba(17, 24, 122, 0.14);
  z-index: 2;
}
.cnt-map-floating-badge__icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(11, 91, 196, 0.1);
  color: var(--color-blue-main);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cnt-map-floating-badge__info { display: flex; flex-direction: column; line-height: 1.25; }
.cnt-map-floating-badge__info strong { font-family: var(--font-display); font-size: 0.9375rem; color: var(--color-corporate); }
.cnt-map-floating-badge__info span { font-size: 0.75rem; color: var(--text-secondary); }

/* ---------- FAQ Section ---------- */
.cnt-faq { background-color: var(--color-white); }
.cnt-faq__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.cnt-faq__card {
  background: var(--color-bg-light);
  border: 1px solid rgba(166, 166, 166, 0.22);
  border-radius: 14px;
  padding: var(--space-6);
  transition: transform var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.cnt-faq__card:hover { transform: translateY(-2px); border-color: var(--color-blue-light); box-shadow: 0 10px 25px rgba(17, 24, 122, 0.06); }
.cnt-faq__q { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; color: var(--color-corporate); margin-bottom: var(--space-2); }
.cnt-faq__a { font-size: var(--fs-body-sm); color: var(--color-gray-dark); line-height: 1.6; margin: 0; }

/* ---------- 5. CONTACT (İletişim) DETAILED RESPONSIVE ---------- */

@media (max-width: 991px) {
  .cnt-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .cnt-hero { padding-top: calc(75px + var(--space-6)); padding-bottom: var(--space-6); }
  .cnt-hero__title { font-size: clamp(1.85rem, 5.2vw, 2.75rem); }
  .cnt-info { max-width: 100%; }
  .cnt-form-card { max-width: 100%; width: 100%; }
}

@media (max-width: 782px) {
  .admin-bar .cnt-hero { padding-top: calc(136px + clamp(3rem, 6vw, 5.5rem)); }
}

@media (max-width: 768px) {
  .cnt-form__input, .cnt-form__select, .cnt-form__textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea { font-size: 16px !important; }
}

@media (max-width: 767px) {
  .cnt-faq__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

@media (max-width: 640px) {
  .cnt-form__row { grid-template-columns: 1fr; gap: var(--space-3); }
  .cnt-map-floating-badge {
    position: relative;
    border-radius: 12px;
    border: none;
    border-top: 1px solid rgba(166, 166, 166, 0.2);
    inset: auto;
    margin: var(--space-3) auto 0;
    max-width: 90%;
    padding: 0.75rem 1rem;
    box-shadow: 0 8px 20px rgba(17, 24, 122, 0.1);
  }
  .cnt-hero__badge-pill { font-size: 0.72rem; padding: 0.3rem 0.8rem; }
  .cnt-hero__title { font-size: clamp(1.95rem, 7.5vw, 2.75rem); line-height: 1.15; margin-bottom: var(--space-3); }
  .cnt-hero__lead { font-size: 0.98rem; line-height: 1.6; margin-bottom: var(--space-4); }
  .cnt-hero__trust-strip { flex-direction: column; align-items: flex-start; gap: 0.65rem; }
  .cnt-hero__trust-item { font-size: 0.8125rem; }
  .cnt-cards-list { gap: 0.75rem; }
  .cnt-card { padding: 1.15rem 1rem; border-radius: 14px; gap: 0.85rem; }
  .cnt-card__val { font-size: 1.0625rem; }
  .cnt-card--whatsapp { padding: 1.25rem 1.1rem; border-radius: 16px; }
  .cnt-whatsapp-cta-btn { width: 100%; justify-content: center; text-align: center; padding: 0.85rem 1.25rem; font-size: 0.95rem; }
  .cnt-form-card { padding: 1.35rem 1.1rem; border-radius: 16px; }
  .cnt-form-card__title { font-size: 1.4rem; }
  .cnt-form-card__desc { font-size: 0.875rem; }
  .cnt-form__input, .cnt-form__select, .cnt-form__textarea { font-size: 16px !important; padding: 0.8rem 0.95rem; border-radius: 10px; }
  .cnt-form__submit-btn { width: 100%; justify-content: center; padding: 0.95rem; font-size: 1rem; font-weight: 700; }
  .cnt-map-card iframe { height: 300px; }
  .cnt-faq__grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .cnt-faq__card { padding: 1.15rem 1rem; border-radius: 12px; }
  .cnt-faq__q { font-size: 1.05rem; }
  .cnt-faq__a { font-size: 0.875rem; }
}

/* ==========================================================================
   PROJECT ARCHIVE & CASE STUDY STYLES
   ========================================================================== */

/* ---------- Filter Bar ---------- */
.filter-bar { padding: var(--space-5) 0; border-bottom: 1px solid rgba(166, 166, 166, 0.2); background: var(--color-white); }
.filter-bar__list { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.filter-bar__link {
  display: inline-block;
  padding: 0.4rem 1.1rem;
  border-radius: 9999px;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--color-bg-light);
  border: 1px solid rgba(166, 166, 166, 0.25);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-default);
}
.filter-bar__link:hover, .filter-bar__link.is-active { background: var(--color-blue-main); color: var(--color-white); border-color: var(--color-blue-main); }

/* ---------- Projects Archive Grid ---------- */
.projects-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }

/* ---------- Portfolio & Projects: Montserrat Light (300) ---------- */
.post-type-archive-vivid_project, .tax-vivid_project_category, .tax-vivid_industry, .page-header--projects, .projects-archive, .projects-archive-grid, .project-card {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
}
.page-header--projects .page-header__title { font-family: 'Montserrat', sans-serif !important; font-weight: 300 !important; letter-spacing: -0.02em; }
.page-header--projects .page-header__description { font-family: 'Montserrat', sans-serif !important; font-weight: 300 !important; line-height: 1.6; }
.page-header--projects .page-header__overline { font-family: 'Montserrat', sans-serif !important; font-weight: 400 !important; letter-spacing: 0.12em; }
.filter-bar__link { font-family: 'Montserrat', sans-serif !important; font-weight: 400 !important; }
.project-card__title { font-family: 'Montserrat', sans-serif !important; font-weight: 400 !important; letter-spacing: -0.01em; }
.project-card__client, .project-card__year, .project-card__category, .project-card__excerpt, .project-card__meta, .project-card__tag { font-family: 'Montserrat', sans-serif !important; font-weight: 300 !important; }
.single-vivid_project .project-hero__title { font-family: 'Montserrat', sans-serif !important; font-weight: 300 !important; letter-spacing: -0.02em; }
.single-vivid_project .project-hero__lead, .single-vivid_project .project-narrative, .single-vivid_project .project-info-grid, .single-vivid_project .project-kpi-card {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 300 !important;
}

/* ==========================================================================
   SINGLE PROJECT — Modern Split Studio & Showcase Presentation
   ========================================================================== */

/* ---------- 1. Hero Header & Split Grid ---------- */
.project-hero {
  padding-top: calc(90px + clamp(2rem, 4vw, 3.5rem));
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
  background: radial-gradient(circle at 80% 10%, rgba(22, 121, 213, 0.08) 0%, transparent 60%), radial-gradient(circle at 10% 80%, rgba(17, 24, 122, 0.04) 0%, transparent 60%), var(--color-bg-light);
  border-bottom: 1px solid rgba(166, 166, 166, 0.2);
  position: relative;
}
.admin-bar .project-hero { padding-top: calc(122px + clamp(2rem, 4vw, 3.5rem)); }
.project-hero__topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.project-hero__back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--color-blue-main);
  text-decoration: none;
  padding: 0.4rem 0.9rem;
  background: var(--color-white);
  border: 1px solid rgba(166, 166, 166, 0.28);
  border-radius: 9999px;
  transition: all var(--duration-fast);
}
.project-hero__back-link:hover { background: var(--color-blue-main); color: var(--color-white); border-color: var(--color-blue-main); transform: translateX(-3px); }
.project-hero__back-arrow { transition: transform var(--duration-fast); }
.project-hero__back-link:hover .project-hero__back-arrow { transform: translateX(-2px); }
.project-hero__grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.project-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  background: rgba(11, 91, 196, 0.08);
  border: 1px solid rgba(11, 91, 196, 0.2);
  border-radius: 9999px;
  margin-bottom: var(--space-4);
}
.project-hero__badge-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--color-blue-main); box-shadow: 0 0 0 3px rgba(11, 91, 196, 0.2); display: inline-block; }
.project-hero__badge-text { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--color-blue-main); }
.project-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--color-corporate);
  margin-bottom: var(--space-4);
}
.project-hero__lead { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.7; color: var(--color-gray-dark); margin-bottom: var(--space-6); max-width: 60ch; }
.project-hero__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.project-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  background: var(--color-white);
  border: 1px solid rgba(166, 166, 166, 0.25);
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-corporate);
}
.project-tag svg { color: var(--color-blue-main); }
.project-fact-card {
  background: var(--color-white);
  border: 1px solid rgba(166, 166, 166, 0.28);
  border-radius: 18px;
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 0 15px 35px rgba(17, 24, 122, 0.05);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
  overflow: hidden;
}
.project-fact-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--color-blue-main), var(--color-blue-secondary)); }
.project-fact-card__header { display: flex; align-items: center; gap: 0.6rem; padding-bottom: var(--space-3); border-bottom: 1px solid rgba(166, 166, 166, 0.18); }
.project-fact-card__icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(11, 91, 196, 0.08); color: var(--color-blue-main); display: flex; align-items: center; justify-content: center; }
.project-fact-card__heading { font-family: var(--font-display); font-size: 0.875rem; font-weight: 800; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--color-corporate); margin: 0; }
.project-fact-card__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.project-fact-item { display: flex; flex-direction: column; gap: 0.2rem; }
.project-fact-item__label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); }
.project-fact-item__val { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--color-corporate); line-height: 1.35; }
.project-fact-card__action { padding-top: var(--space-3); border-top: 1px solid rgba(166, 166, 166, 0.18); }
.btn-live-project {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.85rem 1.35rem;
  background: var(--color-blue-main) !important;
  color: #ffffff !important;
  border: 1.5px solid var(--color-blue-main) !important;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--duration-fast);
  box-shadow: 0 4px 16px rgba(11, 91, 196, 0.25);
}
.btn-live-project span { color: #ffffff !important; }
.btn-live-project:hover {
  background: var(--color-corporate) !important;
  border-color: var(--color-corporate) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(17, 24, 122, 0.25);
  color: #ffffff !important;
}
.btn-live-project:hover span { color: #ffffff !important; }
.btn-live-project__icon { stroke: #ffffff !important; color: #ffffff !important; transition: transform var(--duration-fast); }
.btn-live-project:hover .btn-live-project__icon { transform: translate(2px, -2px); }

/* ---------- 2. Browser Showcase Mockup Frame ---------- */
.project-showcase { padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem); background: var(--color-white); position: relative; }
.browser-mockup {
  background: #1e2433;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 35px 80px -15px rgba(17, 24, 122, 0.18), 0 0 0 1px rgba(17, 24, 122, 0.08);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.browser-mockup:hover { box-shadow: 0 45px 95px -15px rgba(17, 24, 122, 0.24), 0 0 0 1px rgba(11, 91, 196, 0.2); }
.browser-mockup__bar { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.25rem; background: #171b26; border-bottom: 1px solid rgba(255, 255, 255, 0.08); gap: var(--space-4); }
.browser-mockup__dots { display: flex; align-items: center; gap: 0.5rem; min-width: 54px; }
.browser-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.browser-dot--close { background: #ff5f56; }
.browser-dot--minimize { background: #ffbd2e; }
.browser-dot--maximize { background: #27c93f; }
.browser-mockup__address {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 9999px;
  padding: 0.35rem 1.25rem;
  max-width: 480px;
  width: 100%;
}
.browser-mockup__lock { color: #27c93f; flex-shrink: 0; }
.browser-mockup__domain { font-size: 0.8125rem; font-family: var(--font-sans); color: rgba(255, 255, 255, 0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser-mockup__meta { min-width: 54px; text-align: right; }
.browser-mockup__pill {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
  padding: 0.2rem 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}
.browser-mockup__screen { background: #0f1422; position: relative; line-height: 0; overflow: hidden; }
.browser-mockup__image { width: 100%; height: auto; max-height: 850px; object-fit: cover; object-position: top center; display: block; }
.video-mockup {
  background: #0b0f19;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 35px 80px -15px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.video-mockup:hover { box-shadow: 0 45px 95px -15px rgba(220, 38, 38, 0.25), 0 0 0 1px rgba(220, 38, 38, 0.3); }
.video-mockup__bar { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.5rem; background: #111624; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.video-mockup__rec { display: flex; align-items: center; gap: 0.6rem; }
.video-mockup__dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 10px #ef4444; animation: pulse-dot 2s infinite ease-in-out; }
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}
.video-mockup__label { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.9); }
.video-mockup__pill {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ef4444;
  padding: 0.25rem 0.6rem;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
}
.video-mockup__screen { background: #000000; position: relative; line-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 380px; }
.video-mockup__image { width: 100%; height: auto; max-height: 850px; object-fit: cover; display: block; }
.video-mockup__embed { width: 100%; position: relative; aspect-ratio: 16 / 9; }
.video-mockup__embed iframe { width: 100%; height: 100%; border: none; }
.video-mockup__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.95);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 35px rgba(239, 68, 68, 0.6), 0 0 0 8px rgba(255, 255, 255, 0.2);
  transition: transform var(--duration-fast), background var(--duration-fast);
  z-index: 5;
  text-decoration: none;
}
.video-mockup__play-btn svg { margin-left: 4px; }
.video-mockup:hover .video-mockup__play-btn { transform: translate(-50%, -50%) scale(1.12); background: #dc2626; box-shadow: 0 15px 45px rgba(239, 68, 68, 0.8), 0 0 0 12px rgba(255, 255, 255, 0.3); }
.campaign-mockup {
  background: #171b26;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 35px 80px -15px rgba(17, 24, 122, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.campaign-mockup:hover { box-shadow: 0 45px 95px -15px rgba(11, 91, 196, 0.28), 0 0 0 1px rgba(11, 91, 196, 0.3); }
.campaign-mockup__bar { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.5rem; background: #111520; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.campaign-mockup__title { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.9); }
.campaign-mockup__pulse { width: 9px; height: 9px; border-radius: 50%; background: #0B5BC4; box-shadow: 0 0 8px #0B5BC4; }
.campaign-mockup--social .campaign-mockup__pulse { background: #E1306C; box-shadow: 0 0 8px #E1306C; }
.campaign-mockup--graphic .campaign-mockup__pulse { background: #7C3AED; box-shadow: 0 0 8px #7C3AED; }
.campaign-mockup--content .campaign-mockup__pulse { background: #10B981; box-shadow: 0 0 8px #10B981; }
.campaign-mockup__pill {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-blue-secondary);
  padding: 0.25rem 0.6rem;
  background: rgba(22, 121, 213, 0.12);
  border: 1px solid rgba(22, 121, 213, 0.3);
  border-radius: 4px;
}
.campaign-mockup--social .campaign-mockup__pill { color: #ff648e; background: rgba(225, 48, 108, 0.12); border-color: rgba(225, 48, 108, 0.3); }
.campaign-mockup--graphic .campaign-mockup__pill { color: #a78bfa; background: rgba(124, 58, 237, 0.12); border-color: rgba(124, 58, 237, 0.3); }
.campaign-mockup--content .campaign-mockup__pill { color: #34d399; background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.3); }
.campaign-mockup__screen { background: #0b0e17; position: relative; line-height: 0; overflow: hidden; }
.campaign-mockup__image { width: 100%; height: auto; max-height: 850px; object-fit: cover; display: block; }

/* ---------- 3. Project Narrative & Case Study Body ---------- */
.project-narrative { background: var(--color-bg-light); padding: clamp(3.5rem, 7vw, 6rem) 0; }
.project-narrative__overview { max-width: 860px; margin-inline: auto; margin-bottom: clamp(3rem, 6vw, 4.5rem); text-align: left; }
.project-narrative__badge { color: var(--color-blue-main); margin-bottom: var(--space-3); }
.project-narrative__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--color-corporate);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
  line-height: 1.25;
}
.project-narrative__content.entry-content { font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); line-height: 1.85; color: #2d3748; }
.project-narrative__content.entry-content p { margin-bottom: 1.5rem; color: #2d3748; }
.project-narrative__content.entry-content p:first-of-type { font-size: clamp(1.15rem, 1.35vw, 1.25rem); color: var(--color-corporate); font-weight: 600; line-height: 1.75; }
.project-case-grid { max-width: 1040px; margin-inline: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.project-case-card {
  background: var(--color-white);
  border: 1px solid rgba(166, 166, 166, 0.28);
  border-radius: 16px;
  padding: var(--space-7);
  box-shadow: 0 8px 24px rgba(17, 24, 122, 0.04);
  transition: transform var(--duration-normal) var(--ease-default), border-color var(--duration-normal) var(--ease-default);
}
.project-case-card:hover { transform: translateY(-4px); border-color: var(--color-blue-main); }
.project-case-card--highlight { background: linear-gradient(135deg, rgba(17, 24, 122, 0.04) 0%, rgba(11, 91, 196, 0.08) 100%), var(--color-white); border-color: var(--color-blue-main); border-width: 2px; }
.project-case-card__header { display: flex; align-items: center; gap: 0.85rem; margin-bottom: var(--space-4); }
.project-case-card__step {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-blue-main);
  background: rgba(11, 91, 196, 0.08);
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-case-card__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--color-corporate); margin: 0; }
.project-case-card__body { font-size: 1rem; line-height: 1.75; color: var(--color-gray-dark); }
.project-pillars-grid { max-width: 1100px; margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.project-pillar-card {
  background: var(--color-white);
  border: 1px solid rgba(166, 166, 166, 0.28);
  border-radius: 16px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 10px 30px rgba(17, 24, 122, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.project-pillar-card:hover { transform: translateY(-5px); border-color: var(--color-blue-main); box-shadow: 0 20px 40px rgba(17, 24, 122, 0.08); }
.project-pillar-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 30%, rgba(22, 121, 213, 0.15) 0%, rgba(17, 24, 122, 0.06) 100%);
  color: var(--color-blue-main);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  border: 1px solid rgba(11, 91, 196, 0.15);
}
.project-pillar-card__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; color: var(--color-corporate); margin-bottom: var(--space-3); }
.project-pillar-card__text { font-size: 0.9375rem; line-height: 1.7; color: var(--text-secondary); margin: 0; }

/* ---------- 4. High-Conversion CTA Banner ---------- */
.project-cta-banner { background: var(--color-bg-light); padding: 0 0 clamp(4rem, 8vw, 6rem); }
.project-cta-banner__card {
  background: linear-gradient(135deg, #0d1442 0%, #11187A 50%, #0B5BC4 100%);
  border-radius: 24px;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  color: var(--color-white);
  box-shadow: 0 30px 70px rgba(17, 24, 122, 0.22);
  position: relative;
  overflow: hidden;
}
.project-cta-banner__card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(22, 121, 213, 0.35) 0%, transparent 65%);
  pointer-events: none;
}
.project-cta-banner__content { position: relative; z-index: 1; max-width: 680px; margin-inline: auto; }
.project-cta-banner__tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 0.35rem 1rem;
  border-radius: 9999px;
  margin-bottom: var(--space-4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.project-cta-banner__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-white);
  letter-spacing: -0.025em;
  margin-bottom: var(--space-4);
}
.project-cta-banner__lead { font-size: clamp(1.0625rem, 1.25vw, 1.2rem); line-height: 1.7; color: rgba(255, 255, 255, 0.88); margin-bottom: var(--space-7); }
.project-cta-banner__actions { display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-wrap: wrap; }
.project-cta-banner__actions .project-cta-banner__btn-primary, .project-cta-banner__actions .btn--primary, .project-cta-banner__actions .vivid-cta-primary {
  background: #ffffff !important;
  color: var(--color-corporate) !important;
  /* #11187A */ border: 2px solid #ffffff !important;
  font-weight: 800;
  font-size: 1rem;
  padding: 0.95rem 2.25rem;
  border-radius: 12px;
  box-shadow: 0 10px 25px -4px rgba(13, 20, 66, 0.4), 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all var(--duration-normal) var(--ease-default);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.project-cta-banner__actions .project-cta-banner__btn-primary span, .project-cta-banner__actions .btn--primary span, .project-cta-banner__actions .vivid-cta-primary span { color: var(--color-corporate) !important; }
.project-cta-banner__actions .btn-arrow { display: inline-block; margin-left: 0.4rem; color: var(--color-blue-main) !important; font-weight: 800; transition: transform var(--duration-fast), color var(--duration-fast); }
.project-cta-banner__actions .project-cta-banner__btn-primary:hover, .project-cta-banner__actions .btn--primary:hover, .project-cta-banner__actions .vivid-cta-primary:hover {
  background: #f0f7ff !important;
  color: var(--color-blue-main) !important;
  /* #0B5BC4 */ border-color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -4px rgba(13, 20, 66, 0.5), 0 0 25px rgba(255, 255, 255, 0.45);
}
.project-cta-banner__actions .project-cta-banner__btn-primary:hover span, .project-cta-banner__actions .btn--primary:hover span, .project-cta-banner__actions .vivid-cta-primary:hover span {
  color: var(--color-blue-main) !important;
}
.project-cta-banner__actions .project-cta-banner__btn-primary:hover .btn-arrow, .project-cta-banner__actions .btn--primary:hover .btn-arrow, .project-cta-banner__actions .vivid-cta-primary:hover .btn-arrow {
  transform: translateX(4px);
  color: var(--color-blue-secondary) !important;
}
.project-cta-banner__actions .project-cta-banner__btn-primary:active, .project-cta-banner__actions .btn--primary:active, .project-cta-banner__actions .vivid-cta-primary:active {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -2px rgba(13, 20, 66, 0.3);
}
.project-cta-banner__actions .project-cta-banner__btn-secondary, .project-cta-banner__actions .btn--secondary {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.95rem 2rem;
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transition: all var(--duration-normal) var(--ease-default);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.project-cta-banner__actions .project-cta-banner__btn-secondary span, .project-cta-banner__actions .btn--secondary span { color: #ffffff !important; }
.project-cta-banner__actions .project-cta-banner__btn-secondary:hover, .project-cta-banner__actions .btn--secondary:hover {
  background: #ffffff !important;
  color: var(--color-corporate) !important;
  /* #11187A */ border-color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.3);
}
.project-cta-banner__actions .project-cta-banner__btn-secondary:hover span, .project-cta-banner__actions .btn--secondary:hover span { color: var(--color-corporate) !important; }
.project-cta-banner__actions .project-cta-banner__btn-secondary:active, .project-cta-banner__actions .btn--secondary:active { transform: translateY(-1px); box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.15); }

/* ---------- 5. Prev / Next Navigation Bar ---------- */
.project-nav-bar { background: var(--color-white); border-top: 1px solid rgba(166, 166, 166, 0.22); padding: var(--space-7) 0; }
.project-nav-bar__grid { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.project-nav-tile { display: flex; align-items: center; gap: 1rem; text-decoration: none; max-width: 380px; transition: transform var(--duration-fast); }
.project-nav-tile--prev:hover { transform: translateX(-4px); }
.project-nav-tile--next:hover { transform: translateX(4px); }
.project-nav-tile__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(166, 166, 166, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  color: var(--color-blue-main);
  background: var(--color-bg-light);
  flex-shrink: 0;
  transition: all var(--duration-fast);
}
.project-nav-tile:hover .project-nav-tile__arrow { background: var(--color-blue-main); color: var(--color-white); border-color: var(--color-blue-main); }
.project-nav-tile__meta { display: flex; flex-direction: column; gap: 0.2rem; }
.project-nav-tile__label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); }
.project-nav-tile__title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--color-corporate); transition: color var(--duration-fast); }
.project-nav-tile:hover .project-nav-tile__title { color: var(--color-blue-main); }
.project-nav-tile__center {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(166, 166, 166, 0.3);
  background: var(--color-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-corporate);
  text-decoration: none;
  transition: all var(--duration-fast);
}
.project-nav-tile__center:hover { background: var(--color-blue-main); color: var(--color-white); border-color: var(--color-blue-main); }
.project-nav-tile--disabled { opacity: 0.4; pointer-events: none; }

/* ---------- 3. PROJECTS (Projeler - Archive & Single) DETAILED RESPONSIVE ---------- */

@media (max-width: 1024px) {
  .projects-archive-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}

@media (max-width: 960px) {
  .project-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .page-header--projects { padding-top: calc(75px + var(--space-6)); padding-bottom: var(--space-6); }
  .page-header--projects .page-header__title { font-size: clamp(2.2rem, 6vw, 3.25rem); }
  .project-hero__main { max-width: 100%; }
  .project-fact-card { max-width: 100%; width: 100%; }
  .projects-archive-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .project-case-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .project-pillars-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

@media (max-width: 860px) {
  .project-pillars-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

@media (max-width: 820px) {
  .filter-bar { padding: var(--space-3) 0; }
  .filter-bar .container { padding-inline: 0; }
  .filter-bar__list { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-inline: var(--container-padding); padding-bottom: 2px; }
  .filter-bar__list::-webkit-scrollbar { display: none; }
  .filter-bar__link { white-space: nowrap; flex-shrink: 0; padding: 0.45rem 1.15rem; font-size: 0.8125rem; }
}

@media (max-width: 782px) {
  .admin-bar .project-hero { padding-top: calc(136px + clamp(2rem, 4vw, 3.5rem)); }
}

@media (max-width: 768px) {
  .project-case-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

@media (max-width: 640px) {
  .projects-archive-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .browser-mockup { border-radius: 14px; }
  .browser-mockup__bar { padding: 0.6rem 0.8rem; gap: 0.4rem; }
  .browser-mockup__dots { min-width: 42px; gap: 0.35rem; }
  .browser-dot { width: 9px; height: 9px; }
  .browser-mockup__meta { display: none; min-width: 42px; }
  .browser-mockup__address { padding: 0.25rem 0.75rem; }
  .browser-mockup__domain { font-size: 0.75rem; }
  .video-mockup, .campaign-mockup { border-radius: 14px; }
  .video-mockup__bar, .campaign-mockup__bar { padding: 0.65rem 0.85rem; }
  .video-mockup__play-btn { width: 60px; height: 60px; }
  .video-mockup__play-btn svg { width: 24px; height: 24px; }
  .project-cta-banner__actions { flex-direction: column; width: 100%; gap: var(--space-3); }
  .project-cta-banner__actions .btn { width: 100%; max-width: 100%; justify-content: center; text-align: center; }
  .project-nav-bar__grid { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .project-nav-tile { max-width: 100%; justify-content: flex-start; padding: 0.75rem 0.9rem; background: var(--color-bg-light); border-radius: 12px; }
  .project-nav-tile--next { flex-direction: row-reverse; text-align: right; }
  .project-nav-tile__center { align-self: center; order: 3; margin-top: 0; width: 100%; height: 42px; border-radius: 10px; }
  .project-hero__topbar { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .project-hero__title { font-size: clamp(1.95rem, 7.5vw, 2.75rem); line-height: 1.15; margin-bottom: var(--space-3); }
  .project-hero__lead { font-size: 0.98rem; line-height: 1.6; margin-bottom: var(--space-4); }
  .project-hero__tags { gap: 0.35rem; }
  .project-tag { font-size: 0.75rem; padding: 0.25rem 0.6rem; }
  .project-fact-card { padding: 1.25rem 1.1rem; border-radius: 16px; }
  .project-showcase { padding: var(--space-5) 0 var(--space-6); }
  .browser-mockup__pill { font-size: 0.62rem; }
  .browser-mockup__image { max-height: 480px; }
  .project-case-card { padding: 1.25rem 1.1rem; border-radius: 14px; }
  .project-case-card__step { width: 36px; height: 36px; font-size: 1.05rem; }
  .project-case-card__title { font-size: 1.12rem; }
  .project-case-card__body { font-size: 0.9rem; line-height: 1.6; }
  .project-pillar-card { padding: 1.25rem 1.1rem; border-radius: 14px; }
  .project-pillar-card__icon { width: 44px; height: 44px; margin-bottom: var(--space-4); }
  .project-pillar-card__title { font-size: 1.1rem; }
  .project-pillar-card__text { font-size: 0.88rem; line-height: 1.6; }
  .project-cta-banner__card { padding: 2rem 1.25rem; border-radius: 18px; }
  .project-cta-banner__title { font-size: clamp(1.6rem, 5.5vw, 2.2rem); }
  .project-cta-banner__lead { font-size: 0.925rem; line-height: 1.55; margin-bottom: var(--space-5); }
  .project-nav-bar { padding: var(--space-5) 0; }
}

@media (max-width: 480px) {
  .project-fact-card__list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SINGLE POST (Blog Yazı Detayı)
   ========================================================================== */

.post-single { background-color: var(--color-white); min-height: 80vh; }
.post-single__header {
  padding-top: calc(76px + clamp(1.25rem, 2.5vw, 2rem));
  padding-bottom: clamp(1.25rem, 2vw, 1.75rem);
  background: radial-gradient(ellipse at 85% 15%, rgba(22, 121, 213, 0.08) 0%, transparent 60%), radial-gradient(ellipse at 15% 85%, rgba(11, 91, 196, 0.05) 0%, transparent 55%), linear-gradient(180deg, #FFFFFF 0%, var(--color-bg-light) 100%);
  border-bottom: 1px solid rgba(166, 166, 166, 0.22);
  position: relative;
}
.admin-bar .post-single__header { padding-top: calc(108px + clamp(1.25rem, 2.5vw, 2rem)); }
.post-single__header .breadcrumb { margin-bottom: 0.75rem; font-size: var(--fs-caption); color: var(--text-secondary); }
.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1.25rem; margin-bottom: 0.85rem; font-size: var(--fs-caption); color: var(--text-secondary); font-weight: 500; }
.post-meta__category {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: rgba(11, 91, 196, 0.1);
  border: 1px solid rgba(11, 91, 196, 0.2);
  color: var(--color-blue-main);
  font-weight: 700;
  text-decoration: none;
  transition: all var(--duration-fast);
}
.post-meta__category:hover { background: var(--color-blue-main); color: #ffffff; }
.post-meta__item { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-secondary); }
.post-meta__item svg { color: var(--color-blue-main); flex-shrink: 0; }
.post-single__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 2.75vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--color-corporate);
  margin-bottom: 0.75rem;
  max-width: 100%;
}
.post-single__lead { font-size: clamp(1.0625rem, 1.2vw, 1.2rem); line-height: 1.6; color: var(--text-secondary); margin-bottom: 0; font-weight: 400; max-width: 90ch; }
.post-single__feature-image { margin-top: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.post-single__feature-img { width: 100%; height: auto; max-height: 500px; object-fit: cover; border-radius: 16px; box-shadow: 0 20px 50px rgba(17, 24, 122, 0.08); border: 1px solid rgba(166, 166, 166, 0.25); }
.post-single__body { padding-top: clamp(1.75rem, 3vw, 2.5rem); padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.post-single__share-bar { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.25rem; margin-bottom: 2rem; border-bottom: 1px solid rgba(166, 166, 166, 0.2); }
.post-single__share-label { font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.post-single__share-links { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.post-single__share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  background: var(--color-bg-light);
  border: 1px solid rgba(166, 166, 166, 0.25);
  color: var(--color-corporate);
  transition: all var(--duration-fast);
}
.post-single__share-btn svg { width: 15px; height: 15px; }
.post-single__share-btn--whatsapp:hover { background: #25D366; border-color: #25D366; color: #ffffff; }
.post-single__share-btn--linkedin:hover { background: #0A66C2; border-color: #0A66C2; color: #ffffff; }
.post-single__share-btn--twitter:hover { background: #111111; border-color: #111111; color: #ffffff; }
.entry-content { font-size: 1.0625rem; line-height: 1.8; color: #2D3748; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content > p:first-of-type { font-size: 1.15rem; line-height: 1.75; color: var(--color-corporate); font-weight: 500; }
.entry-content p { margin-bottom: 1.5rem; line-height: 1.8; }
.entry-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--color-corporate);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.3;
  padding-left: 0.85rem;
  border-left: 4px solid var(--color-blue-main);
}
.entry-content h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-corporate);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  line-height: 1.35;
}
.entry-content h4 { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--color-corporate); margin-top: 1.5rem; margin-bottom: 0.5rem; }
.entry-content strong { font-weight: 700; color: var(--color-corporate); }
.entry-content ul, .entry-content ol { margin-bottom: 1.75rem; padding-left: 1.5rem; }
.entry-content ul li, .entry-content ol li { margin-bottom: 0.65rem; line-height: 1.75; }
.entry-content ul li::marker { color: var(--color-blue-main); }
.entry-content blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.75rem;
  background: var(--color-bg-light);
  border-left: 4px solid var(--color-blue-main);
  border-radius: 0 12px 12px 0;
  font-style: italic;
  font-size: 1.125rem;
  color: var(--color-corporate);
}
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content img { border-radius: 12px; margin: 2rem 0; box-shadow: 0 12px 35px rgba(17, 24, 122, 0.08); }
.entry-content a { color: var(--color-blue-main); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; transition: color var(--duration-fast); }
.entry-content a:hover { color: var(--color-corporate); }
.post-pagination { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(166, 166, 166, 0.2); }
.post-single__cta { padding-bottom: clamp(3rem, 5vw, 4.5rem); }
.post-single__cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: clamp(2rem, 4vw, 3rem);
  background: radial-gradient(ellipse at 90% 20%, rgba(22, 121, 213, 0.2) 0%, transparent 60%), radial-gradient(ellipse at 10% 80%, rgba(11, 91, 196, 0.15) 0%, transparent 60%), linear-gradient(135deg, #11187A 0%, #0B1048 100%);
  border-radius: 20px;
  color: #ffffff;
  box-shadow: 0 20px 50px rgba(17, 24, 122, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.post-single__cta-badge {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-blue-light);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.post-single__cta-title { font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 800; color: #ffffff; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.post-single__cta-desc { font-size: var(--fs-body-sm); color: var(--color-light); line-height: 1.6; margin: 0; max-width: 50ch; }
.post-single__cta-action { flex-shrink: 0; }
.post-single__cta-action .btn { padding: 0.85rem 1.85rem; font-size: 0.9375rem; }
.post-single__footer-nav { padding-bottom: clamp(3rem, 6vw, 5rem); }
.post-single__back-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 700; color: var(--color-blue-main); text-decoration: none; transition: all var(--duration-fast); }
.post-single__back-link:hover { color: var(--color-corporate); transform: translateX(-4px); }

/* ---------- 4. BLOG (Blog - Archive & Single) DETAILED RESPONSIVE ---------- */

@media (max-width: 991px) {
  .page-header--blog { padding-top: calc(75px + var(--space-6)); padding-bottom: var(--space-5); }
  .page-header--blog .page-header__title { font-size: clamp(2.2rem, 6vw, 3.25rem); }
  .blog-archive__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .post-single__title { font-size: clamp(2.2rem, 5.5vw, 3.25rem); }
}

@media (max-width: 860px) {
  .post-single__cta-box { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .post-single__cta-action { width: 100%; }
  .post-single__cta-action .btn { width: 100%; justify-content: center; }
}

@media (max-width: 782px) {
  .admin-bar .post-single__header { padding-top: calc(122px + clamp(1rem, 2vw, 1.5rem)); }
}

@media (max-width: 640px) {
  .blog-archive__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .post-card { border-radius: 14px; }
  .post-card__title { font-size: 1.18rem; line-height: 1.35; margin-bottom: 0.45rem; }
  .post-card__excerpt { font-size: 0.875rem; line-height: 1.6; margin-bottom: 1rem; }
  .post-single__header { padding-top: calc(75px + var(--space-5)); padding-bottom: var(--space-4); }
  .post-single__title { font-size: clamp(1.85rem, 7vw, 2.75rem); line-height: 1.2; margin-bottom: var(--space-3); }
  .post-single__lead { font-size: 1rem; line-height: 1.6; }
  .post-single__feature-image { margin-bottom: var(--space-4); }
  .post-single__feature-img { border-radius: 12px; max-height: 320px; object-fit: cover; }
  .post-single__share-bar { flex-direction: column; align-items: flex-start; gap: 0.65rem; padding: 1rem 1.15rem; border-radius: 12px; }
  .post-single__share-links { display: flex; flex-wrap: wrap; gap: 0.45rem; width: 100%; }
  .post-single__share-btn { flex: 1 1 auto; justify-content: center; padding: 0.65rem 0.85rem; font-size: 0.8125rem; }
  .entry-content { font-size: 1rem; line-height: 1.7; }
  .entry-content h2 { font-size: 1.4rem; margin-top: 1.75rem; margin-bottom: 0.75rem; padding-left: 0.65rem; border-left-width: 3px; }
  .entry-content h3 { font-size: 1.2rem; margin-top: 1.4rem; margin-bottom: 0.5rem; }
  .entry-content ul, .entry-content ol { padding-left: 1.25rem; margin-bottom: 1.35rem; }
  .entry-content blockquote { padding: 0.85rem 1rem; font-size: 0.95rem; margin-block: 1.35rem; }
  .post-single__cta-box { flex-direction: column; align-items: stretch; gap: var(--space-4); padding: 1.35rem 1.15rem; border-radius: 16px; }
  .post-single__cta-action .btn { width: 100%; justify-content: center; text-align: center; }
}

/* ==========================================================================
   BIO LINKS (TAPLINK) PAGE TEMPLATE — STUDIO EDITORIAL
   ========================================================================== */

.bio-page {
  position: relative;
  min-height: 100vh;
  background-color: #F8FAFC;
  padding-top: calc(90px + clamp(1.5rem, 4vw, 3rem));
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  overflow-x: hidden;
}
.admin-bar .bio-page { padding-top: calc(122px + clamp(1.5rem, 4vw, 3rem)); }
.bio-container { max-width: 680px; margin: 0 auto; position: relative; z-index: 2; }
.bio-header { text-align: center; margin-bottom: 2.5rem; }
.bio-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.95rem;
  background: #ffffff;
  border: 1px solid rgba(166, 166, 166, 0.28);
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-corporate);
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 10px rgba(17, 24, 122, 0.04);
}
.bio-status-dot { width: 7px; height: 7px; border-radius: 50%; background-color: #10B981; box-shadow: 0 0 10px #10B981; animation: pulse-dot 2s infinite ease-in-out; }
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.bio-avatar-wrap { position: relative; display: inline-block; margin-bottom: 1.15rem; }
.bio-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(166, 166, 166, 0.28);
  box-shadow: 0 8px 24px rgba(17, 24, 122, 0.06);
  overflow: hidden;
}
.bio-avatar__img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.bio-avatar__badge {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #0B5BC4 0%, #1679D5 100%);
  color: #ffffff;
  border-radius: 50%;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(11, 91, 196, 0.45);
}
.bio-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 800; color: var(--color-corporate); margin: 0 0 0.5rem 0; letter-spacing: -0.025em; }
.bio-tagline { font-size: 0.95rem; color: #555555; margin: 0 auto 1.75rem auto; max-width: 44ch; line-height: 1.5; }
.bio-quick-actions { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 1.6rem; }
.bio-btn { display: flex; align-items: center; border-radius: 14px; text-decoration: none; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.bio-btn--whatsapp {
  padding: 1.05rem 1.35rem;
  background: linear-gradient(135deg, #25D366 0%, #1eb956 100%);
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.bio-btn--whatsapp:hover { background: linear-gradient(135deg, #22be5c 0%, #199e49 100%); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45); }
.bio-btn--whatsapp .bio-btn__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.85rem;
  flex-shrink: 0;
}
.bio-btn--whatsapp .bio-btn__text { flex-grow: 1; text-align: left; }
.bio-btn--whatsapp .bio-btn__label { display: block; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.bio-btn--whatsapp .bio-btn__sub { display: block; font-size: 0.785rem; opacity: 0.9; font-weight: 500; }
.bio-btn--whatsapp .bio-btn__arrow { font-size: 1.25rem; font-weight: 800; margin-left: 0.5rem; transition: transform 0.2s ease; }
.bio-btn--whatsapp:hover .bio-btn__arrow { transform: translateX(4px); }
.bio-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.bio-btn--subtle {
  justify-content: center;
  gap: 0.55rem;
  padding: 0.9rem 1.15rem;
  background: #ffffff;
  color: var(--color-corporate) !important;
  border: 1px solid rgba(166, 166, 166, 0.25);
  font-size: 0.925rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(17, 24, 122, 0.04);
}
.bio-btn--subtle:hover { border-color: var(--color-blue-main); color: var(--color-blue-main) !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(11, 91, 196, 0.12); }
.bio-btn__mini-icon { display: flex; align-items: center; color: var(--color-blue-main); }
.bio-socials { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding-top: 0.4rem; }
.bio-socials__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: #ffffff;
  border: 1px solid rgba(166, 166, 166, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.22s ease;
  box-shadow: 0 3px 10px rgba(17, 24, 122, 0.04);
}
.bio-socials__icon--ig { color: #E1306C; }
.bio-socials__icon--tt { color: #000000; }
.bio-socials__icon--yt { color: #FF0000; }
.bio-socials__icon--li { color: #0A66C2; }
.bio-socials__icon--fb { color: #1877F2; }
.bio-socials__icon--x { color: #000000; }
.bio-socials__icon:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(17, 24, 122, 0.12); }
.bio-socials__icon--ig:hover { background: #E1306C; color: #ffffff; border-color: #E1306C; }
.bio-socials__icon--tt:hover { background: #000000; color: #ffffff; border-color: #000000; }
.bio-socials__icon--yt:hover { background: #FF0000; color: #ffffff; border-color: #FF0000; }
.bio-socials__icon--li:hover { background: #0A66C2; color: #ffffff; border-color: #0A66C2; }
.bio-socials__icon--fb:hover { background: #1877F2; color: #ffffff; border-color: #1877F2; }
.bio-socials__icon--x:hover { background: #000000; color: #ffffff; border-color: #000000; }
.bio-controls { margin-bottom: 2.25rem; display: flex; flex-direction: column; gap: 1.15rem; }
.bio-search-box { position: relative; width: 100%; }
.bio-search-icon { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: #7A8290; pointer-events: none; }
.bio-search-input {
  width: 100%;
  padding: 0.95rem 2.75rem 0.95rem 3rem;
  font-size: 0.95rem;
  background-color: #ffffff;
  border: 1px solid rgba(166, 166, 166, 0.3);
  border-radius: 14px;
  color: var(--color-corporate);
  box-shadow: 0 3px 12px rgba(17, 24, 122, 0.04);
  transition: all 0.22s ease;
}
.bio-search-input:focus { outline: none; border-color: var(--color-blue-main); box-shadow: 0 0 0 4px rgba(11, 91, 196, 0.12); }
.bio-search-clear {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.35rem;
  color: #888888;
  cursor: pointer;
  display: none;
  line-height: 1;
}
.bio-tabs { display: flex; align-items: center; gap: 0.55rem; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.bio-tabs::-webkit-scrollbar { display: none; }
.bio-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.2rem;
  border-radius: 9999px;
  background-color: #ffffff;
  border: 1px solid rgba(166, 166, 166, 0.25);
  color: #444444;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s ease;
  box-shadow: 0 2px 6px rgba(17, 24, 122, 0.03);
}
.bio-tab__badge { font-size: 0.725rem; padding: 0.1rem 0.45rem; border-radius: 9999px; background: rgba(0, 0, 0, 0.06); color: inherit; font-family: var(--font-mono, monospace); line-height: 1; }
.bio-tab.is-active { background-color: var(--color-corporate); border-color: var(--color-corporate); color: #ffffff; box-shadow: 0 6px 18px rgba(17, 24, 122, 0.22); }
.bio-tab.is-active .bio-tab__badge { background: rgba(255, 255, 255, 0.22); color: #ffffff; }
.bio-feed { display: flex; flex-direction: column; gap: 2.5rem; }
.bio-group { transition: opacity 0.2s ease; }
.bio-group__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.15rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(166, 166, 166, 0.2); }
.bio-group__title-wrap { display: flex; align-items: center; gap: 0.85rem; }
.bio-group__pill { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bio-group__pill--web { background: rgba(11, 91, 196, 0.1); color: #0B5BC4; }
.bio-group__pill--ig { background: rgba(225, 48, 108, 0.1); color: #E1306C; }
.bio-group__pill--tt { background: rgba(0, 0, 0, 0.08); color: #000000; }
.bio-group__pill--fb { background: rgba(24, 119, 242, 0.1); color: #1877F2; }
.bio-group__pill--ot { background: rgba(10, 102, 194, 0.1); color: #0A66C2; }
.bio-group__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: var(--color-corporate); margin: 0; letter-spacing: -0.015em; line-height: 1.25; }
.bio-group__sub { font-size: 0.8125rem; color: #666666; margin: 0.15rem 0 0 0; }
.bio-group__count-tag {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-blue-main);
  background: rgba(11, 91, 196, 0.08);
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  font-family: var(--font-mono, monospace);
  flex-shrink: 0;
}
.bio-group__grid { display: flex; flex-direction: column; gap: 0.85rem; }
.bio-card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.15rem 1.35rem;
  background-color: #ffffff;
  border: 1px solid rgba(166, 166, 166, 0.22);
  border-radius: 16px;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(17, 24, 122, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.bio-card::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; opacity: 0; transition: opacity 0.22s ease; }
.bio-card--web::before { background: #0B5BC4; }
.bio-card--ig::before { background: #E1306C; }
.bio-card--tt::before { background: #000000; }
.bio-card--fb::before { background: #1877F2; }
.bio-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(17, 24, 122, 0.1); }
.bio-card--web:hover { border-color: rgba(11, 91, 196, 0.4); }
.bio-card--ig:hover { border-color: rgba(225, 48, 108, 0.4); }
.bio-card--tt:hover { border-color: rgba(0, 0, 0, 0.35); }
.bio-card--fb:hover { border-color: rgba(24, 119, 242, 0.4); }
.bio-card:hover::before { opacity: 1; }
.bio-card__brand-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.25s ease; }
.bio-card:hover .bio-card__brand-icon { transform: scale(1.06); }
.bio-card__brand-icon--web { background: rgba(11, 91, 196, 0.08); color: #0B5BC4; }
.bio-card__brand-icon--ig { background: linear-gradient(135deg, rgba(225, 48, 108, 0.1) 0%, rgba(131, 58, 180, 0.1) 100%); color: #E1306C; }
.bio-card__brand-icon--tt { background: rgba(0, 0, 0, 0.07); color: #000000; }
.bio-card__brand-icon--fb { background: rgba(24, 119, 242, 0.1); color: #1877F2; }
.bio-card__body { flex-grow: 1; min-width: 0; }
.bio-card__title {
  font-family: var(--font-display);
  font-size: 1.025rem;
  font-weight: 800;
  color: var(--color-corporate);
  margin: 0 0 0.2rem 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}
.bio-card:hover .bio-card__title { color: var(--color-blue-main); }
.bio-card__subtitle { font-size: 0.8125rem; color: #666666; margin: 0 0 0.4rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.bio-card__badge-pill { display: inline-block; font-size: 0.6875rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 9999px; line-height: 1.3; }
.bio-card__badge-pill--web { background: rgba(11, 91, 196, 0.08); color: #0B5BC4; }
.bio-card__badge-pill--ig { background: rgba(225, 48, 108, 0.08); color: #E1306C; }
.bio-card__badge-pill--tt { background: rgba(0, 0, 0, 0.06); color: #111111; }
.bio-card__badge-pill--fb { background: rgba(24, 119, 242, 0.08); color: #1877F2; }
.bio-card__action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  background: #F5F7FA;
  color: var(--color-corporate);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid rgba(166, 166, 166, 0.2);
  transition: all 0.22s ease;
}
.bio-card:hover .bio-card__action-btn { background: var(--color-blue-main); border-color: var(--color-blue-main); color: #ffffff; transform: translateX(2px); }
.bio-no-results { text-align: center; padding: 3.5rem 1.5rem; background: #ffffff; border-radius: 16px; border: 1px dashed rgba(166, 166, 166, 0.35); }
.bio-no-results__icon { font-size: 2.25rem; margin-bottom: 0.75rem; }
.bio-no-results h3 { font-size: 1.15rem; font-weight: 800; color: var(--color-corporate); margin: 0 0 0.5rem 0; }
.bio-no-results p { font-size: 0.875rem; color: #666666; margin: 0; }

/* ---------- 6. CANLI REFERANSLAR (Bio Link / Taplink) ZERO-ERROR RESPONSIVE ---------- */

/* ==========================================================================
   BIO LINKS (TAPLINK) RESPONSIVE FRAMEWORK (TABLET & MOBILE)
   ========================================================================== */

@media (max-width: 782px) {
  .admin-bar .bio-page { padding-top: calc(136px + clamp(1.5rem, 4vw, 3rem)); }
}

@media (max-width: 768px) {
  .bio-page { padding-top: calc(85px + 1.75rem); padding-bottom: 4rem; padding-inline: 1rem; padding-left: 1.15rem; padding-right: 1.15rem; }
  .bio-container { max-width: 580px; }
  .bio-header { margin-bottom: 2rem; }
  .bio-avatar { width: 88px; height: 88px; }
  .bio-title { font-size: 1.65rem; }
  .bio-tagline { font-size: 0.9rem; margin-bottom: 1.5rem; }
  .bio-controls { margin-bottom: 1.5rem; }
  .bio-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0.45rem; padding-bottom: 6px; margin-bottom: 1.25rem; }
  .bio-tabs::-webkit-scrollbar { display: none; }
  .bio-tab { flex-shrink: 0; white-space: nowrap; padding: 0.45rem 0.95rem; font-size: 0.8125rem; }
  .bio-avatar__badge { width: 26px; height: 26px; font-size: 0.75rem; }
  .bio-btn--whatsapp { padding: 0.95rem 1.15rem; }
  .bio-btn--whatsapp .bio-btn__icon { width: 38px; height: 38px; }
  .bio-card { padding: 1rem 1.15rem; }
}

@media (max-width: 540px) {
  .bio-page { padding-top: calc(80px + 1.5rem); padding-bottom: 3.5rem; padding-inline: 0.75rem; padding-left: 0.85rem; padding-right: 0.85rem; }
  .bio-status-pill { font-size: 0.625rem; padding: 0.3rem 0.75rem; margin-bottom: 1rem; letter-spacing: 0.04em; }
  .bio-avatar { width: 80px; height: 80px; }
  .bio-avatar__badge { width: 24px; height: 24px; font-size: 0.7rem; }
  .bio-title { font-size: 1.45rem; margin-bottom: 0.35rem; }
  .bio-tagline { font-size: 0.85rem; line-height: 1.45; margin-bottom: 1.25rem; padding-inline: 0.25rem; padding: 0 0.5rem; }
  .bio-quick-actions { gap: 0.65rem; margin-bottom: 1.15rem; }
  .bio-btn--whatsapp { padding: 0.85rem 1rem; border-radius: 12px; gap: 0.75rem; }
  .bio-btn--whatsapp .bio-btn__label { font-size: 0.925rem; }
  .bio-btn--whatsapp .bio-btn__sub { font-size: 0.75rem; }
  .bio-actions-row { flex-direction: column; gap: 0.65rem; }
  .bio-btn--subtle { width: 100%; justify-content: center; padding: 0.85rem 1rem; font-size: 0.875rem; min-height: 44px; }
  .bio-socials { gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
  .bio-socials__icon { width: 42px; height: 42px; border-radius: 10px; }
  .bio-search-box { margin-bottom: 0.75rem; }
  .bio-search-input { font-size: 16px !important; height: 46px; border-radius: 12px; padding-left: 2.6rem; }
  .bio-group { margin-bottom: 1.5rem; }
  .bio-group__header { margin-bottom: 0.75rem; gap: 0.5rem; }
  .bio-group__title { font-size: 1.1rem; }
  .bio-group__sub { font-size: 0.75rem; }
  .bio-group__count-tag { font-size: 0.65rem; padding: 0.2rem 0.5rem; }
  .bio-card { padding: 0.85rem 1rem; gap: 0.85rem; border-radius: 12px; }
  .bio-card__brand-icon { width: 42px; height: 42px; min-width: 42px; border-radius: 10px; }
  .bio-card__brand-icon svg { width: 20px; height: 20px; }
  .bio-card__title { font-size: 0.925rem; line-height: 1.3; }
  .bio-card__subtitle { font-size: 0.775rem; margin-bottom: 0.25rem; line-height: 1.35; }
  .bio-card__badge-pill { font-size: 0.65rem; padding: 0.15rem 0.45rem; }
  .bio-card__action-btn { padding: 0.45rem; min-width: 32px; min-height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
  .bio-card__action-btn span { display: none; }
  .bio-avatar__img { padding: 4px; }
  .bio-tabs { -webkit-overflow-scrolling: touch; padding-bottom: 8px; gap: 0.45rem; }
  .bio-tab { padding: 0.5rem 0.95rem; font-size: 0.8rem; }
}

@media (max-width: 375px) {
  .bio-page { padding-inline: 0.5rem; padding-top: calc(75px + 1.25rem); padding-bottom: 3rem; padding-left: 0.65rem; padding-right: 0.65rem; }
  .bio-title { font-size: 1.35rem; }
  .bio-btn--whatsapp .bio-btn__sub { font-size: 0.7rem; }
  .bio-card { padding: 0.75rem 0.85rem; gap: 0.65rem; }
  .bio-card__brand-icon { width: 38px; height: 38px; min-width: 38px; }
  .bio-card__title { font-size: 0.875rem; }
  .bio-socials__icon { width: 38px; height: 38px; }
}