/* OTOMATIK URETILDI - elle duzenleme. Kaynak: says_enerji/tokens + says_enerji/styles
   Yeniden uretmek icin: site/build-css.sh
   Not: tokens/fonts.css dahil edilmez; webfontlar functions.php icinde kuyruga alinir. */

/* ===== tokens/colors.css ===== */
/* SAYS Solar Energy — color. Base values sampled from the Ergene showroom facade,
   totem sign and illuminated wordmark (uploads/Screenshot 2026-08-25 121609.png). */
:root{
  /* Brand — Says Sarısı. The illuminated wordmark + CTA capsule. */
  --says-yellow-50:#FFF8E4;
  --says-yellow-100:#FDEFC2;
  --says-yellow-200:#FCE29A;
  --says-yellow-300:#FBD05C;
  --says-yellow-400:#FAC236;
  --says-yellow-500:#F9B617;
  --says-yellow-600:#E0A00A;
  --says-yellow-700:#B57D00;
  --says-yellow-800:#8A5F00;

  /* Brand — Says Mavisi. "SOLAR ENERGY" lockup line + logo mark. */
  --says-blue-50:#EAF5FC;
  --says-blue-100:#CFE8F8;
  --says-blue-200:#A5D5F2;
  --says-blue-300:#6DBDEA;
  --says-blue-400:#3AA2E0;
  --says-blue-500:#1789D6;
  --says-blue-600:#0F6DB0;
  --says-blue-700:#0A4A8F;
  --says-blue-800:#083A70;

  /* Brand — facade. Warm near-black cladding, night-blue sky, lamp wash. */
  --says-navy-800:#12283D;
  --says-navy-900:#0B1B2B;
  --says-charcoal-900:#1C1D21;
  --says-black:#101114;
  --says-lamp:#EAB16D;

  /* Neutrals — warm grey, keyed to the concrete forecourt. */
  --n-0:#FFFFFF;
  --n-25:#FAFAF8;
  --n-50:#F5F5F2;
  --n-100:#ECECE8;
  --n-200:#DCDCD7;
  --n-300:#C3C3BD;
  --n-400:#9A9A94;
  --n-500:#75756F;
  --n-600:#575751;
  --n-700:#3D3D39;
  --n-800:#262623;
  --n-900:#141413;

  /* Semantic pigments */
  --success-50:#E7F6EE;  --success-500:#1E9E5A; --success-700:#137043;
  --warning-50:#FDF1DC;  --warning-500:#E08A00; --warning-700:#A36400;
  --danger-50:#FBEAE8;   --danger-500:#C8372D;  --danger-700:#96261E;
  --info-50:#EAF5FC;     --info-500:#1789D6;    --info-700:#0A4A8F;

  /* ---------- Semantic aliases: use these, not the base ramps ---------- */
  --accent:var(--says-yellow-500);
  --accent-hover:var(--says-yellow-400);
  --accent-press:var(--says-yellow-600);
  --accent-soft:var(--says-yellow-50);
  --on-accent:var(--says-black);
  --on-accent-muted:rgba(16,17,20,.78);   /* sari yuzeyde govde metni */
  --on-accent-faint:rgba(16,17,20,.62);   /* sari yuzeyde eyebrow/dipnot */

  /* ÇEVRE — üçüncü ve en dar rasyonlu renk.
     Sistemde zaten bir yeşil var (--success-500, "DEVREDE" durumu). İkinci bir
     yeşil rampa eklenmedi: iki yakın yeşil "başarı mı, çevre mi" belirsizliği
     yaratıyor. Bunun yerine aynı pigmente ikinci bir ANLAM veriliyor.

     Says fotoğraflarındaki yeşillik örneklendi: güneş alan yapraklar 73° (zeytin —
     marka sarısına 31° mesafede, karışıyor), gölgedeki çamlar ~152°. İkincisi
     --success-500'ün tonuyla (~150°) zaten örtüşüyor; ayrı rampaya gerek yok.

     KURAL — sarı kadar dar: yeşil YALNIZCA ölçülmüş çevresel çıktıda kullanılır
     (önlenen emisyon, ağaç eşdeğeri) ve olumlu onay işaretlerinde. Zemin olarak,
     başlıkta, butonda, dekorasyonda KULLANILMAZ. Marka "yeşil gelecek" retoriğini
     reddediyor; buradaki yeşil bir slogan değil, bir ölçü birimi. */
  --eco:var(--success-500);
  --eco-strong:var(--success-700);
  --eco-soft:var(--success-50);

  --accent-2:var(--says-blue-500);
  --accent-2-hover:var(--says-blue-400);
  --accent-2-press:var(--says-blue-600);
  --accent-2-soft:var(--says-blue-50);
  --on-accent-2:var(--n-0);

  --text-strong:var(--says-navy-900);
  --text-body:var(--n-700);
  /* n-500 (#75756F) beyazda 4.64:1 idi — AA'yi ancak geciyordu ve ikincil
     metnin cogu dogrudan sayfa zemininde duruyor. n-600 ile 7.27:1; hâlâ
     govde metninden (10.91:1) acik, yani hiyerarsi bozulmuyor. */
  --text-muted:var(--n-600);
  /* SADECE yer tutucu, devre disi alan ve dekoratif ikon icin. Beyazda 2.83:1;
     okunmasi gereken hicbir metne verilmez. Dipnot buraya DUSMESIN. */
  --text-faint:var(--n-400);
  --text-inverse:var(--n-0);
  --text-inverse-muted:rgba(255,255,255,.66);
  --text-link:var(--says-blue-600);
  --text-link-hover:var(--says-blue-700);
  --text-on-dark-accent:var(--says-yellow-500);

  --surface-page:var(--n-0);
  /* Ara bölüm yüzeyi YEŞİLE ÇALAR. Müşteri arka planda doğa ve yeşil istedi;
     "çevreci ve ferah görünsün" dedi. Marka kuralı arka planlar için düz renk ve
     tam genişlik şart koşuyor (gradient, desen, doku yasak) — düz bir yeşil-beyaz
     bu kurala uyuyor. Ilık gri #F5F5F2 yerine yaprak beyazı.
     Gövde metni 9,8:1, başlık 15,7:1, beyaz kart bu zeminde hâlâ ayrılıyor (1,11:1). */
  --surface-subtle:#F0F5EA;
  --surface-card:var(--n-0);
  --surface-card-subtle:var(--n-25);
  --surface-band:var(--says-charcoal-900);   /* dark full-bleed section, = facade */
  --surface-inverse:var(--says-navy-900);
  --surface-brand:var(--says-yellow-500);
  --surface-overlay:rgba(11,27,43,.72);

  /* Etkilesim yuzeyleri. Bilesenler ham --n-* yerine bunlari kullanir; koyu tema
     tek yerden doner. */
  --surface-hover:var(--n-50);
  --surface-active:var(--n-100);
  --surface-press:var(--n-200);
  --surface-disabled:var(--n-50);
  --control-track:var(--n-300);
  --control-thumb:var(--n-0);

  /* Sari yumusak yuzey (rozet) - koyu temada seffaf tonlamaya doner */
  --accent-soft-text:var(--says-yellow-800);
  /* Acik yuzey uzerinde SARI METIN. yellow-700 beyazda 3.56:1 — kucuk metin icin
     AA'yi gecmiyordu; yellow-800 ile 5.65:1. Sari dolgular yine yellow-500;
     bu yalnizca murekkep. Koyu temada dark.css tersine cevirir. */
  --accent-ink:var(--says-yellow-800);
  --accent-soft-border:var(--says-yellow-200);

  --border-subtle:var(--n-100);
  --border-default:var(--n-200);
  --border-strong:var(--n-300);
  --border-inverse:rgba(255,255,255,.14);
  --border-accent:var(--says-yellow-500);
  --focus-ring:var(--says-blue-500);

  /* Gradients — used only for photo protection and glass, never as decoration. */
  --protect-bottom:linear-gradient(to top,rgba(11,27,43,.92) 0%,rgba(11,27,43,.62) 38%,rgba(11,27,43,0) 100%); /* @kind color */
  --protect-left:linear-gradient(to right,rgba(11,27,43,.90) 0%,rgba(11,27,43,.45) 45%,rgba(11,27,43,0) 100%); /* @kind color */
  --lamp-wash:radial-gradient(120% 90% at 50% 0%,rgba(234,177,109,.22) 0%,rgba(234,177,109,0) 62%); /* @kind color */
}

