/* ============================================================
   DUŞAKABIN ANKARA — Colors & Type Tokens
   Web: dusakabinankara.com
   ============================================================ */

/* Google Fonts: Montserrat (headings), Source Sans 3 (body) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  /* ---------- COLOR PALETTE ---------- */

  /* Primary blues */
  --mavi-ana:      #1565C0;   /* Primary brand blue */
  --mavi-acik:     #1E88E5;   /* Lighter blue (gradients, accents) */
  --mavi-pale:     #42A5F5;   /* Palest blue (captions, soft text on dark) */
  --lacivert:      #0D2B6B;   /* Deep navy — hero, footer, authority */

  /* Surface */
  --beyaz:         #FFFFFF;
  --bg-acik:       #F0F7FF;   /* Very light blue, "why us" section */
  --bg-gri:        #F8F9FA;   /* Neutral light gray, live-counter strip */

  /* Semantic */
  --whatsapp:      #25D366;   /* WhatsApp green — CTA */
  --whatsapp-dark: #1EBE5D;
  --uyari:         #FFB020;   /* Warning yellow/orange — price caution box */
  --uyari-bg:      #FFF7E6;
  --basari:        #2E9E5B;   /* Green checks in FAQ */
  --hata:          #D64545;   /* Red X in FAQ */
  --canli:         #E53935;   /* "CANLI" live badge red */

  /* Foreground / text */
  --fg-1:          #0D2B6B;   /* Primary text on light bg */
  --fg-2:          #334155;   /* Secondary text */
  --fg-3:          #64748B;   /* Muted */
  --fg-on-dark:    #FFFFFF;
  --fg-on-dark-2:  #BBD5F3;   /* Soft blue text on lacivert */

  /* Borders */
  --border-1:      #E2E8F0;
  --border-mavi:   #1565C0;
  --border-soft:   #D6E4F5;

  /* ---------- GRADIENTS ---------- */
  --grad-hero:     linear-gradient(135deg, #0D2B6B 0%, #1565C0 100%);
  --grad-cta:      linear-gradient(135deg, #1E88E5 0%, #1565C0 100%);
  --grad-overlay:  linear-gradient(180deg, rgba(13,43,107,0.55) 0%, rgba(13,43,107,0.85) 100%);

  /* ---------- SHADOWS ---------- */
  --shadow-sm:     0 1px 2px rgba(13, 43, 107, 0.06);
  --shadow-md:     0 4px 14px rgba(13, 43, 107, 0.10);
  --shadow-lg:     0 10px 30px rgba(13, 43, 107, 0.15);
  --shadow-cta:    0 8px 20px rgba(21, 101, 192, 0.35);
  --shadow-card-hover: 0 14px 32px rgba(21, 101, 192, 0.20);

  /* ---------- RADIUS ---------- */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-pill: 50px;     /* CTA buttons */
  --r-full: 9999px;

  /* ---------- SPACING ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* ---------- LAYOUT ---------- */
  --container:     1200px;
  --container-sm:  960px;
  --bp-mobile:     768px;

  /* ---------- TYPE — FAMILIES ---------- */
  --font-display:  'Montserrat', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body:     'Source Sans 3', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* ---------- TYPE — SCALE ---------- */
  --fs-display: clamp(2.5rem, 5vw, 3.75rem);   /* 40 → 60 */
  --fs-h1:      clamp(2rem, 4vw, 3rem);        /* 32 → 48 */
  --fs-h2:      clamp(1.5rem, 2.6vw, 2.25rem); /* 24 → 36 */
  --fs-h3:      1.375rem;    /* 22 */
  --fs-h4:      1.125rem;    /* 18 */
  --fs-body:    1rem;        /* 16 */
  --fs-sm:      0.9375rem;   /* 15 */
  --fs-xs:      0.8125rem;   /* 13 */
  --fs-stat:    2.5rem;      /* 40 — stats bar */

  /* Weights */
  --fw-reg:    400;
  --fw-med:    500;
  --fw-sem:    600;
  --fw-bold:   700;
  --fw-black:  800;

  /* Line height */
  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-body:   1.6;

  /* Letter spacing */
  --tr-tight:  -0.02em;
  --tr-wide:   0.04em;

  /* ---------- MOTION ---------- */
  --dur-fast:   160ms;
  --dur-med:    280ms;
  --dur-slow:   600ms;
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
}

/* ============================================================
   SEMANTIC TYPE — use these class names in components
   ============================================================ */

.da-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

h1, .da-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}

h2, .da-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}

h3, .da-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-sem);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}

h4, .da-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-sem);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--sp-2);
}

.da-subtitle {
  font-family: var(--font-display);
  font-weight: var(--fw-med);
  font-size: 1.25rem;
  color: var(--mavi-pale);
  line-height: var(--lh-snug);
}

p, .da-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0 0 var(--sp-4);
}

.da-lead {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.da-small {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--fg-3);
}

.da-caption {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--fg-3);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}

.da-italic-note {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--mavi-ana);
  font-size: var(--fs-sm);
}

.da-stat-num {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-stat);
  line-height: 1;
  color: var(--beyaz);
}

.da-stat-label {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--mavi-pale);
}

/* Utility — page base */
.da-page {
  font-family: var(--font-body);
  color: var(--fg-2);
  background: var(--beyaz);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}