/* =================================================================
   KURUMSAL SERVİS — GLOBAL STYLESHEET
   Versiyon  : 1.0.0
   Güncelleme: 2025
   Kapsam    : Tüm sayfalar (index, ürün, yasal)
================================================================= */


/* =================================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
================================================================= */
:root {

  /* ── Renkler ────────────────────────────────────────────── */
  --clr-primary        : #0f172a;   /* Koyu lacivert – marka rengi    */
  --clr-primary-700    : #1e293b;   /* Hafif açık birincil ton         */
  --clr-primary-600    : #334155;   /* İkincil metin, border hover     */

  --clr-accent         : #2563eb;   /* Mavi – CTA, link, vurgu         */
  --clr-accent-hover   : #1d4ed8;   /* Accent hover tonu               */
  --clr-accent-active  : #1e40af;   /* Accent active / pressed         */
  --clr-accent-light   : #eff6ff;   /* Accent arka plan (soft)         */
  --clr-accent-100     : #dbeafe;   /* Badge, chip arka planı          */

  --clr-success        : #16a34a;   /* Yeşil – onay, güven             */
  --clr-success-light  : #f0fdf4;
  --clr-warning        : #d97706;   /* Sarı – uyarı                    */
  --clr-warning-light  : #fffbeb;
  --clr-danger         : #dc2626;   /* Kırmızı – hata                  */
  --clr-danger-light   : #fef2f2;

  --clr-text           : #1e293b;   /* Ana metin rengi                 */
  --clr-text-muted     : #64748b;   /* İkincil / açıklamalı metin      */
  --clr-text-subtle    : #94a3b8;   /* Placeholder, disabled           */
  --clr-white          : #ffffff;
  --clr-black          : #000000;

  --clr-bg             : #ffffff;   /* Sayfa arka planı                */
  --clr-bg-soft        : #f8fafc;   /* Hafif gri bölüm arka planı      */
  --clr-bg-muted       : #f1f5f9;   /* Kart / input arka planı         */

  --clr-border         : #e2e8f0;   /* Çizgi, kenarlık                 */
  --clr-border-strong  : #cbd5e1;   /* Belirgin kenarlık               */

  /* ── Tipografi ──────────────────────────────────────────── */
  --font-sans          : 'Inter', 'Segoe UI', system-ui, -apple-system,
                         BlinkMacSystemFont, sans-serif;
  --font-mono          : 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --text-xs            : 0.75rem;    /*  12px */
  --text-sm            : 0.875rem;   /*  14px */
  --text-base          : 1rem;       /*  16px */
  --text-lg            : 1.125rem;   /*  18px */
  --text-xl            : 1.25rem;    /*  20px */
  --text-2xl           : 1.5rem;     /*  24px */
  --text-3xl           : 1.875rem;   /*  30px */
  --text-4xl           : 2.25rem;    /*  36px */
  --text-5xl           : 3rem;       /*  48px */

  --fw-normal          : 400;
  --fw-medium          : 500;
  --fw-semibold        : 600;
  --fw-bold            : 700;
  --fw-extrabold       : 800;

  --lh-tight           : 1.2;
  --lh-snug            : 1.375;
  --lh-normal          : 1.5;
  --lh-relaxed         : 1.625;
  --lh-loose           : 1.75;

  --ls-tight           : -0.025em;
  --ls-normal          :  0em;
  --ls-wide            :  0.05em;
  --ls-wider           :  0.1em;

  /* ── Boşluklar ──────────────────────────────────────────── */
  --space-1            : 0.25rem;   /*  4px */
  --space-2            : 0.5rem;    /*  8px */
  --space-3            : 0.75rem;   /* 12px */
  --space-4            : 1rem;      /* 16px */
  --space-5            : 1.25rem;   /* 20px */
  --space-6            : 1.5rem;    /* 24px */
  --space-8            : 2rem;      /* 32px */
  --space-10           : 2.5rem;    /* 40px */
  --space-12           : 3rem;      /* 48px */
  --space-16           : 4rem;      /* 64px */
  --space-20           : 5rem;      /* 80px */
  --space-24           : 6rem;      /* 96px */

  /* ── Köşe Yarıçapları ───────────────────────────────────── */
  --radius-sm          : 6px;
  --radius             : 10px;
  --radius-md          : 12px;
  --radius-lg          : 16px;
  --radius-xl          : 24px;
  --radius-full        : 9999px;

  /* ── Gölgeler ───────────────────────────────────────────── */
  --shadow-xs          : 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm          : 0 1px 3px rgba(0,0,0,.08),
                         0 1px 2px rgba(0,0,0,.05);
  --shadow-md          : 0 4px 16px rgba(0,0,0,.09),
                         0 2px 6px  rgba(0,0,0,.06);
  --shadow-lg          : 0 10px 32px rgba(0,0,0,.11),
                         0 4px 12px  rgba(0,0,0,.07);
  --shadow-xl          : 0 20px 48px rgba(0,0,0,.13),
                         0 8px 20px  rgba(0,0,0,.08);
  --shadow-accent      : 0 4px 20px rgba(37,99,235,.35);
  --shadow-accent-lg   : 0 8px 32px rgba(37,99,235,.45);

  /* ── Geçişler ───────────────────────────────────────────── */
  --transition-fast    : all .15s ease;
  --transition         : all .2s  ease;
  --transition-slow    : all .35s ease;

  /* ── Düzen ──────────────────────────────────────────────── */
  --container          : 1200px;
  --container-sm       : 720px;
  --container-md       : 960px;
  --header-h           : 76px;
  --section-py         : 80px;
  --section-py-sm      : 56px;
}


/* =================================================================
   2. RESET & BASE
================================================================= */
*, *::before, *::after {
  box-sizing  : border-box;
  margin      : 0;
  padding     : 0;
}

html {
  scroll-behavior: smooth;
  font-size      : 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family            : var(--font-sans);
  font-size              : var(--text-base);
  font-weight            : var(--fw-normal);
  line-height            : var(--lh-relaxed);
  color                  : var(--clr-text);
  background-color       : var(--clr-bg);
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height             : 100vh;
}

/* Mobil alt bar için alan bırak */
@media (max-width: 768px) {
  body { padding-bottom: 76px; }
}

/* ── Linkler ── */
a {
  color          : inherit;
  text-decoration: none;
  transition     : var(--transition);
}

/* ── Listeler ── */
ul, ol { list-style: none; }

/* ── Görseller ── */
img, video, svg {
  max-width : 100%;
  height    : auto;
  display   : block;
}

/* ── Formlar ── */
input, textarea, select, button {
  font-family: inherit;
  font-size  : inherit;
}

button { cursor: pointer; }

/* ── Odak erişilebilirliği ── */
:focus-visible {
  outline       : 2px solid var(--clr-accent);
  outline-offset: 3px;
  border-radius : var(--radius-sm);
}

/* ── Seçim rengi ── */
::selection {
  background: var(--clr-accent-100);
  color      : var(--clr-accent-active);
}

/* ── Scrollbar (Webkit) ── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--clr-bg-soft); }
::-webkit-scrollbar-thumb {
  background   : var(--clr-border-strong);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--clr-text-muted); }


/* =================================================================
   3. TİPOGRAFİ
================================================================= */
h1, h2, h3, h4, h5, h6 {
  font-weight  : var(--fw-bold);
  line-height  : var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color        : var(--clr-primary);
}

