/* ==========================================================================
   hizmetim.tr — Design Tokens + Base  (v1.0, 2026-10)
   Tek kaynak: tüm sayfalar (landing, mini site, admin, claim) bunu yükler.
   Önerilen yol: /assets/css/design-tokens.css  (önce bu, sonra hizmetim-components.css)
   Kontrast notları (WCAG 2.2):
     #1b7f7e / beyaz = 4.79:1 (AA)   #176665 / beyaz = 6.72:1 (AAA'ya yakın)
     Gri zemin (#f5f7f7) üzerinde METİN için --hz-link (#176665) kullan.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- Marka (teal) — #1b7f7e = 600 ---------- */
  --hz-brand-50:  #effaf9;
  --hz-brand-100: #d6f1ef;
  --hz-brand-200: #ade3df;
  --hz-brand-300: #7ccfca;
  --hz-brand-400: #4bb3ae;
  --hz-brand-500: #2a9894;
  --hz-brand-600: #1b7f7e;
  --hz-brand-700: #176665;
  --hz-brand-800: #155352;
  --hz-brand-900: #134645;
  --hz-brand-950: #062a2a;

  /* ---------- Nötr (hafif teal tonlu gri) ---------- */
  --hz-gray-0:   #ffffff;
  --hz-gray-25:  #fbfcfc;
  --hz-gray-50:  #f5f7f7;
  --hz-gray-100: #eceff0;
  --hz-gray-200: #dde2e3;
  --hz-gray-300: #c4cbcd;
  --hz-gray-400: #949ea1;
  --hz-gray-500: #6b7679;
  --hz-gray-600: #4f595c;
  --hz-gray-700: #3a4345;
  --hz-gray-800: #252c2e;
  --hz-gray-900: #151b1c;
  --hz-gray-950: #0b0f10;

  /* ---------- Tek vurgu rengi: Ege güneşi (amber) — puan, "öne çıkan", premium ---------- */
  --hz-accent-50:  #fff8eb;
  --hz-accent-100: #feecc7;
  --hz-accent-400: #fbbf24;
  --hz-accent-500: #f59e0b;
  --hz-accent-700: #b45309;   /* beyaz üzerinde metin: 5.02:1 */
  --hz-accent-800: #92400e;

  /* ---------- Durum renkleri ---------- */
  --hz-success-50: #ecfdf3;  --hz-success-600: #15803d;  --hz-success-500: #22c55e;
  --hz-danger-50:  #fef2f2;  --hz-danger-600:  #dc2626;  --hz-danger-700:  #b91c1c;
  --hz-warning-50: #fffbeb;  --hz-warning-600: #b45309;
  --hz-info-50:    #eff6ff;  --hz-info-600:    #2563eb;
  --hz-whatsapp:      #25d366;
  --hz-whatsapp-ink:  #052e16;   /* WA yeşili üzerinde koyu metin: 7.52:1 */
  --hz-whatsapp-hover:#1ebe5b;

  /* ---------- Semantik roller (bileşenler BUNLARI kullanır) ---------- */
  --hz-bg:            var(--hz-gray-25);
  --hz-bg-subtle:     var(--hz-gray-50);
  --hz-surface:       var(--hz-gray-0);
  --hz-surface-2:     var(--hz-gray-50);
  --hz-surface-brand: var(--hz-brand-50);
  --hz-border:        var(--hz-gray-200);
  --hz-border-strong: var(--hz-gray-300);
  --hz-text:          var(--hz-gray-900);
  --hz-text-muted:    var(--hz-gray-600);
  --hz-text-subtle:   var(--hz-gray-500);
  --hz-text-on-brand: #ffffff;
  --hz-primary:       var(--hz-brand-600);
  --hz-primary-hover: var(--hz-brand-700);
  --hz-primary-press: var(--hz-brand-800);
  --hz-primary-soft:  var(--hz-brand-50);
  --hz-link:          var(--hz-brand-700);
  --hz-focus:         var(--hz-brand-500);
  --hz-star:          var(--hz-accent-500);
  --hz-overlay:       rgb(11 15 16 / 0.55);

  /* ---------- Tipografi ---------- */
  --hz-font-sans:    "Inter", "Inter var", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hz-font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hz-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Akışkan tip ölçeği (mobil 360px → masaüstü 1440px) */
  --hz-text-xs:   0.75rem;                                   /* 12 */
  --hz-text-sm:   0.875rem;                                  /* 14 */
  --hz-text-base: 1rem;                                      /* 16 — mobilde input'lar asla <16px (iOS zoom) */
  --hz-text-lg:   1.125rem;                                  /* 18 */
  --hz-text-xl:   clamp(1.25rem, 1.18rem + 0.3vw, 1.375rem); /* 20→22 */
  --hz-text-2xl:  clamp(1.5rem, 1.36rem + 0.6vw, 1.875rem);  /* 24→30 */
  --hz-text-3xl:  clamp(1.875rem, 1.6rem + 1.2vw, 2.5rem);   /* 30→40 */
  --hz-text-4xl:  clamp(2.25rem, 1.8rem + 2vw, 3.5rem);      /* 36→56 hero */

  --hz-leading-tight: 1.15;
  --hz-leading-snug:  1.3;
  --hz-leading-normal:1.55;
  --hz-tracking-tight: -0.022em;
  --hz-weight-regular: 400;
  --hz-weight-medium:  500;
  --hz-weight-semibold:600;
  --hz-weight-bold:    700;
  --hz-weight-extrabold:800;

  /* ---------- Boşluk ölçeği (4px taban) ---------- */
  --hz-space-0:  0;
  --hz-space-1:  0.25rem;  /* 4 */
  --hz-space-2:  0.5rem;   /* 8 */
  --hz-space-3:  0.75rem;  /* 12 */
  --hz-space-4:  1rem;     /* 16 */
  --hz-space-5:  1.25rem;  /* 20 */
  --hz-space-6:  1.5rem;   /* 24 */
  --hz-space-8:  2rem;     /* 32 */
  --hz-space-10: 2.5rem;   /* 40 */
  --hz-space-12: 3rem;     /* 48 */
  --hz-space-16: 4rem;     /* 64 */
  --hz-space-20: 5rem;     /* 80 */
  --hz-space-24: 6rem;     /* 96 */
  --hz-section-y: clamp(3rem, 2rem + 4vw, 6rem);
  --hz-gutter:    clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --hz-container: 1200px;
  --hz-container-narrow: 760px;

  /* ---------- Radius ---------- */
  --hz-radius-xs:  6px;
  --hz-radius-sm:  8px;
  --hz-radius-md:  12px;   /* buton, input */
  --hz-radius-lg:  16px;   /* kart */
  --hz-radius-xl:  24px;   /* hero kutuları, bottom sheet */
  --hz-radius-pill: 999px;

  /* ---------- Gölgeler (katmanlı, hafif teal tonlu) ---------- */
  --hz-shadow-xs: 0 1px 2px rgb(16 40 40 / 0.06);
  --hz-shadow-sm: 0 1px 2px rgb(16 40 40 / 0.06), 0 2px 6px rgb(16 40 40 / 0.05);
  --hz-shadow-md: 0 2px 4px rgb(16 40 40 / 0.05), 0 8px 20px -4px rgb(16 40 40 / 0.10);
  --hz-shadow-lg: 0 4px 8px rgb(16 40 40 / 0.04), 0 18px 40px -8px rgb(16 40 40 / 0.16);
  --hz-shadow-xl: 0 24px 64px -12px rgb(16 40 40 / 0.25);
  --hz-shadow-brand: 0 8px 24px -6px rgb(27 127 126 / 0.45);
  --hz-ring: 0 0 0 3px rgb(42 152 148 / 0.35);

  /* ---------- Hareket ---------- */
  --hz-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --hz-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --hz-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --hz-dur-fast: 120ms;
  --hz-dur-base: 200ms;
  --hz-dur-slow: 360ms;
  --hz-transition: color var(--hz-dur-base) var(--hz-ease-out),
                   background-color var(--hz-dur-base) var(--hz-ease-out),
                   border-color var(--hz-dur-base) var(--hz-ease-out),
                   box-shadow var(--hz-dur-base) var(--hz-ease-out),
                   transform var(--hz-dur-base) var(--hz-ease-out),
                   opacity var(--hz-dur-base) var(--hz-ease-out);

  /* ---------- Katmanlar ---------- */
  --hz-z-sticky: 40;
  --hz-z-header: 50;
  --hz-z-drawer: 80;
  --hz-z-banner: 90;
  --hz-z-toast:  100;

  /* ---------- Dokunma ---------- */
  --hz-tap: 44px;          /* minimum dokunma hedefi */
  --hz-control-h: 48px;    /* buton/input standart yükseklik */
  --hz-header-h: 64px;
}

