/* ============================================================
   PROCAPITAL INVESTMENT — v4 Design System
   Premium Yatırım Fonu Estetik
   ============================================================ */

/* Fontlar header.php'de <link> ile yüklenir (render-blocking değil) */

/* ── Token değişkenleri ───────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-base:        #0a0d14;
  --bg-section:     #0f1320;
  --bg-elevated:    #15192a;
  --ink-blue:       #0e1422;

  /* Accents */
  --accent:         #c9a84c;
  --accent-warm:    #8a7a3e;

  /* Text */
  --text-primary:   #ffffff;
  --text-body:      #b8bcc8;
  --text-muted:     #8089a0;

  /* Lines */
  --border-subtle:  rgba(255,255,255,0.08);
  --border-medium:  rgba(255,255,255,0.16);

  /* States */
  --error:          #e07b7b;
  --success:        #7ba87b;

  /* Fonts */
  --font-sans:      'Manrope', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-serif:     'Fraunces', Georgia, 'Times New Roman', serif;

  /* Eski tema değişkenleri ezildi */
  --theme-color1:     #c9a84c;
  --theme-color1-rgb: 201, 168, 76;
  --theme-color2:     #0a0d14;
  --theme-color2-rgb: 10, 13, 20;
  --theme-color-dark: #0a0d14;
  --bg-theme-color1:  #c9a84c;
  --bg-theme-color2:  #0a0d14;
  --headings-color:   #ffffff;
  --link-color:       #ffffff;
  --link-hover-color: #c9a84c;
}

/* ── Base ─────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  color: var(--text-body);
  background-color: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
}
.boxed_wrapper {
  background-color: var(--bg-base);
  overflow-x: hidden;
}

/* ── Tipografi ────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-serif);
  color: var(--text-primary);
  font-weight: 500;
  margin: 0 0 0.5em;
  letter-spacing: 0;
}
h1 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.1; }
h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.15; }
h3 { font-family: var(--font-sans); font-size: clamp(20px, 2vw, 28px); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
h4 { font-family: var(--font-sans); font-size: 18px; font-weight: 600; line-height: 1.3; }
h5 { font-family: var(--font-sans); font-size: 16px; font-weight: 600; }
h6 { font-family: var(--font-sans); font-size: 14px; font-weight: 600; }

p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0 0 1em;
}

a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color 200ms ease;
}
a:hover { color: var(--accent); }

/* Caption / etiket */
.eyebrow,
.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin: 0 0 1em;
  display: inline-block;
}

/* ── Container ────────────────────────────────────────── */
.container,
.auto-container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding-inline: 24px;
}
.inner-container {
  max-width: 1140px;
  margin-inline: auto;
}

/* ── Section spacing ──────────────────────────────────── */
section {
  padding-block: 140px;
  background-color: var(--bg-base);
}
section.section-elevated {
  background-color: var(--bg-section);
}
@media (max-width: 991.98px) {
  section { padding-block: 80px; }
}

/* ── Buton sistemi ────────────────────────────────────── */
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  padding-block: 4px;
  border-block-end: 1px solid var(--accent);
  border-block-start: 0;
  border-inline: 0;
  background: transparent;
  cursor: pointer;
  transition: color 200ms ease, gap 200ms ease;
}
.btn-line:hover {
  color: var(--accent);
  gap: 16px;
}
.btn-line .arrow {
  transition: transform 200ms ease;
}
.btn-line:hover .arrow {
  transform: translateX(4px);
}