/* ===== tokens/typography.css ===== */
/* SAYS Solar Energy — typography. Montserrat display / Barlow text / Plex Mono data. */
:root{
  --font-display:"Montserrat","Segoe UI",system-ui,sans-serif;
  --font-text:"Barlow","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  --fw-regular:400; /* @kind other */
  --fw-medium:500; /* @kind other */
  --fw-semibold:600; /* @kind other */
  --fw-bold:700; /* @kind other */
  --fw-extrabold:800; /* @kind other */
  --fw-black:900; /* @kind other */

  /* Display — Montserrat 800/900, always uppercase, always tight. */
  --fs-display-1:64px; --lh-display-1:0.98;/* @kind other */ --ls-display-1:-0.02em;/* @kind other */
  --fs-display-2:48px; --lh-display-2:1.02;/* @kind other */ --ls-display-2:-0.015em;/* @kind other */
  --fs-display-3:36px; --lh-display-3:1.08;/* @kind other */ --ls-display-3:-0.01em;/* @kind other */

  /* Headings — Montserrat 700/800, sentence case allowed from h3 down. */
  --fs-h1:32px; --lh-h1:1.14;/* @kind other */
  --fs-h2:26px; --lh-h2:1.2;/* @kind other */
  --fs-h3:21px; --lh-h3:1.28;/* @kind other */
  --fs-h4:18px; --lh-h4:1.34;/* @kind other */

  /* Text — Barlow */
  --fs-body-lg:18px; --lh-body-lg:1.6;/* @kind other */
  --fs-body:16px;    --lh-body:1.62;/* @kind other */
  --fs-body-sm:14px; --lh-body-sm:1.55;/* @kind other */
  --fs-caption:13px; --lh-caption:1.45;/* @kind other */

  /* Eyebrow / label — the totem's service labels: uppercase, wide, small. */
  --fs-eyebrow:12px; --ls-eyebrow:0.14em;/* @kind other */ --lh-eyebrow:1.2;/* @kind other */
  --fs-label:13px;   --ls-label:0.02em;/* @kind other */

  /* Data — kWp, kWh, TL, %. Tabular, medium weight. */
  --fs-data-xl:40px; --fs-data-lg:28px; --fs-data:16px; --fs-data-sm:13px;
  --ls-data:-0.01em;/* @kind other */
}

