/*
Theme Name: Arkaas Theme
Theme URI: https://arkaas.com
Author: Antigravity & Arkaas
Author URI: https://arkaas.com
Description: ARKAAS kurumsal çatı sitesi ve marka portföyü için özel geliştirilmiş modern, performanslı ve koyu tema WordPress teması.
Version: 1.7.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: arkaas
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg-main: #070F0B;
  --bg-card: rgba(14, 27, 21, 0.7);
  --bg-card-hover: rgba(20, 39, 30, 0.9);
  --border-color: rgba(16, 185, 129, 0.20);
  --border-hover: rgba(16, 185, 129, 0.45);
  --text-primary: #F1FBF5;
  --text-secondary: #7EA292;
  --text-muted: #567366;
  
  /* Dinamik Palet Değişkenleri (Default: Neon Botanik) */
  --arkaas-bg: #070F0B;
  --arkaas-card-bg: #0E1B15;
  --arkaas-surface: #14271E;
  --arkaas-text: #F1FBF5;
  --arkaas-text-muted: #7EA292;
  --arkaas-border: rgba(16, 185, 129, 0.20);
  --arkaas-border-hover: rgba(16, 185, 129, 0.45);
  --arkaas-primary: #10B981;
  --arkaas-primary-hover: #059669;
  --arkaas-primary-text: #052014;
  --arkaas-accent: #06B6D4;
  --arkaas-glow: rgba(16, 185, 129, 0.25);
  --arkaas-badge-bg: rgba(16, 185, 129, 0.12);
  --arkaas-badge-text: #34D399;
  --arkaas-badge-border: rgba(16, 185, 129, 0.35);
}

/* 8 Alternatif Renk Paleti Body Sınıfları */
body.palette-neon_botanik {
  --arkaas-bg: #070F0B;
  --arkaas-card-bg: #0E1B15;
  --arkaas-surface: #14271E;
  --arkaas-text: #F1FBF5;
  --arkaas-text-muted: #7EA292;
  --arkaas-border: rgba(16, 185, 129, 0.20);
  --arkaas-border-hover: rgba(16, 185, 129, 0.45);
  --arkaas-primary: #10B981;
  --arkaas-primary-hover: #059669;
  --arkaas-primary-text: #052014;
  --arkaas-accent: #06B6D4;
  --arkaas-glow: rgba(16, 185, 129, 0.25);
  --arkaas-badge-bg: rgba(16, 185, 129, 0.12);
  --arkaas-badge-text: #34D399;
  --arkaas-badge-border: rgba(16, 185, 129, 0.35);
}

body.palette-industrial_cyber {
  --arkaas-bg: #0B0D13;
  --arkaas-card-bg: #131824;
  --arkaas-surface: #1C2233;
  --arkaas-text: #F8FAFC;
  --arkaas-text-muted: #94A3B8;
  --arkaas-border: rgba(245, 158, 11, 0.20);
  --arkaas-border-hover: rgba(245, 158, 11, 0.45);
  --arkaas-primary: #F59E0B;
  --arkaas-primary-hover: #D97706;
  --arkaas-primary-text: #0B0D13;
  --arkaas-accent: #38BDF8;
  --arkaas-glow: rgba(245, 158, 11, 0.25);
  --arkaas-badge-bg: rgba(245, 158, 11, 0.12);
  --arkaas-badge-text: #FBBF24;
  --arkaas-badge-border: rgba(245, 158, 11, 0.35);
}

body.palette-deep_corporate {
  --arkaas-bg: #060A14;
  --arkaas-card-bg: #0C1427;
  --arkaas-surface: #131F38;
  --arkaas-text: #F8FAFC;
  --arkaas-text-muted: #8FA0BE;
  --arkaas-border: rgba(59, 130, 246, 0.20);
  --arkaas-border-hover: rgba(59, 130, 246, 0.45);
  --arkaas-primary: #3B82F6;
  --arkaas-primary-hover: #2563EB;
  --arkaas-primary-text: #FFFFFF;
  --arkaas-accent: #60A5FA;
  --arkaas-glow: rgba(59, 130, 246, 0.25);
  --arkaas-badge-bg: rgba(59, 130, 246, 0.12);
  --arkaas-badge-text: #93C5FD;
  --arkaas-badge-border: rgba(59, 130, 246, 0.35);
}

