/*
Theme Name: SKYEX Mühendislik
Template: bisasoft
Author: Bisasoft
Description: SKYEX Mühendislik (120-0360) müşteri teması — ATEX / IECEx patlama korunumu mühendisliği. Çok sayfalı kurumsal site: ana sayfa özet + dokuz iç sayfa. Yalnızca GÖRÜNÜM içerir; SEO, KVKK, form ve kabuk ana temadan gelir. Kurallar: docs/00-anayasa.md Bölüm 4.
Version: 0.1.0
Text Domain: skyex-muhendislik
*/

/* ──────────────────────────────────────────────────────────
 * SKYEX — TASARIM
 *
 * Kaynak: design-lab/src/themes/skyex (canlı sunum:
 * sunum.bisasoft.dev/120-0360-5c1a9e73/). Tailwind sınıfları PHP
 * çizerlerine OLDUĞU GİBİ taşındı; burada yalnız Tailwind'le ifade
 * edilemeyenler durur (pah kırığı, teknik çizim ızgarası, perde, kabuk
 * uyarlamaları).
 *
 * PALET brief'teki oranla kuruldu: beyaz %60 · SKYEX mavisi %20 ·
 * lacivert %15 · açık gri %5. Koyu yüzey SİYAH değil lacivert ve sayfa
 * başına en çok üç yerde.
 *
 * Renkler theme.json token'larından TÜRETİLİR, burada yeniden yazılmaz
 * (kontrolcünün `ham-hex` kuralı). Palet tek kaynakta kalır.
 * ────────────────────────────────────────────────────────── */

:root {
  --s-mavi: var(--wp--preset--color--vurgu);
  --s-mavi-koyu: var(--wp--preset--color--vurgu-koyu);
  --s-mavi-metin: var(--wp--preset--color--mavi-metin);
  --s-mavi-parlak: var(--wp--preset--color--mavi-parlak);
  --s-mavi-soluk: var(--wp--preset--color--mavi-soluk);
  --s-mavi-cizgi: var(--wp--preset--color--mavi-cizgi);
  --s-derin: var(--wp--preset--color--mavi-derin);
  --s-lacivert: var(--wp--preset--color--koyu);
  --s-lacivert-2: var(--wp--preset--color--koyu-2);
  --s-lacivert-3: var(--wp--preset--color--lacivert-3);
  --s-gece: var(--wp--preset--color--gece);
  --s-murekkep: var(--wp--preset--color--murekkep);
  --s-govde: var(--wp--preset--color--govde);
  --s-soluk: var(--wp--preset--color--soluk);
  --s-cizgi: var(--wp--preset--color--cizgi);
  --s-acik: var(--wp--preset--color--yuzey);
  --s-sari: var(--wp--preset--color--sari);
  --s-sari-metin: var(--wp--preset--color--sari-metin);
  --s-beyaz: var(--wp--preset--color--beyaz);

  /* Ana temanın kapsayıcı genişliği — .bs-kap bunu okur.
     84rem: sekiz başlıklı menü + logo + çağrı düğmesi tek satıra sığsın. */
  --bs-kap: 84rem;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  color: var(--s-murekkep);
  background: var(--s-beyaz);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Poppins', 'Inter', sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

/* Teknik gösterimler (Zone 1, IIB, T4, Ex db …) DAİMA tek aralıklı yazıyla.
   Sitenin imzası: standardın dili sayfada da standart görünüyor. */
.kod {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-feature-settings: "tnum" 1;
}

/* ── YÜZEYLER ─────────────────────────────────────────────── */
.s-koyu {
  background:
    radial-gradient(900px 420px at 12% -10%, color-mix(in srgb, var(--s-derin) 28%, transparent), transparent 60%),
    linear-gradient(160deg, var(--s-lacivert) 0%, var(--s-lacivert-2) 62%, var(--s-gece) 100%);
  color: var(--s-beyaz);
}
.s-acik-zemin { background: var(--s-acik); }

/* Teknik çizim ızgarası — koyu ve açık yüzey için iki ton. */
.s-izgara {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--s-beyaz) 5.5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--s-beyaz) 5.5%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
}
.s-izgara-acik {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--s-murekkep) 4.5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--s-murekkep) 4.5%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Logodaki pah kırığı sayfanın geometrisine taşınıyor: kart, rozet ve
   düğmelerin sol-üst / sağ-alt köşeleri kesik. Marka işaretini tekrar
   etmeden markanın biçim dilini tekrar ediyor. */