/* ===== tokens/spacing.css ===== */
/* SAYS Solar Energy — spacing, radii, borders, elevation, motion. 4px base unit. */
:root{
  --sp-0:0; /* @kind spacing */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --sp-20:80px; --sp-24:96px; --sp-32:128px;

  /* Composition */
  --gutter:24px;
  --section-y:96px;          /* vertical rhythm of a marketing band */
  --section-y-tight:64px;
  --container-max:1200px;
  --container-narrow:760px;
  --measure:68ch;/* @kind other */            /* max line length for prose */

  /* Radii — rectangular and industrial. Pills are reserved for capsules. */
  --r-xs:3px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
  --r-card:var(--r-md);
  --r-control:var(--r-sm);
  --r-capsule:var(--r-pill);

  /* Borders */
  --bw-hair:1px; /* @kind spacing */
  --bw-thick:2px; /* @kind spacing */
  --bw-rule:3px; /* @kind spacing */   /* --bw-rule = the yellow accent rule */

  /* Elevation — restrained. Cards prefer a border; shadow only when lifted. */
  --shadow-xs:0 1px 2px rgba(16,17,20,.06);
  --shadow-sm:0 2px 6px rgba(16,17,20,.08);
  --shadow-md:0 8px 24px -6px rgba(16,17,20,.14);
  --shadow-lg:0 24px 60px -20px rgba(11,27,43,.28);
  --shadow-glow:0 6px 22px -6px rgba(249,182,23,.55);      /* illuminated-sign glow */
  --shadow-inset-hair:inset 0 1px 0 rgba(255,255,255,.06);

  /* Motion — short, linear-ish, no bounce. */
  --dur-fast:120ms; /* @kind other */
  --dur:180ms; /* @kind other */
  --dur-slow:280ms; /* @kind other */
  --dur-reveal:420ms; /* @kind other */
  --ease:cubic-bezier(.2,.6,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,.6,.3,1); /* @kind other */

  /* Blur — glass only over photography */
  --blur-glass:14px; /* @kind other */

  --z-header:100; /* @kind other */
  --z-dropdown:200; /* @kind other */
  --z-overlay:900; /* @kind other */
  --z-dialog:1000; /* @kind other */
  --z-toast:1100; /* @kind other */
}

/* ===== tokens/dark.css ===== */
/* SAYS Solar Energy — koyu tema.

   YALNIZCA anlamsal takma adlar döner. Marka rampalarına (sarı, mavi, cephe darkları)
   dokunulmaz: sarı her iki temada da aynı sarıdır, çünkü tabeladaki sarı da öyle.

   VARSAYILAN AÇIK TEMADIR. Sistem tercihi (prefers-color-scheme) BİLEREK
   izlenmiyor: site her zaman açık temada açılır, koyu tema yalnızca kullanıcı
   üst çubuktaki düğmeyle seçerse gelir ve seçim tarayıcıda hatırlanır.

   İki durum:
     :root                      → açık (varsayılan, tokens/colors.css)
     :root[data-theme="dark"]   → kullanıcı koyuyu seçti

   DİKKAT — --text-inverse ve --on-accent DÖNMEZ; anlamları "koyu yüzey üstündeki
   metin" ve "sarı yüzey üstündeki metin" ve bunlar iki temada da aynı. */

/* ---------- Yalnızca kullanıcı koyuyu seçtiğinde ---------- */
:root[data-theme="dark"]{
  /* Yüzeyler. Sayfa en koyu, kartlar bir tık açık — açık temanın tersi.
     Bantlar gece mavisine kayar ki sayfadan hâlâ ayrılsınlar. */
  --surface-page:#131418;
  --surface-subtle:#191A1F;
  --surface-card:#1C1D22;
  --surface-card-subtle:#212228;
  --surface-band:var(--says-navy-900);
  --surface-inverse:var(--says-black);
  --surface-overlay:rgba(5,10,16,.8);

  --surface-hover:rgba(255,255,255,.06);
  --surface-active:rgba(255,255,255,.10);
  --surface-press:rgba(255,255,255,.16);
  --surface-disabled:rgba(255,255,255,.05);
  --control-track:rgba(255,255,255,.22);
  --control-thumb:#E8E8E4;

  /* Metin */
  --text-strong:#F7F7F4;
  --text-body:#C6C6C0;
  --text-muted:#9C9C96;
  --text-faint:#77776F;
  --text-link:var(--says-blue-300);
  --text-link-hover:var(--says-blue-200);

  /* Kenarlıklar: koyuda ince gri çizgi kaybolur, beyaz opaklık kullanılır */
  --border-subtle:rgba(255,255,255,.09);
  --border-default:rgba(255,255,255,.15);
  --border-strong:rgba(255,255,255,.30);

  /* Yumuşak pigment zeminleri açık temada beyaza yakın; koyuda kör ediyor.
     Şeffaf tonlamaya çevriliyor, metin tonu açığa alınıyor. */
  --accent-soft:rgba(249,182,23,.15);
  --accent-soft-text:var(--says-yellow-300);
  /* Koyu zeminde yellow-800 3.28:1 kalirdi; tabeladaki sariya donuyoruz. */
  --accent-ink:var(--says-yellow-500);
  --accent-soft-border:rgba(249,182,23,.34);
  --success-50:rgba(30,158,90,.16);
  --success-700:#6FD9A4;
  --warning-50:rgba(224,138,0,.16);
  --warning-700:#F0B454;
  --danger-50:rgba(200,55,45,.18);
  --danger-700:#F2938B;
  --info-50:rgba(23,137,214,.16);
  --info-700:var(--says-blue-300);

  /* Gölgeler koyu zeminde görünmez; sertleştiriliyor */
  --shadow-xs:0 1px 2px rgba(0,0,0,.5);
  --shadow-sm:0 2px 8px rgba(0,0,0,.55);
  --shadow-md:0 10px 28px -8px rgba(0,0,0,.7);
  --shadow-lg:0 26px 64px -22px rgba(0,0,0,.82);

  /* Totem koyu temada sayfa zeminine karışmasın */
  --totem-zemin:rgba(255,255,255,.05);

  color-scheme:dark;
}