body.palette-terra_modern {
  --arkaas-bg: #120C0A;
  --arkaas-card-bg: #1D1411;
  --arkaas-surface: #291D19;
  --arkaas-text: #FDF8F6;
  --arkaas-text-muted: #BCA39B;
  --arkaas-border: rgba(249, 115, 22, 0.20);
  --arkaas-border-hover: rgba(249, 115, 22, 0.45);
  --arkaas-primary: #F97316;
  --arkaas-primary-hover: #EA580C;
  --arkaas-primary-text: #FFFFFF;
  --arkaas-accent: #10B981;
  --arkaas-glow: rgba(249, 115, 22, 0.25);
  --arkaas-badge-bg: rgba(249, 115, 22, 0.12);
  --arkaas-badge-text: #FB923C;
  --arkaas-badge-border: rgba(249, 115, 22, 0.35);
}

body.palette-neon_eco {
  --arkaas-bg: #090E08;
  --arkaas-card-bg: #121A10;
  --arkaas-surface: #1B2618;
  --arkaas-text: #F7FEE7;
  --arkaas-text-muted: #8FA382;
  --arkaas-border: rgba(132, 204, 22, 0.22);
  --arkaas-border-hover: rgba(132, 204, 22, 0.45);
  --arkaas-primary: #84CC16;
  --arkaas-primary-hover: #65A30D;
  --arkaas-primary-text: #0F1A05;
  --arkaas-accent: #14B8A6;
  --arkaas-glow: rgba(132, 204, 22, 0.25);
  --arkaas-badge-bg: rgba(132, 204, 22, 0.12);
  --arkaas-badge-text: #A3E635;
  --arkaas-badge-border: rgba(132, 204, 22, 0.35);
}

body.palette-deep_mint {
  --arkaas-bg: #061214;
  --arkaas-card-bg: #0B1F22;
  --arkaas-surface: #112C30;
  --arkaas-text: #F0FDFA;
  --arkaas-text-muted: #799DA1;
  --arkaas-border: rgba(20, 184, 166, 0.22);
  --arkaas-border-hover: rgba(20, 184, 166, 0.45);
  --arkaas-primary: #14B8A6;
  --arkaas-primary-hover: #0D9488;
  --arkaas-primary-text: #041D1E;
  --arkaas-accent: #38BDF8;
  --arkaas-glow: rgba(20, 184, 166, 0.25);
  --arkaas-badge-bg: rgba(20, 184, 166, 0.12);
  --arkaas-badge-text: #2DD4BF;
  --arkaas-badge-border: rgba(20, 184, 166, 0.35);
}

body.palette-cyber_violet {
  --arkaas-bg: #0E0916;
  --arkaas-card-bg: #171026;
  --arkaas-surface: #231838;
  --arkaas-text: #FAF5FF;
  --arkaas-text-muted: #9E8BB5;
  --arkaas-border: rgba(168, 85, 247, 0.22);
  --arkaas-border-hover: rgba(168, 85, 247, 0.45);
  --arkaas-primary: #A855F7;
  --arkaas-primary-hover: #9333EA;
  --arkaas-primary-text: #FFFFFF;
  --arkaas-accent: #EC4899;
  --arkaas-glow: rgba(168, 85, 247, 0.25);
  --arkaas-badge-bg: rgba(168, 85, 247, 0.12);
  --arkaas-badge-text: #C084FC;
  --arkaas-badge-border: rgba(168, 85, 247, 0.35);
}

