/* §303.38 — KÜÇÜK METİNDE KONTRAST: `--brand` (#1e8a8a) beyazda 4.15:1 → WCAG AA'nın
   4.5:1'ini KARŞILAMIYOR. Metin olan 4 yer MEVCUT `--brand-dark` (#166666, 6.72:1)
   belirtecine bağlandı — yeni renk İCAT EDİLMEDİ.
   DOKUNULMAYANLAR (ölçüldü, ihlal DEĞİL): `.hero h1 em` clamp(27px,5vw,42px)/800 =
   BÜYÜK metin (eşik 3:1) · `.card .ico` ikon = metin dışı (eşik 3:1) ·
   kenarlık/zemin `--brand` kullanımları (metin dışı 3:1). */
/* ══════════════════════════════════════════════════════════════════════════════
   TECCOM — isbirligi.teccom.com.tr ORTAK TASARIM SİSTEMİ   (§305 Faz A)

   NEDEN: 10 sayfanın her biri kendi `<style>` bloğunu taşıyordu (~74 KB) ve her biri
   kendi renklerini icat ediyordu. ÖLÇÜLDÜ: sitede ALTI ayrı aksan ailesi vardı
   (#7c3aed mor ×22 · #ec4899 pembe · #ea580c turuncu · #fca5a5 · #fb923c · #1446CC mavi)
   ve HİÇBİRİ Teccom'un marka rengiyle örtüşmüyordu. "AI gibi duruyor" hissinin
   ölçülebilir kaynağı buydu.

   BELİRTEÇLER `admin-shared.css` İLE BİREBİR — ikinci bir palet TANIMLANMADI. İki yerde
   ayrı palet tutmak §109 sınıfı sapma üretir: biri güncellenir, diğeri geride kalır.
   Zaten `--text/--text2/--border/--muted` değerleri iki tarafta AYNIYDI; ayrışan yalnız
   ana renk (mavi) ve zemin/radius idi.

   KAPSAM: yalnız SAYFALAR ARASI ORTAK olan bileşenler (header, wrap, hero, card, chip,
   buton, form, footer). Sayfaya özgü sınıflar (.jc, .reqrow, .file-zone, .brand-opt…)
   kendi sayfasında kalır — buraya taşımak, tek sayfanın ihtiyacını herkese dayatırdı.
   ══════════════════════════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* admin-shared.css ile AYNI değerler */
  --brand:#1e8a8a; --brand-light:#eef7f7; --brand-mid:#28a0a0; --brand-dark:#166666;
  --text:#0F1623;  --text2:#5A6478;  --muted:#9AA3B2;
  --bg:#F0F2F7;    --surface:#FFFFFF; --border:#E2E6EF; --border-strong:#C8CFDC;
  --success:#0F7B4B; --success-bg:#EDFAF4;
  --warning:#915A00; --warning-bg:#FFF8EC;
  --danger:#B91C1C;  --danger-bg:#FEF2F2;
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px;
  --shadow-sm:0 1px 3px rgba(15,22,35,.07), 0 1px 2px rgba(15,22,35,.04);
  --shadow-md:0 4px 14px rgba(15,22,35,.08);
  /* ESKİ AD → KANONİK AD. Taşıma bitti ama `--primary*`/`--radius` HÂLÂ KULLANILIYOR:
     ölçüldü, 4 sayfada 51 kullanım (ilan · kariyer · talep · talepler). Bu yüzden
     "geçici köprü" DEĞİL, KALICI eş anlamlıdır. Silmek 51 bildirimi geçersiz yapardı
     (tanımsız `var()` BOŞ döner, §132). Aşağıdaki 11 eski değişkenle aynı statüde. */
  --primary:var(--brand); --primary-dark:var(--brand-dark); --primary-soft:var(--brand-light);
  --radius:var(--radius-lg);
  /* KVKK onay bileşeni (`kvkk-consent.js`) rengini `--kvkk-accent`ten okur ama bunu YALNIZ
     diyalog açılırken yazıyor; o ana kadar formdaki onay bağlantısı ve kutucuğu RENKSİZ
     kalıyordu (ölçüldü: `--kvkk-accent` boş, renk metin rengine düşüyor). Varsayılan burada
     verilir — betik açılışta kendi değerini yazınca onu EZER, davranış değişmez. */
  --kvkk-accent:var(--brand);

  /* ── ESKİ SAYFA DEĞİŞKENLERİ → AÇIK TEMA KARŞILIKLARI ───────────────────────────────
     KUSUR (ölçümle yakalandı): sayfaların `:root` blokları budanırken, kalan CSS'in HÂLÂ
     kullandığı 11 değişken tanımsız kaldı — **96 kullanım**, 6 sayfada. Tanımsız `var()`
     BOŞ döner (§132): `color:var(--mu)` bildirimi geçersiz olur ve renk MİRAS ALINIR.
     Ekranda "çalışıyor gibi" durduğu için gözle fark edilmiyordu; envanterle çıktı.
     ÖZGÜN DEĞERLER GERİ KONMADI — hepsi KOYU TEMA içindi (`--tx:#f1f5f9` beyaza yakın metin,
     `--s1:#0e0820` koyu yüzey). Site artık açık tema; koyu değerleri geri koymak metni
     okunmaz yapardı. Her biri AÇIK TEMA karşılığına eşlendi. */
  --tx:var(--text);            /* metin        (eski: #f1f5f9, koyu zemin için beyaz)      */
  /* `--muted` (#9AA3B2) DEĞİL `--text2` (#5A6478): bu değişken 33 yerde GÖVDE METNİ için
     kullanılıyor ve influencer'da FOTOĞRAF ÜSTÜNDE duruyor; #9AA3B2 orada okunmuyordu
     (ekran görüntüsüyle görüldü). `--text2` hem "soluk" hem okunur. */
  --mu:var(--text2);           /* soluk metin  (eski: rgba(241,245,249,.45))               */
  --s1:var(--bg);              /* en arka yüzey(eski: #0e0820)                             */
  --s2:var(--surface);         /* kart yüzeyi  (eski: #150d2e)                             */
  --surface2:var(--surface);   /* kart yüzeyi  (eski: #1e1510)                             */
  --bd:var(--border);          /* kenarlık     (eski: rgba(167,139,250,.12) mor)           */
  --bd2:var(--border-strong);  /* güçlü kenar  (eski: rgba(167,139,250,.3))                */
  --border2:var(--border-strong); /* (eski: rgba(234,88,12,.3) turuncu)                    */
  --pu:var(--brand);           /* aksan        (eski: #7c3aed mor)                         */
  --navy:var(--text);          /* koyu metin   (eski: #15223B)                             */
  --ok:var(--success);         /* başarı       (eski: #0FA968) — ANLAM korunur             */
}

