/* theme-v2.css — Dual-mode Brown/Cream editorial theme */

/* ══════════════════════════════
   SHARED PALETTE TOKENS (her iki modda ortak)
══════════════════════════════ */
:root {
  --accent:      #E5483B;
  --accent-dark: #C73C30;
  --brown-1:     #7C5C3E;
  --brown-2:     #A87850;
  --cream-1:     #D4C4A8;
  --cream-2:     #E8DFD0;

  /* override base purple/cyan */
  --purple:      #7C5C3E;
  --cyan:        #E5483B;
}

/* ══════════════════════════════
   DARK MODE — varsayılan (light-mode sınıfı YOK)
══════════════════════════════ */
body:not(.light-mode) {
  --bg:          #1A1207;
  --bg-card:     #231808;
  --bg-card2:    #2A1E10;
  --text:        #F4F1EC;
  --text-sec:    #C4956A;
  --text-muted:  #A89880;
  --border:      rgba(168,120,80,0.22);
  --border-card: rgba(168,120,80,0.15);
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.25), 0 4px 16px rgba(0,0,0,0.20);
  --shadow-md:   0 2px 8px rgba(0,0,0,0.35), 0 8px 32px rgba(0,0,0,0.30);

  background-color: #1A1207 !important;
  color: #F4F1EC !important;
}

/* ══════════════════════════════
   LIGHT MODE — .light-mode sınıfı aktif
══════════════════════════════ */
body.light-mode {
  --bg:          #F4F1EC;
  --bg-card:     #FDFCFA;
  --bg-card2:    #EDE9E1;
  --text:        #1A1207;
  --text-sec:    #6B5C45;
  --text-muted:  #A89880;
  --border:      #DDD5C8;
  --border-card: #E6DFD4;
  --shadow-sm:   0 1px 4px rgba(60,35,10,0.06), 0 4px 16px rgba(60,35,10,0.04);
  --shadow-md:   0 2px 8px rgba(60,35,10,0.08), 0 8px 32px rgba(60,35,10,0.07);

  background-color: #F4F1EC !important;
  color: #1A1207 !important;
}

/* ══════════════════════════════
   MATRIX CANVAS
══════════════════════════════ */
body:not(.light-mode) #code-canvas {
  opacity: 0.55 !important;
  mix-blend-mode: screen !important;
}
body.light-mode #code-canvas {
  opacity: 0.28 !important;
  mix-blend-mode: multiply !important;
}

/* hide glow orbs */
#glow-root { display: none !important; }

/* ══════════════════════════════
   TYPOGRAPHY — her iki modda
══════════════════════════════ */
h1, h2, h3, h4,
.hero-title,
.section-title,
[class*="title"],
[class*="heading"] {
  color: var(--text) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
}

.hero-title   { font-size: clamp(3rem, 6.5vw, 5.5rem) !important; line-height: 1.05 !important; }
.section-title{ font-size: clamp(2rem, 4vw, 3.2rem)   !important; line-height: 1.1  !important; }

p, li { color: var(--text-sec) !important; }

/* Sınıfsız span'lar içerik metni — buton/nav bağlamları hariç */
span:not(.logo-surve):not([class*="badge"]):not([class*="tag"]):not([class*="btn"]):not([class*="cta"]):not([class*="nav-"]) {
  color: var(--text-sec);
}

/* buton bağlamındaki span'lar parent rengini devralır */
[class*="btn"] span,
[class*="cta"] span,
.nav-cta span,
.contact-submit span { color: inherit !important; }

.hero-subtitle,
.section-sub {
  color: var(--text-sec) !important;
  font-size: 1.05rem !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
}