.s-pah {
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.s-pah-kucuk {
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

/* Bölüm üstü etiket — kısa çizgi + büyük harf. */
.s-etiket::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 2px;
  margin-right: 10px;
  vertical-align: 3px;
  background: currentColor;
}

/* Kaydırmalı şeritlerde kenar çubuğunu gizle (proje sekmeleri, mobil). */
.s-serit { scrollbar-width: none; -ms-overflow-style: none; }
.s-serit::-webkit-scrollbar { display: none; }

/* Açılış yüksekliği EKRAN GENİŞLİĞİNE bağlı. `object-cover` görseli
   genişliğe göre ölçekler; yükseklik sabit kalırsa geniş ekranda alttan
   kırpılan pay büyür ve forkliftin tekerlekleri kesilir (design-lab'da
   ölçüldü: gereken en az yükseklik ~31vw). */
.s-acilis-boy { min-height: clamp(520px, 32vw, 980px); }

/* Açılış görselinin okuma perdesi. Karenin solu zaten koyu, forkliftin
   durduğu sağ taraf parlak — perde solda güçlü, sağda neredeyse yok. */
.s-perde {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--s-gece) 86%, transparent) 0%,
    color-mix(in srgb, var(--s-lacivert) 72%, transparent) 26%,
    color-mix(in srgb, var(--s-lacivert) 44%, transparent) 44%,
    color-mix(in srgb, var(--s-lacivert) 16%, transparent) 62%,
    color-mix(in srgb, var(--s-lacivert) 5%, transparent) 82%,
    color-mix(in srgb, var(--s-lacivert) 4%, transparent) 100%);
}
@media (max-width: 1023px) {
  .s-perde {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--s-gece) 88%, transparent) 0%,
      color-mix(in srgb, var(--s-lacivert) 72%, transparent) 46%,
      color-mix(in srgb, var(--s-lacivert) 42%, transparent) 100%);
  }
}

/* İç sayfa başlığındaki fotoğraf perdesi — metin her zaman okunur. */
.s-sayfa-perde {
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--s-gece) 94%, transparent) 0%,
    color-mix(in srgb, var(--s-lacivert) 86%, transparent) 46%,
    color-mix(in srgb, var(--s-lacivert) 62%, transparent) 100%);
}

/* ── PREFLIGHT'IN EKSİK PARÇASI ────────────────────────────
 * Tailwind preflight BİLİNÇLİ alınmıyor (ana temanın taban stillerini
 * ezerdi). Ama bölümler saf Tailwind işaretlemesi ve preflight'ın sıfırladığı
 * tarayıcı varsayılanlarına güveniyor: başlık/paragraf margin'i, liste
 * girintisi, <button> kutusu. Sıfırlama YALNIZ bölümlerin içinde.
 *
 * `:where()` ZORUNLU: özgüllüğü sıfırlar; yoksa Tailwind'in `.mt-5` sınıfını
 * ezip tasarımın kendi boşluklarını yok eder (120-0349'da yaşandı).
 * ────────────────────────────────────────────────────────── */
:where(.skyex-sayfa, .skyex-cerceve) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd) {
  margin: 0;
  padding: 0;
}
:where(.skyex-sayfa, .skyex-cerceve) :where(ul, ol) { list-style: none; }
:where(.skyex-sayfa) :where(button) {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  text-align: inherit;
}

/* WordPress akış yerleşimi bölümlerin üstüne 24px basıyor; bant ritmi
   (beyaz → gri → lacivert) ancak bölümler yapışıkken okunuyor. */
.skyex-sayfa > section,
.skyex-sayfa > div { margin-block: 0; }

/* Menüden bölüme atlayınca yapışkan başlık bölüm başlığını örtmesin. */
.skyex-sayfa [id] { scroll-margin-top: 6rem; }

/* Etkileşimli öğelerde etkin durum `data-aktif` ile taşınır (tema.js). */
.skyex-sayfa [data-aktif] { transition: background-color .2s, color .2s, box-shadow .2s; }