h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); font-weight: var(--fw-extrabold); }
h2 { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); }
h3 { font-size: clamp(var(--text-lg),  2vw, var(--text-2xl)); }
h4 { font-size: var(--text-xl);  }
h5 { font-size: var(--text-lg);  }
h6 { font-size: var(--text-base);}

p { line-height: var(--lh-loose); }

strong { font-weight: var(--fw-bold); }
em     { font-style: italic; }

small  { font-size: var(--text-xs); color: var(--clr-text-muted); }

.text-xs      { font-size: var(--text-xs);   }
.text-sm      { font-size: var(--text-sm);   }
.text-base    { font-size: var(--text-base); }
.text-lg      { font-size: var(--text-lg);   }
.text-xl      { font-size: var(--text-xl);   }
.text-2xl     { font-size: var(--text-2xl);  }
.text-muted   { color: var(--clr-text-muted);  }
.text-accent  { color: var(--clr-accent);      }
.text-center  { text-align: center; }
.text-right   { text-align: right;  }
.fw-medium    { font-weight: var(--fw-medium);   }
.fw-semibold  { font-weight: var(--fw-semibold); }
.fw-bold      { font-weight: var(--fw-bold);     }
.fw-extrabold { font-weight: var(--fw-extrabold);}


/* =================================================================
   4. LAYOUT YARDIMCILARI
================================================================= */

/* Container */
.container {
  max-width   : var(--container);
  margin-left : auto;
  margin-right: auto;
  padding-left : 24px;
  padding-right: 24px;
}
.container-sm { max-width: var(--container-sm); margin: 0 auto; padding: 0 24px; }
.container-md { max-width: var(--container-md); margin: 0 auto; padding: 0 24px; }

/* Section */
.section    { padding: var(--section-py) 0; }
.section-sm { padding: var(--section-py-sm) 0; }
.section-alt { background: var(--clr-bg-soft); }

/* Section Header */
.section-header {
  text-align   : center;
  margin-bottom: var(--space-12);
}
.section-label {
  display        : inline-block;
  padding        : var(--space-1) var(--space-4);
  background     : var(--clr-accent-light);
  color          : var(--clr-accent);
  border-radius  : var(--radius-full);
  font-size      : var(--text-xs);
  font-weight    : var(--fw-bold);
  text-transform : uppercase;
  letter-spacing : var(--ls-wider);
  margin-bottom  : var(--space-3);
}
.section-title {
  color        : var(--clr-primary);
  margin-bottom: var(--space-3);
}
.section-desc {
  color      : var(--clr-text-muted);
  max-width  : 560px;
  margin     : 0 auto;
  font-size  : var(--text-sm);
  line-height: var(--lh-loose);
}

/* Grid yardımcıları */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

.flex      { display: flex; }
.flex-col  { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* Boşluk yardımcıları */
.mt-0  { margin-top: 0; }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }


/* =================================================================
   5. BUTONLAR
================================================================= */
.btn {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : var(--space-2);
  padding        : 13px 26px;
  border-radius  : var(--radius-full);
  font-family    : var(--font-sans);
  font-weight    : var(--fw-bold);
  font-size      : var(--text-base);
  line-height    : 1;
  cursor         : pointer;
  border         : 2px solid transparent;
  white-space    : nowrap;
  text-decoration: none;
  transition     : var(--transition);
  -webkit-user-select: none;
  user-select    : none;
  position       : relative;
  overflow       : hidden;
}

/* Ripple efekti */
.btn::after {
  content         : '';
  position        : absolute;
  inset           : 0;
  background      : rgba(255,255,255,0);
  transition      : background .15s ease;
  border-radius   : inherit;
}
.btn:active::after { background: rgba(255,255,255,.15); }

/* ── Primary ── */
.btn-primary {
  background  : var(--clr-accent);
  color       : var(--clr-white);
  border-color: var(--clr-accent);
  box-shadow  : var(--shadow-accent);
}
.btn-primary:hover {
  background  : var(--clr-accent-hover);
  border-color: var(--clr-accent-hover);
  transform   : scale(1.03);
  box-shadow  : var(--shadow-accent-lg);
  color       : var(--clr-white);
}
.btn-primary:active { transform: scale(0.99); }

/* ── Secondary ── */
.btn-secondary {
  background  : var(--clr-primary);
  color       : var(--clr-white);
  border-color: var(--clr-primary);
}
.btn-secondary:hover {
  background  : var(--clr-primary-700);
  border-color: var(--clr-primary-700);
  transform   : scale(1.03);
  color       : var(--clr-white);
}

/* ── Outline ── */
.btn-outline {
  background  : transparent;
  color       : var(--clr-accent);
  border-color: var(--clr-accent);
}
.btn-outline:hover {
  background  : var(--clr-accent-light);
  transform   : scale(1.03);
}

/* ── Ghost ── */
.btn-ghost {
  background  : transparent;
  color       : var(--clr-text-muted);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--clr-bg-soft);
  color     : var(--clr-primary);
}

/* ── White (koyu arka plan üzerinde) ── */
.btn-white {
  background  : var(--clr-white);
  color       : var(--clr-accent);
  border-color: var(--clr-white);
}
.btn-white:hover {
  background  : var(--clr-accent-light);
  transform   : scale(1.03);
  box-shadow  : var(--shadow-lg);
}

/* ── Boyutlar ── */
.btn-sm  { padding: 8px  16px; font-size: var(--text-sm);  }
.btn-lg  { padding: 17px 36px; font-size: var(--text-lg);  }
.btn-xl  { padding: 20px 44px; font-size: var(--text-xl);  }
.btn-full{ width: 100%; }

/* ── Telefon CTA özel animasyonu ── */
.btn-phone {
  background: var(--clr-accent);
  color     : var(--clr-white);
  box-shadow: var(--shadow-accent),
              0 0 0 0 rgba(37,99,235,.5);
  animation : btn-glow-pulse 3s infinite;
  border-color: var(--clr-accent);
}
.btn-phone:hover {
  animation: none;
  background : var(--clr-accent-hover);
  transform  : scale(1.04);
  box-shadow : var(--shadow-accent-lg);
  color      : var(--clr-white);
}
@keyframes btn-glow-pulse {
  0%,100% { box-shadow: var(--shadow-accent), 0 0 0 0  rgba(37,99,235,.3); }
  50%     { box-shadow: var(--shadow-accent), 0 0 0 10px rgba(37,99,235,0); }
}


/* =================================================================
   6. FORM ELEMENTLERİ
================================================================= */

/* Label */
.form-label {
  display      : block;
  font-size    : var(--text-sm);
  font-weight  : var(--fw-semibold);
  color        : var(--clr-primary);
  margin-bottom: var(--space-2);
}
.form-label .required {
  color       : var(--clr-danger);
  margin-left : 2px;
}

