/* =============================================================
   18 Yapı — CSS Variables & Base Reset
   ============================================================= */

:root {
  /* Brand Colors */
  --crimson:        #8B1A1A;
  --crimson-dark:   #6B1010;
  --crimson-light:  #C44040;
  --wa-green:       #25D366;
  --wa-green-dark:  #1da851;

  /* Neutral Palette */
  --warm-white: #FBF9F7;
  --cream:      #F5F0EA;
  --stone:      #E8E0D5;
  --charcoal:   #2C2C2C;
  --mid-gray:   #6B6560;

  /* Shadows */
  --shadow-sm: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.15);

  /* Border Radius */
  --radius:    12px;
  --radius-lg: 20px;
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--warm-white);
  color: var(--charcoal);
  line-height: 1.65;
  overflow-x: hidden;
}

/* Section spacing */
section { padding: 96px 5%; }

/* Section typography helpers */
.section-tag {
  display: inline-block;
  color: var(--crimson);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
  position: relative;
  padding-left: 24px;
}
.section-tag::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 2px;
  background: var(--crimson);
}

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.2;
  margin-bottom: 16px;
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--mid-gray);
  max-width: 560px;
  line-height: 1.75;
}

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}