body.palette-slate_ice {
  --arkaas-bg: #0B0E14;
  --arkaas-card-bg: #141A25;
  --arkaas-surface: #1D2635;
  --arkaas-text: #F8FAFC;
  --arkaas-text-muted: #8A98AB;
  --arkaas-border: rgba(148, 163, 184, 0.22);
  --arkaas-border-hover: rgba(56, 189, 248, 0.45);
  --arkaas-primary: #38BDF8;
  --arkaas-primary-hover: #0284C7;
  --arkaas-primary-text: #0B0E14;
  --arkaas-accent: #94A3B8;
  --arkaas-glow: rgba(56, 189, 248, 0.22);
  --arkaas-badge-bg: rgba(56, 189, 248, 0.12);
  --arkaas-badge-text: #7DD3FC;
  --arkaas-badge-border: rgba(56, 189, 248, 0.35);
}

/* Grup 3: Açık Toprak Tonları (Milestone 7) */
body.palette-terra_bianca,
html.light body.palette-light-terra_bianca {
  --arkaas-bg: #F7F5F0;
  --arkaas-card-bg: #FFFFFF;
  --arkaas-surface: #EFECE6;
  --arkaas-text: #262320;
  --arkaas-text-muted: #6E6862;
  --arkaas-border: #E6E2DA;
  --arkaas-border-hover: #D1CBC0;
  --arkaas-primary: #5E6F52;
  --arkaas-primary-hover: #4C5B42;
  --arkaas-primary-text: #FFFFFF;
  --arkaas-accent: #B86B35;
  --arkaas-glow: rgba(94, 111, 82, 0.20);
  --arkaas-badge-bg: rgba(94, 111, 82, 0.12);
  --arkaas-badge-text: #46543D;
  --arkaas-badge-border: rgba(94, 111, 82, 0.28);
}

body.palette-warm_earth,
html.light body.palette-light-warm_earth {
  --arkaas-bg: #EDE8DF;
  --arkaas-card-bg: #F8F6F1;
  --arkaas-surface: #E4DDD2;
  --arkaas-text: #1F1C18;
  --arkaas-text-muted: #665F56;
  --arkaas-border: #DDD6CA;
  --arkaas-border-hover: #C7BEAF;
  --arkaas-primary: #2E4F4F;
  --arkaas-primary-hover: #203838;
  --arkaas-primary-text: #FFFFFF;
  --arkaas-accent: #8C532D;
  --arkaas-glow: rgba(46, 79, 79, 0.20);
  --arkaas-badge-bg: rgba(46, 79, 79, 0.12);
  --arkaas-badge-text: #203838;
  --arkaas-badge-border: rgba(46, 79, 79, 0.28);
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--arkaas-bg);
  color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color 0.3s ease;
}

/* 1. Milestone 3: Marka Logosu Sabit Boyut & Hizalama Standartları */
.brand-logo-bay {
  height: 92px !important;
  max-width: 250px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  border-radius: 1rem !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.brand-logo-bay:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.brand-logo-img {
  max-height: 54px !important;
  max-width: 85% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25));
}

/* 2. Dinamik Palet Sınıfları */
.arkaas-btn-primary {
  background-color: var(--arkaas-primary) !important;
  color: var(--arkaas-primary-text) !important;
  box-shadow: 0 4px 14px var(--arkaas-glow) !important;
}

.arkaas-btn-primary:hover {
  background-color: var(--arkaas-primary-hover) !important;
}

.arkaas-badge {
  background-color: var(--arkaas-badge-bg) !important;
  color: var(--arkaas-badge-text) !important;
  border-color: var(--arkaas-badge-border) !important;
}

.arkaas-accent-text {
  color: var(--arkaas-primary) !important;
}

.arkaas-card {
  background-color: var(--arkaas-card-bg) !important;
  border-color: var(--arkaas-border) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.arkaas-card:hover {
  border-color: var(--arkaas-border-hover) !important;
}

.arkaas-link-btn:hover {
  border-color: var(--arkaas-primary) !important;
  color: var(--arkaas-primary) !important;
}

/* Glassmorphism & Custom Card Classes */
.glass-panel {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-panel:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.5);
}

/* Ecosystem SVG & Node animations */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.08); }
}