/* ══════════════════════════════════════════════════════════
 * KABUK UYARLAMALARI
 * Yapı ana temadan gelir; marka dili buradan.
 *
 * ÖZGÜLLÜK KURALI: kabuk işaretlemesi Tailwind yardımcıları taşıyor ve
 * tw.css bu dosyadan SONRA yükleniyor. Tek sınıflı kural (0,1,0) yardımcıyla
 * eşit kalıp yenilir — uyarlamalar iki sınıflı / öğeli seçiciyle yazılır
 * (120-0323'te yakalandı).
 * ══════════════════════════════════════════════════════════ */

/* ── ÜST BANT ──────────────────────────────────────────────── */
div.bs-serit {
  background: var(--s-lacivert-2);
  color: color-mix(in srgb, var(--s-beyaz) 75%, transparent);
}
.bs-serit .bs-serit__ic { min-height: 2.75rem; }
.bs-serit a { transition: color .2s; }
.bs-serit a:hover { color: var(--s-beyaz); }
.bs-serit .bs-serit__isaret { color: var(--s-mavi-parlak); }
.bs-serit .bs-serit__adres { display: none; }
.bs-serit .skyex-slogan { color: color-mix(in srgb, var(--s-beyaz) 75%, transparent); }

/* ── BAŞLIK ÇUBUĞU ─────────────────────────────────────────── */
header.bs-ust {
  background: var(--s-beyaz);
  border-bottom: 1px solid var(--s-cizgi);
  box-shadow: 0 10px 30px -24px color-mix(in srgb, var(--s-lacivert) 55%, transparent);
}
.bs-ust .bs-ust__ic { height: 4.5rem; }
@media (min-width: 1024px) { .bs-ust .bs-ust__ic { height: 5.25rem; } }

.bs-ust .bs-logo { height: 2.4rem; }
@media (min-width: 1024px) { .bs-ust .bs-logo { height: 2.75rem; } }

/* Telefon üst bantta duruyor; başlıkta tekrar etmesi sekiz başlıklı menüye
   yer bırakmıyordu. */
.bs-ust a.bs-ust__tel { display: none; }

.bs-ust .bs-ust__menu { gap: 0; }
.bs-ust .bs-ust__menu > li > a {
  position: relative;
  align-self: stretch;
  padding: 1.95rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--s-murekkep);
  transition: color .2s;
}
@media (min-width: 1280px) {
  .bs-ust .bs-ust__menu > li > a { padding-inline: 0.7rem; font-size: 0.74rem; }
}
.bs-ust .bs-ust__menu > li > a:hover,
.bs-ust .bs-ust__menu > li.current-menu-item > a,
.bs-ust .bs-ust__menu > li.current-menu-ancestor > a,
.bs-ust .bs-ust__menu > li.current-menu-parent > a,
.bs-ust .bs-ust__menu > li.current_page_item > a {
  color: var(--s-mavi-metin);
}
/* Etkin sayfa göstergesi — müşteri taslağındaki mavi alt çizgi. */
.bs-ust .bs-ust__menu > li.current-menu-item > a::before,
.bs-ust .bs-ust__menu > li.current_page_item > a::before,
.bs-ust .bs-ust__menu > li.current-menu-ancestor > a::before {
  content: "";
  position: absolute;
  inset-inline: 0.55rem;
  bottom: 0;
  height: 3px;
  background: var(--s-mavi);
}

/* Açılır menü — köşesiz, üstte mavi çizgi, sola hizalı. */
.bs-ust .bs-ust__menu .sub-menu {
  left: 0;
  transform: none;
  min-width: 17rem;
  padding: 0.5rem;
  border-radius: 0;
  border-top: 2px solid var(--s-mavi);
  box-shadow: 0 28px 60px -30px color-mix(in srgb, var(--s-lacivert) 50%, transparent);
}
.bs-ust .bs-ust__menu .sub-menu a {
  border-radius: 0;
  font-size: 0.83rem;
  color: var(--s-govde);
  text-transform: none;
  letter-spacing: 0;
}
.bs-ust .bs-ust__menu .sub-menu a:hover {
  background: var(--s-acik);
  color: var(--s-mavi-metin);
}