/* ---------- Koyu tema (opsiyonel, <html data-theme="dark">) ----------
   Bileşenler yalnızca semantik değişkenleri kullandığı için koyu temada da bozulmaz. */
[data-theme="dark"] {
  color-scheme: dark;
  --hz-bg:            #0d1213;
  --hz-bg-subtle:     #121919;
  --hz-surface:       #151c1d;
  --hz-surface-2:     #1b2324;
  --hz-surface-brand: #0f2a2a;
  --hz-border:        #263031;
  --hz-border-strong: #364243;
  --hz-text:          #eef3f3;
  --hz-text-muted:    #a9b4b6;
  --hz-text-subtle:   #8a9699;
  --hz-primary:       #1b7f7e;   /* beyaz metinle 4.79:1 korunur */
  --hz-primary-hover: #208c8a;
  --hz-primary-press: #176665;
  --hz-primary-soft:  #0f2a2a;
  --hz-link:          #5cc4be;
  --hz-success-600:   #4ade80;
  --hz-success-50:    #0f2a1a;
  --hz-danger-700:    #f87171;
  --hz-danger-50:     #2a1215;
  --hz-accent-700:    #fbbf24;
  --hz-brand-800:     #7ccfca;   /* soft butonlarda hover metni */
  --hz-gray-100:      #1f2829;   /* çubuk/iz zeminleri */
  --hz-overlay:       rgb(0 0 0 / 0.65);
  --hz-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --hz-shadow-md: 0 8px 24px -6px rgb(0 0 0 / 0.55);
  --hz-shadow-lg: 0 18px 40px -8px rgb(0 0 0 / 0.6);
}