/* Input & Textarea & Select */
.form-control {
  display      : block;
  width        : 100%;
  padding      : 12px 16px;
  background   : var(--clr-white);
  border       : 1.5px solid var(--clr-border);
  border-radius: var(--radius);
  font-family  : var(--font-sans);
  font-size    : var(--text-base);
  color        : var(--clr-text);
  line-height  : var(--lh-normal);
  transition   : var(--transition);
  outline      : none;
  appearance   : none;
  -webkit-appearance: none;
}
.form-control::placeholder { color: var(--clr-text-subtle); }
.form-control:hover        { border-color: var(--clr-border-strong); }
.form-control:focus {
  border-color: var(--clr-accent);
  box-shadow  : 0 0 0 3px rgba(37,99,235,.15);
}
.form-control.error {
  border-color: var(--clr-danger);
  box-shadow  : 0 0 0 3px rgba(220,38,38,.12);
}
.form-control.success {
  border-color: var(--clr-success);
  box-shadow  : 0 0 0 3px rgba(22,163,74,.12);
}

textarea.form-control {
  resize    : vertical;
  min-height: 120px;
}

select.form-control {
  background-image   : url("data:image/svg+xml,%3Csvg width='12' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat  : no-repeat;
  background-position: right 16px center;
  padding-right      : 40px;
  cursor             : pointer;
}

/* Form hint */
.form-hint {
  margin-top: var(--space-1);
  font-size : var(--text-xs);
  color     : var(--clr-text-muted);
}
.form-hint.error   { color: var(--clr-danger); }
.form-hint.success { color: var(--clr-success); }

/* Form grup */
.form-group { display: flex; flex-direction: column; gap: 0; margin-bottom: var(--space-5); }

/* Checkbox & Radio */
.form-check {
  display    : flex;
  align-items: flex-start;
  gap        : var(--space-3);
  cursor     : pointer;
}
.form-check-input {
  flex-shrink  : 0;
  width        : 18px;
  height       : 18px;
  margin-top   : 2px;
  border       : 2px solid var(--clr-border-strong);
  border-radius: var(--radius-sm);
  background   : var(--clr-white);
  appearance   : none;
  -webkit-appearance: none;
  cursor       : pointer;
  transition   : var(--transition);
  position     : relative;
}
.form-check-input:checked {
  background  : var(--clr-accent);
  border-color: var(--clr-accent);
}
.form-check-input:checked::after {
  content  : '';
  position : absolute;
  top      : 1px;
  left     : 4px;
  width    : 5px;
  height   : 9px;
  border   : 2px solid var(--clr-white);
  border-top   : none;
  border-left  : none;
  transform: rotate(45deg);
}
.form-check-input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.2);
}
.form-check-label {
  font-size  : var(--text-sm);
  color      : var(--clr-text-muted);
  line-height: var(--lh-relaxed);
}
.form-check-label a { color: var(--clr-accent); font-weight: var(--fw-semibold); }
.form-check-label a:hover { text-decoration: underline; }

/* Form başarı/hata mesajı */
.form-message {
  padding      : var(--space-4);
  border-radius: var(--radius);
  font-size    : var(--text-sm);
  font-weight  : var(--fw-semibold);
  display      : flex;
  align-items  : center;
  gap          : var(--space-3);
}
.form-message.success {
  background  : var(--clr-success-light);
  color       : var(--clr-success);
  border      : 1px solid rgba(22,163,74,.2);
}
.form-message.error {
  background  : var(--clr-danger-light);
  color       : var(--clr-danger);
  border      : 1px solid rgba(220,38,38,.2);
}

/* Form grid */
.form-grid-2 {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : var(--space-4);
}
@media (max-width: 600px) {
  .form-grid-2 { grid-template-columns: 1fr; }
}


/* =================================================================
   7. HEADER
================================================================= */
.header {
  position         : sticky;
  top              : 0;
  z-index          : 1000;
  background       : rgba(255,255,255,.96);
  backdrop-filter  : blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom    : 1px solid var(--clr-border);
  height           : var(--header-h);
  transition       : box-shadow .3s ease;
}
.header.scrolled { box-shadow: var(--shadow-md); }

.header-inner {
  display              : grid;
  grid-template-columns: 1fr auto 1fr;
  align-items          : center;
  height               : 100%;
  padding-top          : 16px;
}

/* Nav tam ortalı */
.header-inner .nav {
  justify-self: center;
}

/* CTA sağa yasla */
.header-inner .header-cta {
  justify-self: end;
}

/* ── Logo ─────────────────────────────────────────── */
.logo {
  display        : inline-flex;
  flex-direction : row;
  align-items    : center;
  gap            : 12px;
  text-decoration: none;
  flex-shrink    : 0;
  transition     : opacity .2s;
}
.logo:hover { opacity: .88; }

/* İkon kutusu */
.logo-mark {
  width          : 42px;
  height         : 42px;
  background     : linear-gradient(145deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
  border-radius  : 12px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  flex-shrink    : 0;
  box-shadow     : 0 2px 0 rgba(0,0,0,.15),
                   0 6px 20px rgba(37,99,235,.4),
                   inset 0 1px 0 rgba(255,255,255,.25);
  transition     : var(--transition);
  position       : relative;
  overflow       : hidden;
}
.logo-mark::after {
  content  : '';
  position : absolute;
  inset    : 0;
  background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, transparent 60%);
  border-radius: 12px;
}
.logo-mark svg {
  position: relative;
  z-index : 1;
  filter  : drop-shadow(0 1px 2px rgba(0,0,0,.2));
}
.logo:hover .logo-mark {
  box-shadow: 0 2px 0 rgba(0,0,0,.15),
              0 10px 28px rgba(37,99,235,.55),
              inset 0 1px 0 rgba(255,255,255,.25);
  transform : translateY(-1px);
}

/* Dikey separator */
.logo-divider {
  width        : 1px;
  height       : 28px;
  background   : var(--clr-border);
  flex-shrink  : 0;
}