.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--bg-base);
  background: var(--accent);
  border: 1px solid var(--accent);
  padding: 16px 32px;
  text-decoration: none;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.btn-gold:hover {
  background: transparent;
  color: var(--accent);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
  padding: 16px 32px;
  background: transparent;
  text-decoration: none;
  transition: border-color 200ms ease, color 200ms ease;
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Eski tema buton override (geriye uyum) */
.btn-one,
.btn-two {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 15px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: 0 !important;
  padding: 16px 32px !important;
  transition: all 200ms ease !important;
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: var(--bg-base) !important;
}
.btn-one:hover,
.btn-two:hover {
  background: transparent !important;
  color: var(--accent) !important;
}
.btn-one::after,
.btn-two::after { display: none !important; }

/* ── Form ─────────────────────────────────────────────── */
input, textarea, select {
  font-family: var(--font-sans);
  font-size: 16px;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: 16px;
  width: 100%;
  transition: border-color 200ms ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
}
input::placeholder, textarea::placeholder {
  color: var(--text-muted);
}
label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  display: block;
  margin-block-end: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.form-error  { color: var(--error);   font-size: 13px; margin-block-start: 4px; }
.form-success{ color: var(--success); font-size: 13px; margin-block-start: 4px; }

/* ── Selection & Scrollbar ────────────────────────────── */
::selection {
  background: var(--accent);
  color: var(--bg-base);
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-medium) var(--bg-base);
}
*::-webkit-scrollbar       { width: 8px; }
*::-webkit-scrollbar-track { background: var(--bg-base); }
*::-webkit-scrollbar-thumb { background: var(--border-medium); }

/* ── Focus visible (a11y) ─────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Skip link (a11y) ─────────────────────────────────── */
.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: 0;
  background: var(--accent);
  color: var(--bg-base);
  padding: 12px 16px;
  font-weight: 500;
  z-index: 9999;
  transition: top 200ms ease;
}
.skip-link:focus {
  inset-block-start: 0;
}

/* ── Reveal animasyonu (IntersectionObserver) ────────── */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Preloader (minimal spinner) ──────────────────────── */
.preloader {
  background: var(--bg-base) !important;
}
.preloader::after {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 2px solid var(--border-subtle);
  border-block-start-color: var(--accent);
  border-radius: 50%;
  background: none !important;
  content: "";
  animation: pcp-spin 800ms linear infinite;
}
.preloader::before {
  display: none !important;
}
@keyframes pcp-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── Header (beyaz zemin — lacivert logo görünür olsun) ── */
.main-header {
  background: #ffffff;
  border-block-end: 1px solid rgba(14, 20, 34, 0.10);
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
}
.main-header .header-top {
  display: none;
}
.main-header .main-box {
  background: #ffffff;
  box-shadow: none;
  padding-block: 16px;
}
.main-header.fixed-header .main-box {
  background: #ffffff;
}
.main-header .logo-box .logo img,
.sticky-header .logo img {
  max-height: 84px;
  width: auto;
}
/* Mobil menü paneli koyu zeminli — beyaz logo orada kalır */
.main-header .nav-logo img {
  max-height: 68px;
  width: auto;
}
@media (max-width: 991.98px) {
  .main-header .logo-box .logo img,
  .sticky-header .logo img {
    max-height: 60px;
  }
}

/* Navigation */
.main-menu .navigation > li {
  background: transparent !important;
}
.main-menu .navigation > li > a {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-blue) !important;
  letter-spacing: 0;
  text-transform: none;
  padding: 24px 16px;
  background: transparent !important;
  transition: color 200ms ease;
}
.main-menu .navigation > li:hover,
.main-menu .navigation > li:hover > a,
.main-menu .navigation > li.current > a,
.main-menu .navigation > li.current-menu-item > a {
  background: transparent !important;
  color: var(--accent) !important;
}
.main-menu .navigation > li > a::before,
.main-menu .navigation > li > a::after {
  display: none !important;
}

/* Sticky-header tema div'i devre dışı — main-header zaten position:sticky */
.sticky-header {
  display: none !important;
}

/* Mobile-nav-toggler (hamburger) — koyu zeminde görünür */
.mobile-nav-toggler,
.outer-box .mobile-nav-toggler {
  background: transparent !important;
  color: var(--ink-blue) !important;
  border: 1px solid rgba(14, 20, 34, 0.20);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
  margin-inline-start: 16px;
}
.mobile-nav-toggler i,
.mobile-nav-toggler span,
.mobile-nav-toggler .icon {
  color: var(--ink-blue) !important;
  font-size: 18px;
}
.mobile-nav-toggler:hover {
  border-color: var(--accent) !important;
}
.mobile-nav-toggler:hover i,
.mobile-nav-toggler:hover span {
  color: var(--accent) !important;
}