/* ==========================================================================
   BASE — mevcut stillerle çakışmasın diye hafif tutuldu
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hz-header-h) + 12px);
}

body {
  margin: 0;
  font-family: var(--hz-font-sans);
  font-size: var(--hz-text-base);
  line-height: var(--hz-leading-normal);
  color: var(--hz-text);
  background: var(--hz-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";  /* Inter: daha okunur 1/l, tek katlı a */
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--hz-font-display);
  line-height: var(--hz-leading-tight);
  letter-spacing: var(--hz-tracking-tight);
  font-weight: var(--hz-weight-bold);
  margin: 0 0 var(--hz-space-3);
  text-wrap: balance;
}
h1 { font-size: var(--hz-text-4xl); font-weight: var(--hz-weight-extrabold); }
h2 { font-size: var(--hz-text-3xl); }
h3 { font-size: var(--hz-text-xl); }
p  { margin: 0 0 var(--hz-space-4); text-wrap: pretty; }

a { color: var(--hz-link); text-underline-offset: 0.18em; }
a:hover { color: var(--hz-primary-hover); }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Görünür, tutarlı odak halkası — sadece klavye ile */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--hz-focus);
  outline-offset: 2px;
}

::selection { background: var(--hz-brand-200); color: var(--hz-brand-950); }

/* Yardımcılar */
.hz-container { width: 100%; max-width: var(--hz-container); margin-inline: auto; padding-inline: var(--hz-gutter); }
.hz-section   { padding-block: var(--hz-section-y); }
.hz-eyebrow   { display:inline-flex; align-items:center; gap:.4rem; font-size: var(--hz-text-sm); font-weight: var(--hz-weight-semibold); color: var(--hz-link); letter-spacing: .02em; }
.hz-hl        { position: relative; white-space: nowrap; color: var(--hz-primary); } /* başlıkta vurgulu kelime; ebeveyn isolation:isolate olmalı */
.hz-hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .32em; z-index: -1; border-radius: 4px; background: linear-gradient(90deg, var(--hz-accent-100), var(--hz-brand-100)); }
[data-theme="dark"] .hz-hl::after { opacity: .25; }
.hz-muted     { color: var(--hz-text-muted); }
.hz-sr-only   { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hz-skip-link { position:absolute; left:12px; top:-60px; z-index:999; background:var(--hz-primary); color:#fff; padding:.75rem 1rem; border-radius:var(--hz-radius-sm); transition: top var(--hz-dur-base); }
.hz-skip-link:focus { top: 12px; color:#fff; }
.hz-icon      { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Hareket hassasiyeti: tüm animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.hz-icon--fill { fill: currentColor; stroke: none; }