/* Metin bloğu */
.logo-text {
  display       : flex;
  flex-direction: column;
  gap           : 3px;
  line-height   : 1;
}
.logo-name {
  font-size    : 17px;
  font-weight  : 800;
  color        : var(--clr-primary);
  letter-spacing: -0.5px;
  line-height  : 1;
}
.logo-name-accent {
  color          : var(--clr-accent);
  background     : linear-gradient(90deg, #2563eb, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.logo-tagline {
  font-size     : 9px;
  color         : var(--clr-text-muted);
  font-weight   : 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height   : 1;
}

/* Footer logosu */
.footer-brand .logo-divider  { background: rgba(255,255,255,.15); }
.footer-brand .logo-name     { color: #ffffff; }
.footer-brand .logo-name-accent {
  background             : linear-gradient(90deg, #60a5fa, #93c5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip        : text;
}
.footer-brand .logo-tagline  { color: rgba(255,255,255,.35); }

/* Nav */
.nav {
  display    : flex;
  align-items: center;
  gap        : var(--space-1);
}
.nav-link {
  padding      : var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-size    : var(--text-sm);
  font-weight  : var(--fw-medium);
  color        : var(--clr-text-muted);
  transition   : var(--transition);
  white-space  : nowrap;
}
.nav-link:hover        { color: var(--clr-primary); background: var(--clr-bg-soft); }
.nav-link.active       { color: var(--clr-accent);  background: var(--clr-accent-light); }

/* Nav Dropdown */
.nav-dropdown          { position: relative; }
.nav-dropdown-toggle {
  display      : flex;
  align-items  : center;
  gap          : var(--space-1);
  padding      : var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-size    : var(--text-sm);
  font-weight  : var(--fw-medium);
  color        : var(--clr-text-muted);
  cursor       : pointer;
  transition   : var(--transition);
  background   : none;
  border       : none;
  white-space  : nowrap;
}
.nav-dropdown-toggle:hover      { color: var(--clr-primary); background: var(--clr-bg-soft); }
.nav-dropdown-toggle svg        { transition: transform .2s ease; flex-shrink: 0; }
.nav-dropdown.open .nav-dropdown-toggle svg  { transform: rotate(180deg); }

.nav-dropdown-menu {
  position   : absolute;
  top        : calc(100% + 8px);
  left       : 0;
  background : var(--clr-white);
  border     : 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow : var(--shadow-xl);
  padding    : var(--space-2);
  min-width  : 230px;
  opacity    : 0;
  visibility : hidden;
  transform  : translateY(-8px);
  transition : all .2s ease;
  z-index    : 100;
}
.nav-dropdown.open .nav-dropdown-menu {
  opacity   : 1;
  visibility: visible;
  transform : translateY(0);
}
.nav-dropdown-menu a {
  display      : flex;
  align-items  : center;
  gap          : var(--space-3);
  padding      : 10px var(--space-3);
  border-radius: var(--radius);
  font-size    : var(--text-sm);
  font-weight  : var(--fw-medium);
  color        : var(--clr-text);
  transition   : var(--transition);
}
.nav-dropdown-menu a:hover {
  background: var(--clr-accent-light);
  color     : var(--clr-accent);
}
.nav-dropdown-menu a span { font-size: var(--text-lg); line-height: 1; }

/* Header CTA */
.header-cta {
  display    : flex;
  align-items: center;
  gap        : var(--space-3);
}
.header-phone {
  display      : flex;
  align-items  : center;
  gap          : var(--space-2);
  padding      : 10px 22px;
  background   : linear-gradient(135deg, #2563eb, #1d4ed8);
  color        : var(--clr-white);
  border-radius: var(--radius-full);
  font-weight  : var(--fw-bold);
  font-size    : var(--text-sm);
  box-shadow   : 0 2px 0 rgba(0,0,0,.15), 0 4px 14px rgba(37,99,235,.4);
  transition   : var(--transition);
  white-space  : nowrap;
  letter-spacing: .01em;
}
.header-phone:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  transform : translateY(-1px);
  box-shadow: 0 2px 0 rgba(0,0,0,.15), 0 8px 22px rgba(37,99,235,.55);
  color     : var(--clr-white);
}

/* Hamburger */
.hamburger {
  display         : none;
  flex-direction  : column;
  gap             : 5px;
  cursor          : pointer;
  padding         : var(--space-2);
  background      : none;
  border          : none;
  border-radius   : var(--radius);
  transition      : var(--transition);
}
.hamburger:hover    { background: var(--clr-bg-soft); }
.hamburger span {
  display      : block;
  width        : 24px;
  height       : 2px;
  background   : var(--clr-primary);
  border-radius: 2px;
  transition   : var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* =================================================================
   8. MOBİL NAV
================================================================= */
.mobile-nav {
  display   : none;
  position  : fixed;
  inset     : 0;
  z-index   : 999;
  background: rgba(15,23,42,.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mobile-nav.open  { display: flex; }

.mobile-nav-panel {
  position  : absolute;
  top       : 0;
  right     : 0;
  width     : min(360px, 90vw);
  height    : 100%;
  background: var(--clr-white);
  padding   : var(--space-6);
  overflow-y: auto;
  display   : flex;
  flex-direction: column;
  gap       : var(--space-2);
  box-shadow: var(--shadow-xl);
  animation : slide-from-right .25s ease;
}
@keyframes slide-from-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0);    }
}

.mobile-nav-header {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  margin-bottom  : var(--space-4);
  padding-bottom : var(--space-4);
  border-bottom  : 1px solid var(--clr-border);
}
.mobile-nav-close {
  width        : 36px;
  height       : 36px;
  border-radius: 50%;
  background   : var(--clr-bg-soft);
  border       : none;
  cursor       : pointer;
  display      : flex;
  align-items  : center;
  justify-content: center;
  font-size    : var(--text-base);
  color        : var(--clr-text-muted);
  transition   : var(--transition);
}
.mobile-nav-close:hover { background: var(--clr-border); color: var(--clr-primary); }

.mobile-nav-label {
  font-size    : var(--text-xs);
  font-weight  : var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color        : var(--clr-text-subtle);
  padding      : var(--space-3) var(--space-4) var(--space-1);
}
.mobile-nav-link {
  display      : flex;
  align-items  : center;
  gap          : var(--space-3);
  padding      : var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-weight  : var(--fw-medium);
  color        : var(--clr-text);
  transition   : var(--transition);
  font-size    : var(--text-sm);
}
.mobile-nav-link:hover {
  background: var(--clr-bg-soft);
  color     : var(--clr-accent);
}
.mobile-nav-phone {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : var(--space-3);
  padding        : var(--space-5);
  background     : var(--clr-accent);
  color          : var(--clr-white);
  border-radius  : var(--radius);
  font-weight    : var(--fw-bold);
  font-size      : var(--text-base);
  margin-top     : var(--space-4);
  transition     : var(--transition);
}
.mobile-nav-phone:hover { background: var(--clr-accent-hover); color: var(--clr-white); }


/* =================================================================
   9. HERO (ANA SAYFA)
================================================================= */
.hero {
  padding   : 80px 0 64px;
  background: linear-gradient(135deg, var(--clr-primary) 0%, #1a3255 100%);
  position  : relative;
  overflow  : hidden;
}
.hero-pattern {
  position: absolute;
  inset   : 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.hero-inner {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 60px;
  align-items          : center;
  position             : relative;
  z-index              : 1;
}

/* Hero Sol */
.hero-left { display: flex; flex-direction: column; gap: var(--space-6); }

.hero-badge {
  display      : inline-flex;
  align-items  : center;
  gap          : var(--space-2);
  padding      : 6px var(--space-4);
  background   : rgba(255,255,255,.1);
  border       : 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-full);
  font-size    : var(--text-xs);
  font-weight  : var(--fw-semibold);
  color        : rgba(255,255,255,.85);
  width        : fit-content;
}
.hero-badge-dot {
  width        : 8px;
  height       : 8px;
  background   : #4ade80;
  border-radius: 50%;
  animation    : dot-pulse 2s infinite;
  flex-shrink  : 0;
}
@keyframes dot-pulse {
  0%,100% { opacity: 1; transform: scale(1);   }
  50%     { opacity: .6; transform: scale(1.25); }
}

.hero-title {
  color      : var(--clr-white);
  text-shadow: 0 2px 16px rgba(0,0,0,.25);
}
.hero-title-accent { color: #60a5fa; }

.hero-desc {
  font-size  : var(--text-lg);
  color      : rgba(255,255,255,.75);
  max-width  : 480px;
  line-height: var(--lh-loose);
}
.hero-desc strong { color: rgba(255,255,255,.95); }

/* Hero güven maddeleri */
.hero-trust {
  display        : flex;
  flex-direction : row;
  flex-wrap      : wrap;
  justify-content: center;
  gap            : 10px 20px;
}
.hero-trust-item {
  display    : flex;
  align-items: center;
  gap        : var(--space-2);
  font-size  : var(--text-sm);
  font-weight: var(--fw-medium);
  color      : rgba(255,255,255,.9);
}
.hero-trust-check {
  width          : 20px;
  height         : 20px;
  background     : rgba(74,222,128,.2);
  border         : 1px solid rgba(74,222,128,.4);
  border-radius  : 50%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : #4ade80;
  font-size      : var(--text-xs);
  flex-shrink    : 0;
}

/* Hero CTA */
.hero-cta {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : var(--space-3);
  width          : 100%;
}
.hero-cta-note {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : var(--space-2);
  font-size      : var(--text-xs);
  color          : rgba(255,255,255,.5);
}
.hero-cta-note::before { content: '⏱'; }

/* Hero Sağ */
.hero-right       { position: relative; }
.hero-img-wrapper {
  position     : relative;
  border-radius: var(--radius-lg);
  overflow     : hidden;
  box-shadow   : 0 24px 64px rgba(0,0,0,.45);
}
.hero-img-wrapper img {
  width       : 100%;
  aspect-ratio: 4/3;
  object-fit  : cover;
}
.hero-img-overlay {
  position  : absolute;
  inset     : 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(15,23,42,.5) 100%);
}

/* Hero floating stat kartları */
.hero-stat {
  position       : absolute;
  background     : rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-radius  : var(--radius);
  padding        : var(--space-3) var(--space-5);
  box-shadow     : var(--shadow-xl);
  display        : flex;
  align-items    : center;
  gap            : var(--space-3);
}
.hero-stat-top    { top: -16px; right: -16px; }
.hero-stat-bottom { bottom: 16px; left: -16px; }
.hero-stat-icon   { font-size: var(--text-2xl); line-height: 1; }
.hero-stat-text strong {
  display    : block;
  font-size  : var(--text-base);
  font-weight: var(--fw-extrabold);
  color      : var(--clr-primary);
  line-height: 1.2;
}
.hero-stat-text span { font-size: var(--text-xs); color: var(--clr-text-muted); }


/* =================================================================
   10. HERO (ÜRÜN SAYFALARI)
================================================================= */
.hero-product {
  padding   : 60px 0 48px;
  background: linear-gradient(135deg, var(--clr-primary) 0%, #1a3255 100%);
  position  : relative;
  overflow  : hidden;
}
.hero-product .hero-pattern { position: absolute; inset: 0; pointer-events: none; }

.hero-product-inner {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  text-align     : center;
  gap            : var(--space-6);
  position       : relative;
  z-index        : 1;
  max-width      : 760px;
  margin         : 0 auto;
}

.hero-product-left {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : var(--space-5);
  width          : 100%;
}

.hero-product-breadcrumb {
  display         : flex;
  align-items     : center;
  justify-content : center;
  flex-wrap       : wrap;
  gap             : var(--space-2);
  font-size       : var(--text-xs);
  color           : rgba(255,255,255,.5);
}
.hero-product-breadcrumb a {
  color     : rgba(255,255,255,.6);
  transition: var(--transition);
}
.hero-product-breadcrumb a:hover { color: var(--clr-white); }
.hero-product-breadcrumb span { color: rgba(255,255,255,.35); }

.hero-product-title {
  color      : var(--clr-white);
  text-shadow: 0 2px 12px rgba(0,0,0,.2);
  font-size  : clamp(var(--text-2xl), 5vw, var(--text-4xl));
  text-align : center;
}
.hero-product-desc {
  font-size  : var(--text-base);
  color      : rgba(255,255,255,.72);
  line-height: var(--lh-loose);
  max-width  : 580px;
  text-align : center;
}

/* Görsel tamamen gizlendi */
.hero-product-right { display: none; }
.hero-product-img   { display: none; }


/* =================================================================
   11. GÜVEN BANDI
================================================================= */
.trust-band {
  background  : var(--clr-accent-light);
  border-top  : 1px solid var(--clr-accent-100);
  border-bottom: 1px solid var(--clr-accent-100);
  padding     : 14px 0;
}
.trust-band-inner {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : var(--space-8);
  flex-wrap      : wrap;
}
.trust-band-item {
  display    : flex;
  align-items: center;
  gap        : var(--space-2);
  font-size  : var(--text-sm);
  font-weight: var(--fw-semibold);
  color      : var(--clr-accent);
  white-space: nowrap;
}


/* =================================================================
   12. ÜRÜN KARTLARI
================================================================= */
.products-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap                  : var(--space-6);
}

.product-card {
  background   : var(--clr-white);
  border       : 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow     : hidden;
  transition   : var(--transition-slow);
  display      : flex;
  flex-direction: column;
  text-decoration: none;
  color        : inherit;
}
.product-card:hover {
  transform   : translateY(-5px);
  box-shadow  : var(--shadow-xl);
  border-color: var(--clr-accent-100);
}

.product-card-img {
  aspect-ratio: 16/9;
  overflow    : hidden;
  background  : var(--clr-bg-muted);
  position    : relative;
}
.product-card-img img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.product-card:hover .product-card-img img { transform: scale(1.06); }

.product-card-emoji {
  position       : absolute;
  top            : var(--space-3);
  left           : var(--space-3);
  width          : 40px;
  height         : 40px;
  background     : rgba(255,255,255,.92);
  border-radius  : var(--radius);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : var(--text-xl);
  box-shadow     : var(--shadow-sm);
}

.product-card-body {
  padding       : var(--space-5);
  flex          : 1;
  display       : flex;
  flex-direction: column;
  gap           : var(--space-2);
}
.product-card-title {
  font-size  : var(--text-base);
  font-weight: var(--fw-bold);
  color      : var(--clr-primary);
}
.product-card-desc {
  font-size  : var(--text-sm);
  color      : var(--clr-text-muted);
  line-height: var(--lh-relaxed);
  flex       : 1;
}
.product-card-link {
  display    : flex;
  align-items: center;
  gap        : var(--space-2);
  font-size  : var(--text-xs);
  font-weight: var(--fw-bold);
  color      : var(--clr-accent);
  margin-top : var(--space-1);
}
.product-card-link svg { transition: transform .2s ease; }
.product-card:hover .product-card-link svg { transform: translateX(4px); }


/* =================================================================
   13. ÖZELLİK KARTLARI
================================================================= */
.features-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap                  : var(--space-6);
}

.feature-card {
  background   : var(--clr-white);
  border       : 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding      : var(--space-8) var(--space-6);
  transition   : var(--transition);
}
.feature-card:hover {
  border-color: var(--clr-accent-100);
  box-shadow  : var(--shadow-md);
  transform   : translateY(-3px);
}

.feature-icon {
  width          : 52px;
  height         : 52px;
  background     : var(--clr-accent-light);
  border-radius  : var(--radius);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : var(--text-2xl);
  margin-bottom  : var(--space-4);
  line-height    : 1;
}
.feature-title {
  font-size    : var(--text-base);
  font-weight  : var(--fw-bold);
  color        : var(--clr-primary);
  margin-bottom: var(--space-2);
}
.feature-desc {
  font-size  : var(--text-sm);
  color      : var(--clr-text-muted);
  line-height: var(--lh-loose);
}


/* =================================================================
   14. ADIM BÖLÜMÜ (NASIL ÇALIŞIR)
================================================================= */
.steps-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap                  : var(--space-8);
  position             : relative;
}
.steps-grid::before {
  content   : '';
  position  : absolute;
  top       : 27px;
  left      : 10%;
  right     : 10%;
  height    : 2px;
  background: linear-gradient(90deg, transparent, var(--clr-border), transparent);
}

.step-item {
  text-align    : center;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : var(--space-4);
  position      : relative;
  z-index       : 1;
}
.step-number {
  width          : 54px;
  height         : 54px;
  background     : var(--clr-accent);
  color          : var(--clr-white);
  border-radius  : 50%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : var(--text-lg);
  font-weight    : var(--fw-extrabold);
  box-shadow     : var(--shadow-accent);
  flex-shrink    : 0;
}
.step-title {
  font-size  : var(--text-base);
  font-weight: var(--fw-bold);
  color      : var(--clr-primary);
}
.step-desc {
  font-size  : var(--text-sm);
  color      : var(--clr-text-muted);
  line-height: var(--lh-relaxed);
}


/* =================================================================
   15. HİZMET KAPSAMI (ÜRÜN SAYFALARI)
================================================================= */
.service-scope {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap                  : var(--space-4);
}

.scope-item {
  display      : flex;
  align-items  : flex-start;
  gap          : var(--space-4);
  padding      : var(--space-5);
  background   : var(--clr-white);
  border       : 1px solid var(--clr-border);
  border-radius: var(--radius);
  transition   : var(--transition);
}
.scope-item:hover {
  border-color: var(--clr-accent-100);
  box-shadow  : var(--shadow-sm);
}
.scope-item-icon {
  width          : 40px;
  height         : 40px;
  background     : var(--clr-accent-light);
  border-radius  : var(--radius-sm);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : var(--text-xl);
  flex-shrink    : 0;
}
.scope-item-body {}
.scope-item-title {
  font-size    : var(--text-sm);
  font-weight  : var(--fw-bold);
  color        : var(--clr-primary);
  margin-bottom: var(--space-1);
}
.scope-item-desc {
  font-size  : var(--text-xs);
  color      : var(--clr-text-muted);
  line-height: var(--lh-relaxed);
}


/* =================================================================
   16. ACCORDION (SSS)
================================================================= */
.faq-list {
  display       : flex;
  flex-direction: column;
  gap           : var(--space-3);
  max-width     : 760px;
  margin        : 0 auto;
}

.faq-item {
  background   : var(--clr-white);
  border       : 1px solid var(--clr-border);
  border-radius: var(--radius);
  overflow     : hidden;
  transition   : border-color .2s ease, box-shadow .2s ease;
}
.faq-item.open {
  border-color: var(--clr-accent-100);
  box-shadow  : var(--shadow-sm);
}

.faq-trigger {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : var(--space-4);
  width          : 100%;
  padding        : var(--space-5) var(--space-6);
  background     : none;
  border         : none;
  cursor         : pointer;
  text-align     : left;
  transition     : background .15s ease;
}
.faq-trigger:hover { background: var(--clr-bg-soft); }
.faq-item.open .faq-trigger { background: var(--clr-accent-light); }

.faq-question {
  font-size  : var(--text-base);
  font-weight: var(--fw-semibold);
  color      : var(--clr-primary);
  line-height: var(--lh-snug);
}
.faq-item.open .faq-question { color: var(--clr-accent); }

.faq-icon {
  width          : 28px;
  height         : 28px;
  background     : var(--clr-bg-muted);
  border-radius  : 50%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  flex-shrink    : 0;
  transition     : transform .25s ease, background .2s ease;
  color          : var(--clr-text-muted);
}
.faq-item.open .faq-icon {
  transform : rotate(180deg);
  background: var(--clr-accent);
  color     : var(--clr-white);
}

.faq-answer {
  max-height : 0;
  overflow   : hidden;
  transition : max-height .3s ease, padding .3s ease;
  padding    : 0 var(--space-6);
}
.faq-item.open .faq-answer {
  max-height: 600px;
  padding   : 0 var(--space-6) var(--space-5);
}
.faq-answer p {
  font-size  : var(--text-sm);
  color      : var(--clr-text-muted);
  line-height: var(--lh-loose);
}
.faq-answer a { color: var(--clr-accent); font-weight: var(--fw-semibold); }
.faq-answer a:hover { text-decoration: underline; }


/* =================================================================
   17. SERVİS TALEP FORMU (ÜRÜN SAYFALARI)
================================================================= */
.service-form-wrapper {
  background   : var(--clr-white);
  border       : 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding      : var(--space-8);
  box-shadow   : var(--shadow-sm);
  max-width    : 640px;
  margin       : 0 auto;
}
.service-form-title {
  font-size    : var(--text-xl);
  font-weight  : var(--fw-bold);
  color        : var(--clr-primary);
  margin-bottom: var(--space-2);
  text-align   : center;
}
.service-form-desc {
  font-size    : var(--text-sm);
  color        : var(--clr-text-muted);
  text-align   : center;
  margin-bottom: var(--space-6);
}


/* =================================================================
   18. YORUM KARTLARI
================================================================= */
.reviews-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap                  : var(--space-6);
}

.review-card {
  background    : var(--clr-white);
  border        : 1px solid var(--clr-border);
  border-radius : var(--radius-lg);
  padding       : var(--space-6);
  display       : flex;
  flex-direction: column;
  gap           : var(--space-3);
  transition    : var(--transition);
}
.review-card:hover {
  box-shadow  : var(--shadow-md);
  transform   : translateY(-3px);
  border-color: var(--clr-accent-100);
}

.review-stars   { color: #f59e0b; font-size: var(--text-base); letter-spacing: 2px; }
.review-text {
  font-size  : var(--text-sm);
  color      : var(--clr-text);
  line-height: var(--lh-loose);
  font-style : italic;
  flex       : 1;
}
.review-author {
  display    : flex;
  align-items: center;
  gap        : var(--space-3);
  margin-top : var(--space-2);
}
.review-avatar {
  width          : 38px;
  height         : 38px;
  border-radius  : 50%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-weight    : var(--fw-extrabold);
  font-size      : var(--text-xs);
  color          : var(--clr-white);
  flex-shrink    : 0;
}
.review-name { font-size: var(--text-sm);  font-weight: var(--fw-bold);   color: var(--clr-primary); }
.review-city { font-size: var(--text-xs);  color: var(--clr-text-muted);  }


/* =================================================================
   19. CTA BANNER
================================================================= */
.cta-banner {
  background: linear-gradient(135deg, var(--clr-primary) 0%, #1a3255 100%);
  padding   : 72px 0;
  text-align: center;
  position  : relative;
  overflow  : hidden;
}
.cta-banner-inner { position: relative; z-index: 1; }
.cta-banner-title {
  font-size    : clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight  : var(--fw-extrabold);
  color        : var(--clr-white);
  margin-bottom: var(--space-3);
}
.cta-banner-desc {
  color        : rgba(255,255,255,.7);
  font-size    : var(--text-base);
  margin-bottom: var(--space-8);
  max-width    : 500px;
  margin-left  : auto;
  margin-right : auto;
}
.cta-banner-phone {
  display      : block;
  font-size    : clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight  : var(--fw-extrabold);
  color        : var(--clr-white);
  margin-bottom: var(--space-6);
  text-shadow  : 0 2px 16px rgba(0,0,0,.25);
  letter-spacing: var(--ls-tight);
}
.cta-banner-actions {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : var(--space-4);
  flex-wrap      : wrap;
}


/* =================================================================
   20. FOOTER
================================================================= */
.footer {
  background: var(--clr-primary);
  color     : rgba(255,255,255,.7);
  padding   : 60px 0 0;
}

.footer-top {
  display              : grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap                  : var(--space-10);
  padding-bottom       : var(--space-10);
}

.footer-brand .logo-name    { color: var(--clr-white); }
.footer-brand .logo-tagline { color: rgba(255,255,255,.4); }
.footer-brand-desc {
  margin-top : var(--space-4);
  font-size  : var(--text-sm);
  line-height: var(--lh-loose);
  color      : rgba(255,255,255,.5);
}
.footer-brand-phone {
  display      : flex;
  align-items  : center;
  gap          : var(--space-2);
  margin-top   : var(--space-4);
  padding      : 10px var(--space-5);
  background   : var(--clr-accent);
  color        : var(--clr-white);
  border-radius: var(--radius-full);
  font-weight  : var(--fw-bold);
  font-size    : var(--text-sm);
  width        : fit-content;
  transition   : var(--transition);
}
.footer-brand-phone:hover { background: var(--clr-accent-hover); color: var(--clr-white); }

.footer-brand-email {
  display      : flex;
  align-items  : center;
  gap          : var(--space-2);
  margin-top   : var(--space-2);
  padding      : 8px var(--space-5);
  background   : rgba(255,255,255,.06);
  border       : 1px solid rgba(255,255,255,.12);
  color        : rgba(255,255,255,.65);
  border-radius: var(--radius-full);
  font-size    : var(--text-xs);
  width        : fit-content;
  transition   : var(--transition);
}
.footer-brand-email:hover {
  background: rgba(255,255,255,.1);
  color     : var(--clr-white);
}

.footer-col-title {
  font-size    : var(--text-xs);
  font-weight  : var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color        : rgba(255,255,255,.35);
  margin-bottom: var(--space-4);
}

.footer-links { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-links a {
  font-size : var(--text-sm);
  color     : rgba(255,255,255,.55);
  transition: var(--transition);
  display   : flex;
  align-items: center;
  gap       : var(--space-2);
}
.footer-links a:hover { color: var(--clr-white); padding-left: var(--space-1); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding   : var(--space-5) 0;
}
.footer-bottom-inner {
  display       : flex;
  flex-direction: column;
  gap           : var(--space-3);
}
.footer-disclaimer {
  font-size    : var(--text-xs);
  color        : rgba(255,255,255,.3);
  line-height  : var(--lh-loose);
  text-align   : center;
  padding      : var(--space-3) var(--space-4);
  background   : rgba(255,255,255,.04);
  border-radius: var(--radius);
  border       : 1px solid rgba(255,255,255,.06);
}
.footer-copy {
  text-align: center;
  font-size : var(--text-xs);
  color     : rgba(255,255,255,.25);
}


/* =================================================================
   21. STICKY CALL BOX (MASAÜSTÜ)
================================================================= */
.sticky-call-box {
  position  : fixed;
  bottom    : 28px;
  right     : 28px;
  z-index   : 900;
  background: var(--clr-white);
  border    : 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding   : var(--space-4) var(--space-5);
  box-shadow: var(--shadow-xl);
  display   : flex;
  align-items: center;
  gap       : var(--space-3);
  transition: var(--transition);
  animation : slide-in-right .4s ease .8s both;
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0);    }
}
.sticky-call-box:hover {
  box-shadow: 0 14px 44px rgba(0,0,0,.15);
  transform : translateY(-3px);
}

.sticky-call-icon {
  width          : 44px;
  height         : 44px;
  background     : var(--clr-accent);
  border-radius  : 50%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : var(--clr-white);
  font-size      : var(--text-xl);
  flex-shrink    : 0;
  box-shadow     : var(--shadow-accent);
  animation      : ring-bell 3.5s infinite;
  text-decoration: none;
}
@keyframes ring-bell {
  0%,75%,100% { transform: rotate(0); }
  80%  { transform: rotate(-18deg); }
  85%  { transform: rotate(18deg); }
  90%  { transform: rotate(-12deg); }
  95%  { transform: rotate(12deg); }
}

.sticky-call-text strong {
  display    : block;
  font-size  : var(--text-sm);
  font-weight: var(--fw-bold);
  color      : var(--clr-primary);
  white-space: nowrap;
}
.sticky-call-text span {
  font-size: var(--text-xs);
  color    : var(--clr-text-muted);
}
.sticky-call-close {
  position       : absolute;
  top            : -8px;
  right          : -8px;
  width          : 22px;
  height         : 22px;
  background     : var(--clr-text-muted);
  color          : var(--clr-white);
  border-radius  : 50%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : var(--text-xs);
  cursor         : pointer;
  border         : 2px solid var(--clr-white);
  transition     : var(--transition);
}
.sticky-call-close:hover { background: var(--clr-primary); }


/* =================================================================
   22. MOBİL ALT ARAMA BARI
================================================================= */
.mobile-call-bar {
  display  : none;
  position : fixed;
  bottom   : 0;
  left     : 0;
  right    : 0;
  z-index  : 900;
  padding  : var(--space-3) var(--space-4);
  background: var(--clr-white);
  border-top: 1px solid var(--clr-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,.1);
}
.mobile-call-bar a {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : var(--space-3);
  background     : var(--clr-accent);
  color          : var(--clr-white);
  padding        : 16px;
  border-radius  : var(--radius);
  font-weight    : var(--fw-extrabold);
  font-size      : var(--text-lg);
  box-shadow     : var(--shadow-accent);
  transition     : var(--transition);
}
.mobile-call-bar a:active { transform: scale(.98); }


/* =================================================================
   23. YASAL SAYFALAR (KVKK, GİZLİLİK, KULLANIM KOŞULLARI)
================================================================= */
.legal-hero {
  background: var(--clr-bg-soft);
  border-bottom: 1px solid var(--clr-border);
  padding   : 48px 0 40px;
}
.legal-hero-label {
  display        : inline-block;
  padding        : 4px var(--space-4);
  background     : var(--clr-accent-light);
  color          : var(--clr-accent);
  border-radius  : var(--radius-full);
  font-size      : var(--text-xs);
  font-weight    : var(--fw-bold);
  text-transform : uppercase;
  letter-spacing : var(--ls-wider);
  margin-bottom  : var(--space-4);
}
.legal-hero-title {
  font-size    : clamp(var(--text-2xl), 3vw, var(--text-4xl));
  color        : var(--clr-primary);
  margin-bottom: var(--space-2);
}
.legal-hero-date {
  font-size: var(--text-sm);
  color    : var(--clr-text-muted);
}

.legal-content {
  padding  : var(--space-12) 0 var(--space-20);
  max-width: var(--container-sm);
  margin   : 0 auto;
}
.legal-content h2 {
  font-size    : var(--text-xl);
  margin-top   : var(--space-8);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--clr-border);
}
.legal-content h3 {
  font-size    : var(--text-lg);
  margin-top   : var(--space-6);
  margin-bottom: var(--space-3);
}
.legal-content p {
  font-size    : var(--text-sm);
  color        : var(--clr-text-muted);
  line-height  : var(--lh-loose);
  margin-bottom: var(--space-4);
}
.legal-content ul {
  list-style   : disc;
  padding-left : var(--space-6);
  margin-bottom: var(--space-4);
}
.legal-content ul li {
  font-size  : var(--text-sm);
  color      : var(--clr-text-muted);
  line-height: var(--lh-loose);
  margin-bottom: var(--space-2);
}
.legal-content a { color: var(--clr-accent); }
.legal-content a:hover { text-decoration: underline; }
.legal-content strong { color: var(--clr-primary); }


/* =================================================================
   24. ANIMATE ON SCROLL
================================================================= */
.aos-init {
  opacity  : 0;
  transform: translateY(20px);
  transition: opacity .55s ease, transform .55s ease;
}
.aos-init.aos-visible {
  opacity  : 1;
  transform: translateY(0);
}
.aos-delay-1 { transition-delay: .1s; }
.aos-delay-2 { transition-delay: .2s; }
.aos-delay-3 { transition-delay: .3s; }
.aos-delay-4 { transition-delay: .4s; }


/* =================================================================
   25. BADGE & CHIP
================================================================= */
.badge {
  display      : inline-flex;
  align-items  : center;
  gap          : var(--space-1);
  padding      : 3px 10px;
  border-radius: var(--radius-full);
  font-size    : var(--text-xs);
  font-weight  : var(--fw-bold);
  line-height  : 1.4;
}
.badge-accent  { background: var(--clr-accent-100);    color: var(--clr-accent);  }
.badge-success { background: var(--clr-success-light); color: var(--clr-success); }
.badge-warning { background: var(--clr-warning-light); color: var(--clr-warning); }
.badge-muted   { background: var(--clr-bg-muted);      color: var(--clr-text-muted); }

/* ── Canlı göstergesi ── */
.live-dot::before {
  content      : '';
  display      : inline-block;
  width        : 8px;
  height       : 8px;
  background   : #4ade80;
  border-radius: 50%;
  margin-right : 6px;
  animation    : dot-pulse 2s infinite;
}


/* =================================================================
   26. BÖLÜCÜ
================================================================= */
.divider {
  height    : 1px;
  background: var(--clr-border);
  border    : none;
  margin    : var(--space-8) 0;
}
.divider-dashed {
  border    : none;
  border-top: 1px dashed var(--clr-border);
  margin    : var(--space-8) 0;
}


/* =================================================================
   27. YARDIMCI SINIFLAR
================================================================= */
.sr-only {
  position  : absolute;
  width     : 1px;
  height    : 1px;
  padding   : 0;
  margin    : -1px;
  overflow  : hidden;
  clip      : rect(0,0,0,0);
  white-space: nowrap;
  border    : 0;
}
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break-word   { word-break: break-word; overflow-wrap: break-word; }
.no-select    { -webkit-user-select: none; user-select: none; }
.pointer      { cursor: pointer; }
.rounded      { border-radius: var(--radius); }
.rounded-full { border-radius: var(--radius-full); }
.shadow-sm    { box-shadow: var(--shadow-sm); }
.shadow-md    { box-shadow: var(--shadow-md); }
.w-full       { width: 100%; }
.h-full       { height: 100%; }
.relative     { position: relative; }
.overflow-hidden { overflow: hidden; }


/* =================================================================
   28. RESPONSIVE — TABLET (max 1024px)
================================================================= */
@media (max-width: 1024px) {
  :root {
    --section-py: 64px;
    --container : 960px;
  }

  .hero-inner         { gap: 40px; }
  .hero-product-inner { gap: var(--space-6); }
  .footer-top         { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .grid-4            { grid-template-columns: repeat(2, 1fr); }
  .grid-3            { grid-template-columns: repeat(2, 1fr); }
}


/* =================================================================
   29. RESPONSIVE — MOBİL (max 768px)
================================================================= */
@media (max-width: 768px) {
  :root {
    --header-h  : 64px;
    --section-py: 48px;
  }

  /* Header */
  .nav        { display: none; }
  .hamburger  { display: flex; }
  .header-phone span { display: none; }   /* Sadece ikon göster */

  /* Mobilde 2 kolon: logo sol | cta sağ */
  .header-inner {
    grid-template-columns: 1fr auto;
    padding-top          : 12px;
  }

  /* Hero — index.html */
  .hero            { padding: 52px 0 44px; }
  .hero-inner      { max-width: 100%; gap: var(--space-5); }
  .hero-title      { font-size: var(--text-3xl); }
  .hero-desc       { font-size: var(--text-base); max-width: 100%; }
  .hero-trust      { gap: 8px 14px; }

  /* Hero — ürün sayfaları */
  .hero-product         { padding: 48px 0 40px; }
  .hero-product-inner   { max-width: 100%; gap: var(--space-5); }
  .hero-product-title   { font-size: var(--text-2xl); }
  .hero-product-desc    { font-size: var(--text-sm); max-width: 100%; }
  .hero-product-right   { display: none; }

  /* CTA butonları tam genişlik */
  .btn-lg           { width: 100%; max-width: 340px; padding: 16px 24px; font-size: var(--text-base); }

  /* Grid'ler */
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }

  /* Steps */
  .steps-grid::before { display: none; }
  .steps-grid { grid-template-columns: 1fr 1fr; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-6); }

  /* Masaüstü sticky gizle, mobil bar göster */
  .sticky-call-box { display: none !important; }
  .mobile-call-bar { display: block; }

  /* Hizmet formu */
  .service-form-wrapper { padding: var(--space-5); }
}


/* =================================================================
   30. RESPONSIVE — KÜÇÜK MOBİL (max 480px)
================================================================= */
@media (max-width: 480px) {
  :root { --section-py: 40px; }

  .container { padding: 0 16px; }

  .footer-top { grid-template-columns: 1fr; }
  .grid-4     { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .trust-band-inner { gap: var(--space-4); }
  .cta-banner-actions { flex-direction: column; align-items: stretch; }
  .cta-banner-actions .btn { width: 100%; }
  .hero-trust { gap: 8px 12px; }
  .hero-product-title { font-size: var(--text-xl); }
  .btn-lg { max-width: 100%; }
  .hero-desc { font-size: var(--text-base); }
  .form-grid-2 { grid-template-columns: 1fr; }

  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
}


/* =================================================================
   31. PRINT
================================================================= */
@media print {
  .header,
  .sticky-call-box,
  .mobile-call-bar,
  .mobile-nav,
  .cta-banner       { display: none !important; }

  body  { color: #000; background: #fff; font-size: 12pt; }
  a     { text-decoration: underline; color: #000; }
  .hero { background: #f0f0f0 !important; color: #000 !important; }
}