/* Açık tema kullanıcı seçimi: sistem koyu olsa da :root varsayılanları geçerli kalır. */
:root[data-theme="light"]{ color-scheme:light; }

/* Tema geçişi ani olmasın ama şov da olmasın — sistemin 180ms'i. */
@media (prefers-reduced-motion:no-preference){
  body,
  .says-card,
  .says-header,
  .says-input,
  .says-textarea,
  .says-select__control{
    transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
  }
}

/* ===== styles/base.css ===== */
/* SAYS Solar Energy — element defaults + typographic primitives. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* hidden özniteliği HER ZAMAN kazanmalı.
   Tarayıcının kendi [hidden]{display:none} kuralı yazar stil sayfasından zayıftır:
   bir bileşene display:flex/grid verildiği anda hidden işlevini kaybediyor ve gizli
   olması gereken öğe ekranda kalıyor. (Boş hata kutusu ve formun koşullu alanları
   tam olarak bu yüzden görünüyordu.) Tek satırlık kalıcı çözüm. */
[hidden]{display:none !important}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-text);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-regular);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--text-strong);font-weight:var(--fw-extrabold);margin:0 0 var(--sp-4);text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-bold)}
h4{font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:var(--fw-bold)}
p{margin:0 0 var(--sp-4);max-width:var(--measure)}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid color-mix(in oklch,var(--text-link) 32%,transparent);transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--text-link-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
small{font-size:var(--fs-caption);line-height:var(--lh-caption)}
hr{border:0;border-top:var(--bw-hair) solid var(--border-default);margin:var(--sp-8) 0}
img{max-width:100%;display:block}
::selection{background:var(--says-yellow-200);color:var(--says-black)}

/* Type primitives */
.says-display-1{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-display-1);line-height:var(--lh-display-1);letter-spacing:var(--ls-display-1);text-transform:uppercase;color:var(--text-strong);margin:0}
.says-display-2{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-display-2);line-height:var(--lh-display-2);letter-spacing:var(--ls-display-2);text-transform:uppercase;color:var(--text-strong);margin:0}
.says-display-3{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:var(--fs-display-3);line-height:var(--lh-display-3);letter-spacing:var(--ls-display-3);text-transform:uppercase;color:var(--text-strong);margin:0}
.says-eyebrow{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);line-height:var(--lh-eyebrow);text-transform:uppercase;color:var(--text-muted);margin:0}
.says-eyebrow--accent{color:var(--accent-ink)}
.says-eyebrow--on-dark{color:var(--says-yellow-500)}
.says-lead{font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);color:var(--text-body)}
.says-body-sm{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm)}
.says-caption{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-muted)}
.says-data{font-family:var(--font-mono);font-weight:var(--fw-medium);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-data)}
.says-data-xl{font-family:var(--font-mono);font-weight:var(--fw-semibold);font-size:var(--fs-data-xl);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-data);line-height:1.05;color:var(--text-strong)}
.says-unit{font-family:var(--font-text);font-weight:var(--fw-semibold);font-size:.5em;letter-spacing:.02em;color:var(--text-muted)}

/* The signature 3px yellow rule — sits above section headings and under nav items. */
.says-rule{width:44px;height:var(--bw-rule);background:var(--accent);border:0;margin:0}

/* Layout helpers */
.says-container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.says-band{background:var(--surface-band);color:var(--text-inverse)}
.says-band h1,.says-band h2,.says-band h3,.says-band h4{color:var(--text-inverse)}
/* Bant içi bağlantılar sarıya döner — ama YALNIZCA akış metnindekiler. Bileşenlere
   (buton, kapsül, kelime markası) dokunmaz: onların kendi renk sözleşmesi var ve
   bu kural onları sarı zemin üstünde sarı yazıya çevirip görünmez yapıyordu. */