body{
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--text);
  min-height:100vh; display:flex; flex-direction:column; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ── Üst şerit ─────────────────────────────────────────────────────────────── */
.isb-head{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:1.25rem;
  padding:0 1.25rem; min-height:62px; flex-wrap:wrap;
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo img{height:26px;width:auto;display:block}
.logo .b{
  background:var(--brand); color:#fff; font-size:10px; font-weight:700;
  padding:3px 8px; border-radius:var(--radius-sm); letter-spacing:.4px; text-transform:uppercase;
}
/* Bölüm menüsü: ziyaretçi sayfalar arasında gezinebilsin. Eskiden her sayfa ÇIKMAZ
   sokaktı; yalnız ana sayfaya dönerek geçilebiliyordu. */
.isb-nav{display:flex;align-items:center;gap:.35rem;margin-left:auto;flex-wrap:wrap}
.isb-nav a{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:var(--radius-sm);
  font-size:13.5px; font-weight:600; color:var(--text2); text-decoration:none;
  transition:background .15s, color .15s;
}
.isb-nav a:hover{background:var(--brand-light); color:var(--brand-dark)}
.isb-nav a.on{background:var(--brand-light); color:var(--brand-dark)}
.isb-nav a svg{flex-shrink:0;opacity:.85}
@media(max-width:640px){
  .isb-head{padding:.6rem 1rem}
  .isb-nav{margin-left:0;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .isb-nav a{padding:6px 10px;font-size:12.5px;white-space:nowrap}
}

/* ── Gövde ─────────────────────────────────────────────────────────────────── */
.wrap{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:3rem 1.25rem 3.5rem}
@media(max-width:640px){ .wrap{padding:2rem 1rem 2.5rem} }

.hero{text-align:center;margin-bottom:2.75rem}
.hero .tag{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--surface);border:1px solid var(--border);color:var(--brand-dark);
  font-size:12.5px;font-weight:700;padding:6px 14px;border-radius:100px;margin-bottom:1.25rem;
}
.hero h1{font-size:clamp(27px,5vw,42px);font-weight:800;letter-spacing:-1px;margin-bottom:.7rem;line-height:1.15}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero p{color:var(--text2);font-size:clamp(14px,2.5vw,16.5px);max-width:580px;margin:0 auto}

/* ── Kart ──────────────────────────────────────────────────────────────────── */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:1.6rem;box-shadow:var(--shadow-sm);
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
a.card{text-decoration:none;color:inherit;display:flex;flex-direction:column}
a.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand)}
.card .ico{
  width:52px;height:52px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem;
  background:var(--brand-light);color:var(--brand);
}
.card h3{font-size:19px;font-weight:700;letter-spacing:-.3px;margin-bottom:.4rem}
.card p{color:var(--text2);font-size:14px;flex:1;margin-bottom:1.3rem}