.section-tag {
  color: var(--accent) !important;
  font-size: 0.7rem !important;
  letter-spacing: 3px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.gradient-text {
  background: none !important;
  -webkit-text-fill-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ══════════════════════════════
   NAVBAR
══════════════════════════════ */
.navbar {
  background: transparent !important;
  border-bottom: none !important;
}

body:not(.light-mode) .navbar.scrolled {
  background: rgba(26,18,7,0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(168,120,80,0.22) !important;
  box-shadow: 0 1px 0 rgba(168,120,80,0.15) !important;
}

body.light-mode .navbar.scrolled {
  background: rgba(244,241,236,0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid #DDD5C8 !important;
  box-shadow: 0 1px 0 #DDD5C8 !important;
}

.nav-link {
  color: var(--text-sec) !important;
  font-weight: 500 !important;
}
.nav-link:hover { color: var(--text) !important; }

/* logo */
.logo-name { color: var(--text) !important; }
.logo-name span,
.logo-surve { color: var(--accent) !important; }

/* ══════════════════════════════
   HERO
══════════════════════════════ */
.hero { background: var(--bg) !important; }

.hero-orb,
.hero-particles,
.particle { display: none !important; }

.hero::before {
  background-image:
    linear-gradient(rgba(124,92,62,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,92,62,0.06) 1px, transparent 1px) !important;
  background-size: 72px 72px !important;
  animation: none !important;
}

/* ══════════════════════════════
   BUTTONS — base + hover states
══════════════════════════════ */

/* ── Filled primary buttons ── */
.btn-primary,
.cta-btn,
.hero-cta-primary,
.nav-cta,
.svc-modal-cta,
.article-cta-btn,
.blog-more-btn,
.blog-cta-btn,
[class*="more-btn"],
[class*="cta-btn"] {
  background: var(--accent) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(229,72,59,0.18) !important;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
  will-change: transform !important;
}
.btn-primary:hover,
.cta-btn:hover,
.hero-cta-primary:hover,
.nav-cta:hover,
.svc-modal-cta:hover,
.article-cta-btn:hover,
.blog-more-btn:hover,
.blog-cta-btn:hover,
[class*="more-btn"]:hover,
[class*="cta-btn"]:hover {
  background: var(--accent-dark) !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 6px 20px rgba(199,60,48,0.32) !important;
}

/* ── Outline / secondary buttons ── */
.btn-secondary,
.btn-outline,
.btn-ghost,
.pricing-cta--outline,
.article-back-bottom {
  background: transparent !important;
  border: 1.5px solid var(--border-card) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 4px rgba(60,35,10,0.06) !important;
  transition: background 0.3s ease, border-color 0.3s ease,
              transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease !important;
  will-change: transform !important;
}
.btn-secondary:hover,
.btn-outline:hover,
.btn-ghost:hover,
.pricing-cta--outline:hover,
.article-back-bottom:hover {
  border-color: var(--brown-1) !important;
  background: rgba(124,92,62,0.10) !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 6px 18px rgba(124,92,62,0.18) !important;
}

/* active / pressed feedback */
.btn-primary:active,
.cta-btn:active,
.hero-cta-primary:active,
.nav-cta:active,
[class*="cta-btn"]:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 2px 6px rgba(229,72,59,0.20) !important;
}

.btn-secondary:active,
.btn-outline:active,
.btn-ghost:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 1px 4px rgba(124,92,62,0.12) !important;
}

/* reduced-motion: skip transform animations, keep color transitions */
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .cta-btn, .hero-cta-primary, .nav-cta,
  .btn-secondary, .btn-outline, .btn-ghost,
  [class*="cta-btn"], [class*="more-btn"] {
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
  }
  .btn-primary:hover, .cta-btn:hover, .hero-cta-primary:hover,
  .btn-secondary:hover, .btn-outline:hover, .btn-ghost:hover,
  [class*="cta-btn"]:hover, [class*="more-btn"]:hover {
    transform: none !important;
  }
}

/* ══════════════════════════════
   SECTIONS
══════════════════════════════ */
section,
.services,
.how-it-works,
.testimonials,
.faq,
.contact-section,
footer { background: var(--bg) !important; }

.pricing { background: var(--bg-card2) !important; }

.services::before,
.how-it-works::before { display: none !important; }

/* ══════════════════════════════
   CARDS
══════════════════════════════ */
.service-card,
.pricing-card,
.blog-card,
.testimonial-card,
.step-card,
.faq-item,
.review-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-sm) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: box-shadow 0.22s ease, transform 0.22s ease !important;
}

.service-card:hover,
.blog-card:hover,
.step-card:hover,
.review-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px) !important;
  background: var(--bg-card) !important;
  color: var(--text) !important;
}

/* corner accent */
.service-card::after,
.blog-card::after,
.pricing-card::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; right: 0 !important;
  width: 130px !important; height: 130px !important;
  background: radial-gradient(circle at top right,
    rgba(168,120,80,0.14) 0%,
    rgba(212,196,168,0.07) 50%,
    transparent 70%) !important;
  pointer-events: none !important;
  border-radius: 0 16px 0 0 !important;
}