.says-band :is(p,li,dd,dt,td,th,blockquote,figcaption,address,small) a{color:var(--says-yellow-500);border-bottom-color:color-mix(in oklch,var(--says-yellow-500) 40%,transparent)}
.says-band :is(p,li,dd,dt,td,th,blockquote,figcaption,address,small) a:hover{color:var(--says-yellow-400);border-bottom-color:var(--says-yellow-400)}
.says-section{padding:var(--section-y) 0}
.says-section--tight{padding:var(--section-y-tight) 0}
.says-stack{display:flex;flex-direction:column;gap:var(--sp-4)}
.says-row{display:flex;align-items:center;gap:var(--sp-3)}
.says-grid{display:grid;gap:var(--gutter)}

/* Photography treatment: cool-neutral, mild contrast lift, never warm-filtered. */
.says-photo{position:relative;overflow:hidden;background:var(--says-navy-900)}
.says-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.04)}
.says-photo--protect::after{content:"";position:absolute;inset:0;background:var(--protect-bottom);pointer-events:none}
.says-photo--protect-left::after{content:"";position:absolute;inset:0;background:var(--protect-left);pointer-events:none}

@media(max-width:720px){
  :root{--fs-display-1:40px;--fs-display-2:32px;--fs-display-3:26px;--fs-h1:26px;--fs-h2:22px;--section-y:64px;--gutter:20px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:1ms !important;transition-duration:1ms !important}}

/* ===== styles/components.css ===== */
/* SAYS Solar Energy — component styles. Consumed by the React primitives in
   components/**; also usable directly as classes in plain HTML. */

/* ---------- Icon (Lucide wrapper) ---------- */
.says-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;color:currentColor}
.says-icon svg{width:1em;height:1em;display:block}

/* ---------- Button ---------- */
.says-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);font-family:var(--font-display);font-weight:var(--fw-bold);letter-spacing:.02em;text-transform:uppercase;border:var(--bw-thick) solid transparent;border-radius:var(--r-control);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur-fast) var(--ease)}
.says-btn:active{transform:translateY(1px)}
.says-btn[disabled],.says-btn[aria-disabled="true"]{cursor:not-allowed;opacity:.42;transform:none;box-shadow:none}
.says-btn--sm{font-size:12px;padding:7px 14px;min-height:34px}
.says-btn--md{font-size:13px;padding:10px 20px;min-height:42px}
.says-btn--lg{font-size:15px;padding:14px 28px;min-height:52px}
.says-btn--block{width:100%}
.says-btn--primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.says-btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:var(--shadow-glow)}
.says-btn--primary:active{background:var(--accent-press);border-color:var(--accent-press);box-shadow:none}
.says-btn--secondary{background:var(--says-navy-900);color:var(--text-inverse);border-color:var(--says-navy-900)}
.says-btn--secondary:hover{background:var(--says-navy-800);border-color:var(--says-navy-800)}
.says-btn--secondary:active{background:var(--says-black);border-color:var(--says-black)}
.says-btn--outline{background:transparent;color:var(--text-strong);border-color:var(--border-strong)}
.says-btn--outline:hover{border-color:var(--border-strong);background:var(--surface-hover)}
.says-btn--outline:active{background:var(--surface-active)}
.says-btn--ghost{background:transparent;color:var(--text-strong);border-color:transparent}
.says-btn--ghost:hover{background:var(--surface-active)}
.says-btn--link{background:transparent;border-color:transparent;color:var(--text-link);padding-left:0;padding-right:0;min-height:auto}
.says-btn--link:hover{color:var(--text-link-hover)}
/* Kenarlık --border-inverse (%14 beyaz) ile koyu zeminde 1,55:1 kalıyordu; WCAG 1.4.11
   bir kontrolün sınırı için 3:1 istiyor ve buton "buton" gibi okunmuyordu. %42 beyaz
   charcoal üstünde 3,87:1 veriyor. Ayraç çizgilerinde --border-inverse aynen kalıyor —
   ayraçlar için 3:1 şartı yok. */
.says-btn--on-dark.says-btn--outline{color:var(--text-inverse);border-color:rgba(255,255,255,.42)}
.says-btn--on-dark.says-btn--outline:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.62)}
.says-btn--on-dark.says-btn--ghost{color:var(--text-inverse)}
.says-btn--on-dark.says-btn--ghost:hover{background:rgba(255,255,255,.08)}