/* Çağrı düğmesi — pah kırıklı, köşesiz, beyaz yazı. */
a.bs-cagri.bs-cagri--dolu,
button.bs-cagri.bs-cagri--dolu {
  border-radius: 0;
  background: var(--s-mavi);
  color: var(--s-beyaz);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
a.bs-cagri.bs-cagri--dolu:hover,
button.bs-cagri.bs-cagri--dolu:hover { background: var(--s-mavi-koyu); transform: none; }
.bs-ust a.bs-ust__cagri {
  min-height: 2.75rem;
  padding-inline: 1.25rem;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
button.bs-cagri.bs-cagri--acik { border-radius: 0; }

/* Mobil çekmece */
.bs-cekmece .bs-cekmece__menu > li > a { text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.92rem; }
.bs-cekmece .sub-menu a { color: var(--s-govde); }
.bs-cekmece .bs-logo { height: 2.4rem; }

/* ── STANDART ŞERİDİ (alt bilginin üstü) ───────────────────── */
.skyex-cerceve { background: var(--s-lacivert); }

/* ── ALT BİLGİ ─────────────────────────────────────────────── */
footer.bs-alt {
  background: var(--s-lacivert);
  color: color-mix(in srgb, var(--s-beyaz) 62%, transparent);
  padding-top: 3.5rem;
}
.bs-alt .bs-logo { height: 2.6rem; margin-bottom: 1.4rem; }
.bs-alt .bs-alt__baslik {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: color-mix(in srgb, var(--s-beyaz) 38%, transparent);
}
.bs-alt .bs-alt__kutu { border-radius: 0; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.bs-alt .bs-alt__kutu svg { color: var(--s-mavi-parlak); }
.bs-alt a:hover { color: var(--s-beyaz); }
.bs-alt .bs-alt__telif { color: color-mix(in srgb, var(--s-beyaz) 38%, transparent); }

/* ── YÜZEN DÜĞMELER ────────────────────────────────────────── */
div.bs-float a {
  border-radius: 0;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  width: 3rem;
  height: 3rem;
}
div.bs-float a.bs-float__wa { background: #25D366; color: var(--s-beyaz); } /* dis-marka: WhatsApp'ın kendi yeşili */
div.bs-float a.bs-float__tel { background: var(--s-mavi); color: var(--s-beyaz); }
div.bs-float a.bs-float__tel svg { color: var(--s-beyaz); }
div.bs-float a.bs-float__konum { background: var(--s-beyaz); color: var(--s-mavi-metin); }

/* ── KIRINTI YOLU (yasal sayfalar) ─────────────────────────── */
nav.bs-iz { background: var(--s-acik); border-color: var(--s-cizgi); color: var(--s-soluk); }
.bs-iz a:hover { color: var(--s-mavi-metin); }

/* ── METİN SAYFALARI (KVKK, çerez) ─────────────────────────── */
.bs-sayfa .bs-baslik { color: var(--s-murekkep); }
.bs-sayfa .bs-icerik li::marker { color: var(--s-mavi); }
.bs-sayfa .bs-icerik a { text-decoration-color: var(--s-mavi); }

/* ── PROJE FORMU ───────────────────────────────────────────── *
 * Form ana temadan gelir (KVKK kuralı, kayıt, SMTP). Burada yalnız düzen:
 * iki sütun ve markanın pah kırığı. */
.skyex-form form.bs-form { max-width: none; column-gap: 1rem; }
@media (min-width: 640px) {
  .skyex-form form.bs-form { grid-template-columns: 1fr 1fr; }
  .skyex-form .bs-form > p,
  .skyex-form .bs-form > button,
  .skyex-form .bs-form__alan--mesaj,
  .skyex-form .bs-form__alan--konu { grid-column: 1 / -1; }
}
.skyex-form .bs-form label { font-size: 0.78rem; color: var(--s-govde); }
.skyex-form .bs-form input,
.skyex-form .bs-form select,
.skyex-form .bs-form textarea {
  border-radius: 0;
  border: 1px solid var(--s-cizgi);
  background: var(--s-acik);
  font-size: 0.9rem;
  color: var(--s-murekkep);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: border-color .2s, background-color .2s;
}
.skyex-form .bs-form input:focus,
.skyex-form .bs-form select:focus,
.skyex-form .bs-form textarea:focus { outline: none; border-color: var(--s-mavi); background: var(--s-beyaz); }
.skyex-form .bs-form button { justify-self: stretch; min-height: 3.25rem; }
.skyex-form .bs-form__aydinlatma { color: var(--s-soluk); }
.skyex-form .bs-form__aydinlatma a { text-decoration: underline; text-underline-offset: 2px; }
.skyex-form .bs-form__sonuc { background: var(--s-mavi-soluk); color: var(--s-mavi-koyu); border-radius: 0; }