/* Mobile menu (slide-in panel) — koyu zemin */
.mobile-menu .menu-box {
  background: var(--bg-base) !important;
}
.mobile-menu .upper-box {
  background: var(--bg-base) !important;
  border-block-end: 1px solid var(--border-subtle) !important;
}
.mobile-menu .navigation li a {
  color: var(--text-body) !important;
  border-block-end: 1px solid var(--border-subtle) !important;
  font-family: var(--font-sans);
  font-weight: 500;
}
.mobile-menu .navigation li a:hover {
  color: var(--accent) !important;
}
.mobile-menu .close-btn {
  color: var(--text-primary) !important;
}
.mobile-menu .close-btn:hover {
  color: var(--accent) !important;
}

/* Dil switcher */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: 24px;
}
.lang-switcher a {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 200ms ease;
}
.lang-switcher a:hover,
.lang-switcher a.active {
  color: var(--accent);
}
.lang-switcher span {
  color: var(--text-muted);
  opacity: 0.4;
}
/* Header (beyaz zemin) dil değiştirici — koyu slate, mobil panel etkilenmez */
.main-header .main-box .lang-switcher a {
  color: #5a6275;
}
.main-header .main-box .lang-switcher a:hover,
.main-header .main-box .lang-switcher a.active {
  color: var(--accent);
}
.main-header .main-box .lang-switcher span {
  color: rgba(14, 20, 34, 0.30);
  opacity: 1;
}

/* ── Footer ──────────────────────────────────────────── */
.main-footer {
  background: #06080d;
  border-block-start: 1px solid var(--border-subtle);
  padding-block: 80px 32px;
}
.main-footer .footer-bottom {
  background: transparent;
  border-block-start: 1px solid var(--border-subtle);
  padding-block: 24px 0;
  margin-block-start: 64px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ── Cookie banner ───────────────────────────────────── */
.cookie-banner {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  background: var(--bg-elevated);
  border-block-start: 1px solid var(--border-subtle);
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 1000;
  font-size: 14px;
  color: var(--text-body);
}
.cookie-banner.is-hidden { display: none; }
.cookie-banner .actions { display: flex; gap: 12px; }

/* ── Sosyal ikonlar ──────────────────────────────────── */
.top-social-icon li a {
  color: var(--text-muted) !important;
  transition: color 200ms ease, background 200ms ease;
}
.top-social-icon li a:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--bg-base) !important;
}

/* ── Sec-title (eski tema) ────────────────────────────── */
.sec-title .sub-title {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent) !important;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.sec-title .sub-title::before,
.sec-title .sub-title::after {
  background-color: var(--accent) !important;
}
.sec-title .title {
  font-family: var(--font-serif);
  color: var(--text-primary);
  font-weight: 500;
}

/* ── Page banner override ─────────────────────────────── */
.page-title {
  background: var(--bg-base) !important;
  padding-block: 120px 60px !important;
}
.page-title h1 {
  color: var(--text-primary);
}

/* ── Eski hero-slider gradient ─────────────────────────── */
.banner-section .slide-bg::after {
  background: linear-gradient(180deg, rgba(10,13,20,0.85), rgba(10,13,20,0.95));
}

/* ── Servis Section (eski temadan kalan) ───────────────── */
.service-section::after {
  display: none !important;
  content: none !important;
}
.service-block:hover .title a,
.service-block:hover .text { color: #fff; }

/* ── Counter, progress ────────────────────────────────── */
.progress .bar-inner { background: var(--accent); }
.counter-block .count-outer .count-text { color: var(--accent); }

/* ── Utility ─────────────────────────────────────────── */
.text-center { text-align: center; }
.text-end    { text-align: end; }
.mb-0 { margin-block-end: 0 !important; }
.mt-0 { margin-block-start: 0 !important; }

.divider {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--border-subtle);
  border: 0;
  margin-block: 0;
}