/* ---------- IconButton ---------- */
.says-iconbtn{display:inline-flex;align-items:center;justify-content:center;border:var(--bw-hair) solid transparent;border-radius:var(--r-control);background:transparent;color:var(--text-body);cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.says-iconbtn:hover{background:var(--surface-active);color:var(--text-strong)}
.says-iconbtn:active{background:var(--surface-press)}
.says-iconbtn[disabled]{opacity:.4;cursor:not-allowed}
.says-iconbtn--sm{width:32px;height:32px;font-size:16px}
.says-iconbtn--md{width:40px;height:40px;font-size:18px}
.says-iconbtn--lg{width:48px;height:48px;font-size:22px}
.says-iconbtn--solid{background:var(--accent);color:var(--on-accent)}
.says-iconbtn--solid:hover{background:var(--accent-hover);color:var(--on-accent)}
.says-iconbtn--outline{border-color:var(--border-default)}
.says-iconbtn--on-dark{color:var(--text-inverse)}
.says-iconbtn--on-dark:hover{background:rgba(255,255,255,.1);color:var(--says-yellow-500)}

/* ---------- Capsule (the totem's yellow phone pill) ---------- */
.says-capsule{display:inline-flex;align-items:center;gap:var(--sp-2);background:var(--accent);color:var(--on-accent);border-radius:var(--r-capsule);padding:9px 18px 9px 14px;font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:14px;letter-spacing:.06em;text-decoration:none;border:0;transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.says-capsule:hover{background:var(--accent-hover);box-shadow:var(--shadow-glow);color:var(--on-accent)}
.says-capsule--outline{background:transparent;color:var(--says-yellow-500);box-shadow:inset 0 0 0 var(--bw-thick) var(--says-yellow-500)}
.says-capsule--outline:hover{background:var(--says-yellow-500);color:var(--on-accent)}
.says-capsule--sm{padding:6px 14px 6px 11px;font-size:12px}

/* ---------- Badge / Tag ---------- */
.says-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-xs);border:var(--bw-hair) solid transparent;line-height:1.4}
.says-badge--neutral{background:var(--surface-active);color:var(--text-body)}
.says-badge--accent{background:var(--says-yellow-500);color:var(--says-black)}
.says-badge--accent-soft{background:var(--accent-soft);color:var(--accent-soft-text);border-color:var(--accent-soft-border)}
.says-badge--info{background:var(--info-50);color:var(--info-700);border-color:var(--says-blue-200)}
.says-badge--success{background:var(--success-50);color:var(--success-700);border-color:color-mix(in oklch,var(--success-500) 30%,transparent)}
.says-badge--warning{background:var(--warning-50);color:var(--warning-700);border-color:color-mix(in oklch,var(--warning-500) 30%,transparent)}
.says-badge--danger{background:var(--danger-50);color:var(--danger-700);border-color:color-mix(in oklch,var(--danger-500) 30%,transparent)}
.says-badge--on-dark{background:rgba(255,255,255,.1);color:var(--text-inverse);border-color:var(--border-inverse)}
.says-badge--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

.says-tag{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-text);font-weight:var(--fw-medium);font-size:var(--fs-body-sm);color:var(--text-body);background:var(--surface-hover);border:var(--bw-hair) solid var(--border-default);border-radius:var(--r-pill);padding:5px 12px;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.says-tag--interactive{cursor:pointer}
.says-tag--interactive:hover{border-color:var(--border-strong);background:var(--surface-active)}
.says-tag--selected{background:var(--says-navy-900);border-color:var(--says-navy-900);color:var(--text-inverse)}
.says-tag__remove{display:inline-flex;background:none;border:0;padding:0;cursor:pointer;color:var(--text-muted);font-size:14px}
.says-tag__remove:hover{color:var(--danger-500)}

/* ---------- Card ---------- */
.says-card{background:var(--surface-card);border:var(--bw-hair) solid var(--border-subtle);border-radius:var(--r-card);position:relative;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.says-card--pad-sm{padding:var(--sp-4)}
.says-card--pad-md{padding:var(--sp-6)}
.says-card--pad-lg{padding:var(--sp-8)}
.says-card--pad-none{padding:0}
.says-card--elevated{box-shadow:var(--shadow-sm);border-color:transparent}
.says-card--interactive{cursor:pointer}
.says-card--interactive:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.says-card--selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.says-card--dark{background:var(--says-charcoal-900);border-color:var(--border-inverse);color:var(--text-inverse-muted)}
.says-card--dark h3,.says-card--dark h4{color:var(--text-inverse)}
.says-card--topbar{border-top:var(--bw-rule) solid var(--accent)}
.says-card__media{overflow:hidden;border-radius:var(--r-card) var(--r-card) 0 0;background:var(--surface-active)}
.says-card__footer{border-top:var(--bw-hair) solid var(--border-subtle);margin-top:var(--sp-5);padding-top:var(--sp-4)}

/* ---------- ServiceItem (totem sign service row) ---------- */
.says-service{display:flex;align-items:flex-start;gap:var(--sp-4);text-decoration:none;border:0;color:inherit}
/* Glif CIPLAK. Kaynak fotografta (totem, vitrin) hicbir ikon bir kabin icinde degil;
   mavi karo sonradan eklenmis bir varsayimdi ve sitenin en jenerik duran ogesiydi.
   Kutu yalnizca ETKILESIMLI gliflerde kalir (form secim kartlari) - orada kutu bir
   tiklama hedefi, dekor degil. */
.says-service__icon{display:inline-flex;align-items:center;justify-content:center;font-size:24px;flex:none;color:var(--text-strong)}
.says-service__label{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:14px;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;color:var(--text-strong);margin:0}
.says-service__desc{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--text-muted);margin:6px 0 0;max-width:42ch}
/* Koyu yuzeyde beyaz - tabeladaki gibi. Sari, kapsul/cizgi/butona ayrilmis kalir. */
.says-service--on-dark .says-service__icon{color:var(--text-inverse);background:none}
.says-service--on-dark .says-service__label{color:var(--text-inverse)}
.says-service--on-dark .says-service__desc{color:var(--text-inverse-muted)}
.says-service--stacked{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
a.says-service:hover .says-service__label{color:var(--says-blue-600)}
a.says-service.says-service--on-dark:hover .says-service__label{color:var(--says-yellow-500)}

/* ---------- StatBlock ---------- */
.says-stat{display:flex;flex-direction:column;gap:6px}
.says-stat__value{font-family:var(--font-mono);font-weight:var(--fw-semibold);font-size:var(--fs-data-lg);letter-spacing:var(--ls-data);font-variant-numeric:tabular-nums;line-height:1.05;color:var(--text-strong);display:flex;align-items:baseline;gap:4px}
.says-stat__value .says-unit{font-size:14px}
.says-stat__label{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.says-stat__note{font-size:var(--fs-caption);color:var(--text-faint)}
.says-stat--lg .says-stat__value{font-size:var(--fs-data-xl)}
.says-stat--lg .says-stat__value .says-unit{font-size:18px}
.says-stat--on-dark .says-stat__value{color:var(--says-yellow-500)}
.says-stat--on-dark .says-stat__label{color:var(--text-inverse-muted)}
.says-stat--on-dark .says-stat__note{color:rgba(255,255,255,.42)}
.says-stat--ruled{padding-left:var(--sp-4);border-left:var(--bw-rule) solid var(--accent)}

/* ---------- SectionHeading ---------- */
.says-sechead{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-8)}
.says-sechead--center{align-items:center;text-align:center}
.says-sechead__title{margin:0}
.says-sechead__sub{margin:0;font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);color:var(--text-muted);max-width:60ch}
.says-sechead--on-dark .says-sechead__sub{color:var(--text-inverse-muted)}