/* ── Düğmeler ──────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:inherit;font-size:14px;font-weight:700;line-height:1;
  padding:11px 20px;border-radius:var(--radius-md);border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,color .15s;
}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-outline{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn-outline:hover{border-color:var(--brand);color:var(--brand-dark)}
.btn svg{transition:transform .15s}
.btn:hover svg{transform:translateX(2px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn[disabled]:hover svg{transform:none}

/* ── Rozet / çip ───────────────────────────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--brand-light);color:var(--brand-dark);
  font-size:12px;font-weight:600;padding:4px 10px;border-radius:100px;
}
.chip-muted{background:var(--bg);color:var(--text2);border:1px solid var(--border)}

/* ── Form ──────────────────────────────────────────────────────────────────── */
.alan{margin-bottom:1.05rem}
.alan label{display:block;font-size:13px;font-weight:600;color:var(--text2);margin-bottom:.4rem}
.alan input[type=text],.alan input[type=email],.alan input[type=tel],.alan input[type=url],
.alan input[type=number],.alan input[type=date],.alan select,.alan textarea{
  width:100%;font-family:inherit;font-size:14px;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:11px 13px;transition:border-color .15s, box-shadow .15s;
}
.alan input:focus,.alan select:focus,.alan textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(30,138,138,.12);
}
.alan textarea{min-height:110px;resize:vertical}
.alan .ipucu{font-size:12px;color:var(--muted);margin-top:.3rem}
.alan.hata input,.alan.hata select,.alan.hata textarea{border-color:var(--danger)}
.alan .hata-metin{font-size:12px;color:var(--danger);margin-top:.3rem}

/* ── Uyarı kutusu ──────────────────────────────────────────────────────────── */
.uyari{padding:12px 14px;border-radius:var(--radius-md);font-size:13.5px;line-height:1.55;margin-bottom:1.2rem}
.uyari-ok{background:var(--success-bg);border:1px solid rgba(15,123,75,.25);color:var(--success)}
.uyari-err{background:var(--danger-bg);border:1px solid rgba(185,28,28,.25);color:var(--danger)}
.uyari-info{background:var(--brand-light);border:1px solid rgba(30,138,138,.25);color:var(--brand-dark)}
.uyari-warn{background:var(--warning-bg);border:1px solid rgba(145,90,0,.25);color:var(--warning)}

/* ── Geri bağlantısı ───────────────────────────────────────────────────────── */
.back-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--text2);font-size:13.5px;font-weight:600;text-decoration:none;
}
.back-link:hover{color:var(--brand-dark)}

/* ── Altlık ────────────────────────────────────────────────────────────────── */
.isb-foot{
  border-top:1px solid var(--border);background:var(--surface);
  padding:1.4rem 1.25rem;text-align:center;color:var(--muted);font-size:12.5px;
}
.isb-foot a{color:var(--text2);text-decoration:none;font-weight:600}
.isb-foot a:hover{color:var(--brand-dark)}