.animate-float-slow {
  animation: floatSlow 5s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 3.5s ease-in-out infinite;
}

/* ==========================================================================
   Milestone 6: Header Logo Sabit Ölçü ve Oran Dengesi (1:1 Kare / 64px - 80px)
   ========================================================================== */
.arkaas-header-logo-wrap {
  position: relative !important;
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  aspect-ratio: 1 / 1 !important;
  flex-shrink: 0 !important;
  margin-left: 1.75rem !important; /* ml-3 + pl-4 = 28px net sol boşluk */
  padding: 0 !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease !important;
}

@media (min-width: 768px) {
  .arkaas-header-logo-wrap {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
  }
}

.arkaas-header-logo-img {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  display: block !important;
  transition: opacity 300ms ease-in-out, transform 0.2s ease !important;
}

/* Çift Logo Cross-Fade Opaklık Kuralları (Aydınlık & Karanlık Mod) */
/* Açık logo (Karanlık Mod Logosu): opacity-0 dark:opacity-100 */
html.dark .arkaas-header-logo-img.logo-dark,
:root.dark .arkaas-header-logo-img.logo-dark {
  opacity: 1 !important;
  pointer-events: auto !important;
}
html:not(.dark) .arkaas-header-logo-img.logo-dark,
html.light .arkaas-header-logo-img.logo-dark {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Koyu/Renkli logo (Aydınlık Mod Logosu): opacity-100 dark:opacity-0 */
html:not(.dark) .arkaas-header-logo-img.logo-light,
html.light .arkaas-header-logo-img.logo-light {
  opacity: 1 !important;
  pointer-events: auto !important;
}
html.dark .arkaas-header-logo-img.logo-light,
:root.dark .arkaas-header-logo-img.logo-light {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   Milestone 6: Özel (Native) Full-Width Slider & Swiper Stilleri
   ========================================================================== */
.arkaas-native-slider-section {
  position: relative;
  width: 100%;
  background-color: var(--arkaas-bg);
}

.arkaas-native-slider {
  width: 100% !important;
  position: relative !important;
}

.arkaas-native-slider .swiper-slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--arkaas-bg);
}

.arkaas-native-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Swiper Pagination Bullets (Koyu Tema & Zümrüt Vurgu) */
.arkaas-slider-pagination {
  position: absolute !important;
  bottom: 2rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 30 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: auto !important;
}

.arkaas-slider-pagination .swiper-pagination-bullet {
  width: 8px !important;
  height: 8px !important;
  border-radius: 9999px !important;
  background-color: rgba(255, 255, 255, 0.35) !important;
  opacity: 1 !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.arkaas-slider-pagination .swiper-pagination-bullet:hover {
  background-color: rgba(255, 255, 255, 0.75) !important;
  transform: scale(1.2);
}

.arkaas-slider-pagination .swiper-pagination-bullet-active {
  width: 28px !important;
  background-color: var(--arkaas-primary) !important;
  box-shadow: 0 0 12px var(--arkaas-glow) !important;
}

/* Swiper Navigasyon Butonları */
.arkaas-slider-prev,
.arkaas-slider-next {
  user-select: none;
  cursor: pointer;
}

.arkaas-slider-prev:hover,
.arkaas-slider-next:hover {
  transform: translateY(-50%) scale(1.08);
}

.arkaas-slider-prev:active,
.arkaas-slider-next:active {
  transform: translateY(-50%) scale(0.96);
}

/* ==========================================================================
   Light Mode (Gündüz Modu) Genel ve Bileşen Geçersiz Kılmaları (Milestone 7)
   ========================================================================== */
html:not(.dark),
html.light {
  color-scheme: light;
}

html:not(.dark) body,
html.light body {
  background-color: var(--arkaas-bg) !important;
  color: var(--arkaas-text) !important;
}

/* Header & Mobil Çekmece */
html:not(.dark) header,
html.light header {
  background-color: rgba(247, 245, 240, 0.92) !important;
  border-bottom-color: var(--arkaas-border) !important;
}

html:not(.dark) #mobile-menu,
html.light #mobile-menu {
  background-color: var(--arkaas-bg) !important;
  border-top-color: var(--arkaas-border) !important;
}