/* ---------- Form fields ---------- */
.says-field{display:flex;flex-direction:column;gap:6px}
.says-field__label{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-strong)}
.says-field__req{color:var(--danger-500);margin-left:3px}
.says-field__hint{font-size:var(--fs-caption);color:var(--text-muted)}
.says-field__error{font-size:var(--fs-caption);color:var(--danger-700);display:flex;align-items:center;gap:5px}
.says-input,.says-textarea,.says-select__control{width:100%;font-family:var(--font-text);font-size:var(--fs-body);color:var(--text-strong);background:var(--surface-card);border:var(--bw-hair) solid var(--border-default);border-radius:var(--r-control);padding:10px 12px;min-height:44px;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.says-input::placeholder,.says-textarea::placeholder{color:var(--text-faint)}
.says-input:hover,.says-textarea:hover,.says-select__control:hover{border-color:var(--border-strong)}
.says-input:focus,.says-textarea:focus,.says-select__control:focus{outline:none;border-color:var(--says-blue-500);box-shadow:0 0 0 3px color-mix(in oklch,var(--says-blue-500) 22%,transparent)}
.says-input[disabled],.says-textarea[disabled],.says-select__control[disabled]{background:var(--surface-disabled);color:var(--text-faint);cursor:not-allowed}
.says-textarea{min-height:104px;resize:vertical;line-height:1.55}
.says-input--invalid,.says-textarea--invalid,.says-select__control--invalid{border-color:var(--danger-500)}
.says-input--invalid:focus{box-shadow:0 0 0 3px color-mix(in oklch,var(--danger-500) 20%,transparent)}
.says-input-wrap{position:relative;display:flex;align-items:center}
.says-input-wrap .says-icon{position:absolute;color:var(--text-faint);font-size:18px;pointer-events:none}
.says-input-wrap--lead .says-icon{left:12px}
.says-input-wrap--lead .says-input{padding-left:40px}
.says-input__suffix{position:absolute;right:12px;font-family:var(--font-mono);font-size:var(--fs-data-sm);color:var(--text-muted);pointer-events:none}
.says-select{position:relative;display:block}
.says-select__control{appearance:none;padding-right:38px;cursor:pointer}
.says-select__chev{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:18px;pointer-events:none;display:flex}

.says-check,.says-radio{display:flex;align-items:flex-start;gap:var(--sp-3);cursor:pointer;font-size:var(--fs-body-sm);color:var(--text-body);line-height:1.4}
.says-check input,.says-radio input{position:absolute;opacity:0;width:0;height:0}
.says-check__box,.says-radio__box{width:20px;height:20px;flex:none;border:var(--bw-thick) solid var(--border-strong);background:var(--surface-card);display:flex;align-items:center;justify-content:center;color:transparent;font-size:13px;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);margin-top:1px}
.says-check__box{border-radius:var(--r-xs)}
.says-radio__box{border-radius:50%}
.says-check:hover .says-check__box,.says-radio:hover .says-radio__box{border-color:var(--says-navy-900)}
.says-check input:checked+.says-check__box{background:var(--accent);border-color:var(--accent);color:var(--says-black)}
.says-radio input:checked+.says-radio__box{border-color:var(--accent);border-width:6px}
.says-check input:focus-visible+.says-check__box,.says-radio input:focus-visible+.says-radio__box{outline:2px solid var(--focus-ring);outline-offset:2px}
.says-check--disabled,.says-radio--disabled{opacity:.45;cursor:not-allowed}
.says-check__text strong,.says-radio__text strong{display:block;font-family:var(--font-text);font-weight:var(--fw-semibold);color:var(--text-strong)}