.service-card h3,
.blog-card h3,
.step-card h3,
.pricing-card h3,
[class*="card"] h3 { color: var(--text) !important; font-weight: 700 !important; }

.service-card p,
.blog-card p,
.step-card p,
.testimonial-card p,
.review-card p,
[class*="card"] p { color: var(--text-sec) !important; }

.service-card svg,
.step-card svg,
.card-icon svg { color: var(--brown-2) !important; stroke: var(--brown-2) !important; }

.step-number {
  background: rgba(168,120,80,0.12) !important;
  color: var(--brown-2) !important;
  border: 1.5px solid rgba(168,120,80,0.28) !important;
  font-weight: 800 !important;
}

/* ══════════════════════════════
   PRICING — featured dark card
══════════════════════════════ */
body:not(.light-mode) .pricing-card.featured {
  background: #2A1E10 !important;
  border-color: rgba(229,72,59,0.4) !important;
}
body.light-mode .pricing-card.featured {
  background: #1A1207 !important;
  border-color: #1A1207 !important;
}
.pricing-card.featured h3,
.pricing-card.featured p,
.pricing-card.featured .price,
.pricing-card.featured li { color: #F4F1EC !important; }
.pricing-card.featured .btn-primary { background: var(--accent) !important; }

/* ══════════════════════════════
   FAQ
══════════════════════════════ */
.faq-item {
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.faq-question { color: var(--text) !important; font-weight: 600 !important; }
.faq-answer   { color: var(--text-sec) !important; }

/* ══════════════════════════════
   TESTIMONIALS
══════════════════════════════ */
.testimonial-card .author-name { color: var(--text) !important; font-weight: 700 !important; }
.testimonial-card .author-role { color: var(--text-muted) !important; }

/* ══════════════════════════════
   CONTACT FORM
══════════════════════════════ */
body:not(.light-mode) .contact-form input,
body:not(.light-mode) .contact-form textarea,
body:not(.light-mode) .contact-form select {
  background: #2A1E10 !important;
  border: 1.5px solid rgba(168,120,80,0.25) !important;
  color: #F4F1EC !important;
  border-radius: 8px !important;
}

body.light-mode .contact-form input,
body.light-mode .contact-form textarea,
body.light-mode .contact-form select {
  background: #fff !important;
  border: 1.5px solid #DDD5C8 !important;
  color: #1A1207 !important;
  border-radius: 8px !important;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--brown-1) !important;
  box-shadow: 0 0 0 3px rgba(124,92,62,0.12) !important;
  outline: none !important;
}
.contact-form label { color: var(--text-sec) !important; }

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
footer, .footer {
  border-top: 1px solid var(--border) !important;
}
footer h2, footer h3, footer h4,
.footer h2, .footer h3, .footer h4,
.footer-heading, .footer-col-title {
  color: var(--text) !important;
}
footer p, footer li, footer span,
.footer p, .footer li, .footer span,
footer a:not(.btn), .footer a:not(.btn) {
  color: var(--text-sec) !important;
}
footer a:hover, .footer a:hover { color: var(--accent) !important; }

/* ══════════════════════════════
   BLOG / ARTICLE
══════════════════════════════ */
.blog-category,
.post-category,
.article-badge { background: var(--accent) !important; color: #fff !important; }

/* ══════════════════════════════
   MISC OVERRIDES
══════════════════════════════ */
[class*="gradient"] { color: var(--accent) !important; background: none !important; -webkit-text-fill-color: var(--accent) !important; }

.cookie-btn-accept,
.lang-btn.active { background: var(--accent) !important; background-image: none !important; }

/* ══════════════════════════════
   SCROLLBAR
══════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--brown-1); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ══════════════════════════════
   BUTON METİN — en sonda, her şeyi geçersiz kılar
══════════════════════════════ */

/* Dolu butonlar → daima beyaz */
.btn-primary,
.btn-primary *,
.cta-btn,
.cta-btn *,
.hero-cta-primary,
.hero-cta-primary *,
.nav-cta,
.nav-cta *,
.svc-modal-cta,
.svc-modal-cta *,
.article-cta-btn,
.article-cta-btn *,
.blog-more-btn,
.blog-more-btn *,
.blog-cta-btn,
.blog-cta-btn *,
.cookie-btn-accept,
.cookie-btn-accept *,
[class*="more-btn"],
[class*="more-btn"] *,
[class*="cta-btn"],
[class*="cta-btn"] * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Outline butonlar açık modda → koyu kahve */
body.light-mode .btn-secondary,
body.light-mode .btn-secondary *,
body.light-mode .btn-outline,
body.light-mode .btn-outline *,
body.light-mode .btn-ghost,
body.light-mode .btn-ghost *,
body.light-mode .pricing-cta--outline,
body.light-mode .pricing-cta--outline *,
body.light-mode .article-back-bottom,
body.light-mode .article-back-bottom * {
  color: #1A1207 !important;
  -webkit-text-fill-color: #1A1207 !important;
}

/* Outline butonlar koyu modda → krem */
body:not(.light-mode) .btn-secondary,
body:not(.light-mode) .btn-secondary *,
body:not(.light-mode) .btn-outline,
body:not(.light-mode) .btn-outline *,
body:not(.light-mode) .btn-ghost,
body:not(.light-mode) .btn-ghost *,
body:not(.light-mode) .pricing-cta--outline,
body:not(.light-mode) .pricing-cta--outline *,
body:not(.light-mode) .article-back-bottom,
body:not(.light-mode) .article-back-bottom * {
  color: #F4F1EC !important;
  -webkit-text-fill-color: #F4F1EC !important;
}

/* ── ÜCRETSİZ DANIŞMANLIK + GÖNDER — kesin beyaz metin her iki modda ── */
.nav-cta,
.contact-submit,
.contact-submit span,
.contact-submit svg,
.contact-submit * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* arka plan rengi her iki modda tutarlı */
.contact-submit {
  background: var(--accent) !important;
}
.contact-submit:hover {
  background: var(--accent-dark) !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 6px 20px rgba(199,60,48,0.35) !important;
}

/* Contact form card — dark mod */
body:not(.light-mode) .contact-col-left {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(124,92,62,0.35) !important;
}

/* Contact form card — light mod */
body.light-mode .contact-col-left {
  background: #ffffff !important;
  border-color: rgba(124,92,62,0.3) !important;
}

/* ══════════════════════════════
   COOKIE REDDET — açık mod okunurluğu (son kural, kesin kazanır)
══════════════════════════════ */
body.light-mode .cookie-btn-reject,
body.light-mode .cookie-btn-reject * {
  color: #1A1207 !important;
  -webkit-text-fill-color: #1A1207 !important;
  border: 1.5px solid #7C5C3E !important;
  background: transparent !important;
}
body.light-mode .cookie-btn-reject:hover,
body.light-mode .cookie-btn-reject:hover * {
  color: #1A1207 !important;
  -webkit-text-fill-color: #1A1207 !important;
  background: rgba(124,92,62,0.08) !important;
}

/* Calendly panel — dark mod */
body:not(.light-mode) .contact-calendly-panel {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(124,92,62,0.35) !important;
}
body:not(.light-mode) .contact-calendly-panel-header {
  border-bottom-color: rgba(124,92,62,0.25) !important;
}
body:not(.light-mode) .contact-calendly-title {
  color: #F4F1EC !important;
  -webkit-text-fill-color: #F4F1EC !important;
}
body:not(.light-mode) .contact-calendly-sub {
  color: rgba(244,241,236,0.55) !important;
  -webkit-text-fill-color: rgba(244,241,236,0.55) !important;
}
body:not(.light-mode) .contact-calendly-panel-header svg {
  color: #E5483B !important;
}

/* Calendly panel — light mod */
body.light-mode .contact-calendly-panel {
  background: #ffffff !important;
  border-color: rgba(124,92,62,0.3) !important;
}
body.light-mode .contact-calendly-panel-header {
  border-bottom-color: rgba(124,92,62,0.2) !important;
}
body.light-mode .contact-calendly-title {
  color: #1A1207 !important;
  -webkit-text-fill-color: #1A1207 !important;
}
body.light-mode .contact-calendly-sub {
  color: rgba(26,18,7,0.55) !important;
  -webkit-text-fill-color: rgba(26,18,7,0.55) !important;
}
body.light-mode .contact-calendly-panel-header svg {
  color: #E5483B !important;
}