/* Tipografi Kontrastı */
html:not(.dark) .text-white,
html:not(.dark) .text-slate-100,
html:not(.dark) .text-slate-200,
html.light .text-white,
html.light .text-slate-100,
html.light .text-slate-200 {
  color: var(--arkaas-text) !important;
}

html:not(.dark) .text-slate-300,
html:not(.dark) .text-slate-400,
html:not(.dark) .text-slate-500,
html.light .text-slate-300,
html.light .text-slate-400,
html.light .text-slate-500 {
  color: var(--arkaas-text-muted) !important;
}

html:not(.dark) a.text-slate-300:hover,
html.light a.text-slate-300:hover,
html:not(.dark) a.text-slate-200:hover,
html.light a.text-slate-200:hover {
  color: var(--arkaas-text) !important;
}

/* Arka Planlar & Kenarlıklar */
html:not(.dark) .bg-white\/5,
html.light .bg-white\/5 {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark) .bg-white\/10,
html.light .bg-white\/10 {
  background-color: rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark) .hover\:bg-white\/10:hover,
html.light .hover\:bg-white\/10:hover {
  background-color: rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark) .border-white\/5,
html:not(.dark) .border-white\/10,
html:not(.dark) .border-white\/20,
html.light .border-white\/5,
html.light .border-white\/10,
html.light .border-white\/20 {
  border-color: var(--arkaas-border) !important;
}

html:not(.dark) .hover\:border-white\/20:hover,
html:not(.dark) .hover\:border-white\/40:hover,
html.light .hover\:border-white\/20:hover,
html.light .hover\:border-white\/40:hover {
  border-color: var(--arkaas-border-hover) !important;
}

/* Kartlar ve Logo Yuvaları */
html:not(.dark) .arkaas-card,
html.light .arkaas-card {
  background-color: var(--arkaas-card-bg) !important;
  border-color: var(--arkaas-border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark) .arkaas-card:hover,
html.light .arkaas-card:hover {
  border-color: var(--arkaas-border-hover) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
}

/* Marka Logosu Kapsayıcısı (Logo Box) Aydınlık Mod Kontrastı: Tema Buton Rengi */
html:not(.dark) .brand-logo-bay,
html.light .brand-logo-bay {
  background-color: var(--arkaas-primary, #2E4F4F) !important; /* Butondaki derin mineral çam/teal rengi (#2E4F4F) */
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

html:not(.dark) .brand-logo-bay:hover,
html.light .brand-logo-bay:hover {
  background-color: var(--arkaas-primary-hover, #203838) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
}

/* SVG İkonlar için Aydınlık Mod Kontrastı */
html:not(.dark) .brand-logo-bay svg,
html.light .brand-logo-bay svg {
  stroke: #FFFFFF !important;
}

/* Light / Dark Toggle Butonu */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  cursor: pointer;
}

html:not(.dark) .theme-toggle-btn,
html.light .theme-toggle-btn {
  background-color: rgba(0, 0, 0, 0.04) !important;
  border-color: var(--arkaas-border) !important;
  color: var(--arkaas-text) !important;
}

html:not(.dark) .theme-toggle-btn:hover,
html.light .theme-toggle-btn:hover {
  background-color: rgba(0, 0, 0, 0.08) !important;
  border-color: var(--arkaas-border-hover) !important;
}

/* Form Elemanları */
html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select,
html.light input,
html.light textarea,
html.light select {
  background-color: #FFFFFF !important;
  border-color: var(--arkaas-border) !important;
  color: var(--arkaas-text) !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder,
html.light input::placeholder,
html.light textarea::placeholder {
  color: var(--arkaas-text-muted) !important;
}

/* Footer & Alt Alanlar */
html:not(.dark) footer,
html.light footer {
  border-top-color: var(--arkaas-border) !important;
}