.says-switch{display:inline-flex;align-items:center;gap:var(--sp-3);cursor:pointer;font-size:var(--fs-body-sm);color:var(--text-body)}
.says-switch input{position:absolute;opacity:0;width:0;height:0}
.says-switch__track{width:44px;height:24px;flex:none;border-radius:var(--r-pill);background:var(--control-track);position:relative;transition:background var(--dur) var(--ease)}
.says-switch__thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--control-thumb);box-shadow:var(--shadow-xs);transition:transform var(--dur) var(--ease)}
.says-switch input:checked+.says-switch__track{background:var(--success-500)}
.says-switch input:checked+.says-switch__track .says-switch__thumb{transform:translateX(20px)}
.says-switch input:focus-visible+.says-switch__track{outline:2px solid var(--focus-ring);outline-offset:2px}
.says-switch--disabled{opacity:.45;cursor:not-allowed}

/* ---------- Tabs ---------- */
.says-tabs{display:flex;gap:var(--sp-6);border-bottom:var(--bw-hair) solid var(--border-default);overflow-x:auto}
.says-tab{appearance:none;background:none;border:0;padding:0 0 12px;margin-bottom:-1px;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);cursor:pointer;border-bottom:var(--bw-rule) solid transparent;white-space:nowrap;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);display:inline-flex;align-items:center;gap:8px}
.says-tab:hover{color:var(--text-strong)}
.says-tab--active{color:var(--text-strong);border-bottom-color:var(--accent)}
.says-tab[disabled]{opacity:.4;cursor:not-allowed}
.says-tabs--on-dark{border-bottom-color:var(--border-inverse)}
.says-tabs--on-dark .says-tab{color:var(--text-inverse-muted)}
.says-tabs--on-dark .says-tab--active,.says-tabs--on-dark .says-tab:hover{color:var(--text-inverse)}
.says-tabs--pills{border-bottom:0;gap:var(--sp-2)}
.says-tabs--pills .says-tab{padding:8px 16px;border-bottom:0;border-radius:var(--r-pill);background:var(--surface-hover);border:var(--bw-hair) solid var(--border-default);margin:0}
.says-tabs--pills .says-tab--active{background:var(--says-navy-900);border-color:var(--says-navy-900);color:var(--text-inverse)}

/* ---------- Dialog ---------- */
.says-dialog__scrim{position:fixed;inset:0;background:var(--surface-overlay);backdrop-filter:blur(4px);z-index:var(--z-overlay);display:flex;align-items:center;justify-content:center;padding:var(--sp-6);animation:says-fade var(--dur) var(--ease)}
.says-dialog{background:var(--surface-card);border-radius:var(--r-md);box-shadow:var(--shadow-lg);width:100%;max-width:520px;max-height:88vh;display:flex;flex-direction:column;z-index:var(--z-dialog);animation:says-rise var(--dur-slow) var(--ease-out);border-top:var(--bw-rule) solid var(--accent)}
.says-dialog--wide{max-width:760px}
.says-dialog__head{display:flex;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-6) var(--sp-6) var(--sp-4)}
.says-dialog__title{margin:0;font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:var(--fs-h3);color:var(--text-strong);flex:1}
.says-dialog__body{padding:0 var(--sp-6);overflow-y:auto;color:var(--text-body)}
.says-dialog__foot{display:flex;justify-content:flex-end;gap:var(--sp-3);padding:var(--sp-6);border-top:var(--bw-hair) solid var(--border-subtle);margin-top:var(--sp-6)}
@keyframes says-fade{from{opacity:0}to{opacity:1}}
@keyframes says-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- Toast ---------- */
.says-toast-stack{position:fixed;right:var(--sp-6);bottom:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);z-index:var(--z-toast)}
.says-toast{display:flex;align-items:flex-start;gap:var(--sp-3);background:var(--says-navy-900);color:var(--text-inverse);border-radius:var(--r-sm);padding:var(--sp-4);min-width:300px;max-width:400px;box-shadow:var(--shadow-lg);border-left:var(--bw-rule) solid var(--accent);animation:says-slide-in var(--dur-slow) var(--ease-out)}
.says-toast__icon{font-size:18px;color:var(--accent);margin-top:1px}
.says-toast--success{border-left-color:var(--success-500)}
.says-toast--success .says-toast__icon{color:var(--success-500)}
.says-toast--danger{border-left-color:var(--danger-500)}
.says-toast--danger .says-toast__icon{color:var(--danger-500)}
.says-toast__title{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-body-sm);margin:0}
.says-toast__msg{font-size:var(--fs-caption);color:var(--text-inverse-muted);margin:3px 0 0}
.says-toast__close{background:none;border:0;color:var(--text-inverse-muted);cursor:pointer;font-size:16px;display:flex;padding:0}
.says-toast__close:hover{color:var(--text-inverse)}
@keyframes says-slide-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* ---------- Tooltip ---------- */
.says-tooltip{position:relative;display:inline-flex}
.says-tooltip__bubble{position:absolute;z-index:var(--z-dropdown);background:var(--says-navy-900);color:var(--text-inverse);font-size:var(--fs-caption);line-height:1.4;padding:7px 10px;border-radius:var(--r-xs);white-space:nowrap;box-shadow:var(--shadow-md);pointer-events:none;opacity:0;transition:opacity var(--dur) var(--ease)}
.says-tooltip__bubble--visible{opacity:1}
.says-tooltip__bubble--top{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.says-tooltip__bubble--bottom{top:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.says-tooltip__bubble--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}
.says-tooltip__bubble--left{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}