/*
  Tuva Enerji — Tasarım Sistemi
  Bu dosya yalnızca değişkenleri, sıfırlamayı, tipografiyi ve tekrar
  kullanılabilir bileşenleri içerir. Sayfa düzeni burada yazılmaz.
  Ortak marka/renk/font tokenları assets/css/tokenlar.css'te — tek kaynak.
*/

@import url('tokenlar.css');

/* ---------------------------------------------------------------
   Kök Değişkenler — yalnızca bu dosyaya özgü olanlar
--------------------------------------------------------------- */

:root {
  /* Orta zemin (yalnızca style.css'te kullanılır) */
  --zemin-orta:      #0F3D6E;

  /* Çizgi — tokenlar.css'teki rgba ayraçlardan farklı, düz renk */
  --cizgi:           #D9E0E7;
  --cizgi-koyu:      #1D4E7F;   /* koyu zemin üstü ayraç */

  /* Boşluk ritmi — 4px tabanlı ölçek */
  --bosluk-1:        4px;
  --bosluk-2:        8px;
  --bosluk-3:        16px;
  --bosluk-4:        24px;
  --bosluk-5:        40px;
  --bosluk-6:        64px;

  /* Header */
  --header-yukseklik: 76px;
  --zemin-koyu-koyu:  #071D36;  /* kaydırılmış header için bir ton koyu */
}

/* ---------------------------------------------------------------
   Sıfırlama
--------------------------------------------------------------- */

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

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

/* Klavye ile gezinen kullanıcı için her zaman görünür odak halkası */
:focus-visible {
  outline: 2px solid var(--mavi);
  outline-offset: 2px;
}

::selection {
  background: var(--lacivert);
  color: var(--metin-ters);
}

/* ---------------------------------------------------------------
   Tipografi
--------------------------------------------------------------- */

html {
  font-size: 100%;
}

body {
  font-family: var(--font-metin);
  font-size: 1.0625rem; /* 17px taban */
  line-height: 1.65;
  color: var(--metin);
  background: var(--zemin-beyaz);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-baslik);
  color: inherit;
}

h1 {
  font-size: clamp(2rem, 1.6rem + 2vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--bosluk-3);
}

h2 {
  font-size: clamp(1.625rem, 1.35rem + 1.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--bosluk-3);
}

h3 {
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  margin-bottom: var(--bosluk-3);
}

h4 {
  font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  margin-bottom: var(--bosluk-3);
}

h5 {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin-bottom: var(--bosluk-3);
}

h6 {
  font-size: clamp(0.875rem, 0.85rem + 0.15vw, 1rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin-bottom: var(--bosluk-3);
}

p {
  max-width: 68ch;
  margin-bottom: var(--bosluk-4);
}

/* Bölüm başlığı üstünde kullanılan küçük, geniş harf aralıklı üst başlık */
.ust-baslik {
  display: block;
  font-family: var(--font-metin);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--metin-soluk);
  margin-bottom: var(--bosluk-2);
}

.bolum--koyu .ust-baslik {
  color: var(--metin-ters);
  opacity: 0.65;
}

/* Gövdeden büyük, daha açık satır aralığına sahip giriş metni */
.giris-metni {
  font-size: 1.3125rem; /* 21px */
  line-height: 1.75;
  max-width: 68ch;
  margin-bottom: var(--bosluk-4);
}

/* Ölçü ve teknik değerler için monospace metin */
.olcu {
  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.9em;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------
   Bileşen: Buton
--------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  height: 48px;
  padding-inline: 2rem;
  border: 1px solid transparent;
  border-radius: var(--kose);
  font-family: var(--font-baslik);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--gecis), border-color var(--gecis), color var(--gecis), transform var(--gecis);
}

/* Birincil: dolgulu, diğerlerinden belirgin ayrışır */
.btn--birincil {
  background: var(--lacivert);
  border-color: var(--lacivert);
  color: var(--zemin-beyaz);
}

.btn--birincil:hover {
  background: var(--mavi);
  border-color: var(--mavi);
  transform: translateY(-1px);
}

/* Çerçeveli: ince kenarlıklı, dolgusuz */
.btn--cerceve {
  background: transparent;
  border-color: var(--cizgi);
  color: var(--metin);
}

.btn--cerceve:hover {
  border-color: var(--mavi);
  color: var(--mavi);
  transform: translateY(-1px);
}

/* İkincil: kutu değil, alt çizgili metin bağlantısı */
.btn--ikincil {
  height: auto;
  padding-inline: 0;
  border: none;
  border-radius: 0;
  position: relative;
  background: none;
  color: var(--lacivert);
}

.btn--ikincil::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform var(--gecis);
}

.btn--ikincil:hover {
  color: var(--mavi);
}

.btn--ikincil:hover::after {
  transform: scaleX(1);
}

.bolum--koyu .btn--cerceve {
  border-color: var(--cizgi-koyu);
  color: var(--metin-ters);
}

.bolum--koyu .btn--cerceve:hover {
  border-color: var(--mavi);
  color: var(--mavi);
}

.bolum--koyu .btn--ikincil {
  color: var(--metin-ters);
}

.bolum--koyu .btn--ikincil:hover {
  color: var(--mavi);
}

/* ---------------------------------------------------------------
   Bileşen: Kart
--------------------------------------------------------------- */

.kart {
  padding: var(--bosluk-5);
  background: var(--zemin-beyaz);
  border-radius: var(--kose);
}

a.kart {
  display: block;
  color: inherit;
  transition: transform var(--gecis);
}

a.kart:hover {
  transform: translateY(-2px);
}

.bolum--koyu .kart {
  background: var(--zemin-orta);
  color: var(--metin-ters);
}

.kart-cta {
  display: flex;
  align-items: center;
  gap: var(--bosluk-2);
  margin-top: var(--bosluk-4);
  padding-top: var(--bosluk-3);
  border-top: 1px solid var(--ayrac-acik);
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--mavi);
}

.kart-cta-ok {
  transition: transform var(--gecis);
}

a.kart:hover .kart-cta-ok {
  transform: translateX(4px);
}

.bolum--koyu .kart-cta {
  border-top-color: var(--ayrac-koyu);
  color: var(--metin-ters);
}

/* Fotoğraf arka planlı kart: düz koyulaştırma ile (gradyan değil), metin her zaman üstte okunur */
.kart.kart--foto {
  position: relative;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--metin-ters);
  background-color: var(--zemin-orta);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.kart--foto::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 42, 77, 0.72);
  transition: background-color var(--gecis);
}

a.kart--foto:hover::before {
  background: rgba(10, 42, 77, 0.5);
}

.kart--foto h3,
.kart--foto .kart-cta {
  position: relative;
  z-index: 1;
}

.kart--foto .kart-cta {
  border-top-color: rgba(255, 255, 255, 0.3);
  color: var(--metin-ters);
}

/* Alt hizmet kartı: hizmet.php'de ana hizmetin alt başlıklarını listeler.
   Fotoğraf arka plan DEĞİL — üstte ayrı 16:9 görsel alanı, altında düz
   zeminde başlık/özet. Kartlar grid ile daima yan yana durur. */
.alt-hizmet-izgara {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--bosluk-3);
  margin-top: var(--bosluk-4);
}
.alt-hizmet-izgara--uc { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) {
  .alt-hizmet-izgara,
  .alt-hizmet-izgara--uc { grid-template-columns: 1fr; }
}
.alt-hizmet-kart {
  display: flex;
  flex-direction: column;
  background: var(--zemin-beyaz);
  border: 1px solid var(--ayrac-acik);
  transition: border-color var(--gecis);
}
.alt-hizmet-kart:hover { border-color: var(--mavi); }
.alt-hizmet-kart__gorsel { aspect-ratio: 16 / 9; overflow: hidden; }
.alt-hizmet-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.alt-hizmet-kart__govde {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--bosluk-3);
  flex: 1;
}
.alt-hizmet-kart__govde h3 { font-size: 0.9375rem; margin-bottom: 0; color: var(--metin); }
.alt-hizmet-kart__govde .kart-cta { font-size: 0.8125rem; margin-top: var(--bosluk-2); padding-top: var(--bosluk-2); }
.alt-hizmet-kart__ozet {
  font-size: 0.8125rem;
  color: var(--metin-soluk);
  margin-bottom: 0;
  flex: 1;
}

/* ---------------------------------------------------------------
   Bileşen: Form Alanı
--------------------------------------------------------------- */

.form-alan {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-2);
  margin-bottom: var(--bosluk-4);
}

.form-alan label {
  font-family: var(--font-metin);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--metin);
}

.form-alan input,
.form-alan textarea,
.form-alan select {
  padding: 0.65em 0.85em;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  background: var(--zemin-beyaz);
  color: var(--metin);
  transition: border-color var(--gecis);
}

.form-alan textarea {
  resize: vertical;
  min-height: 8rem;
}

.form-alan input:hover,
.form-alan textarea:hover,
.form-alan select:hover {
  border-color: var(--metin-soluk);
}

.form-alan small {
  font-size: 0.8125rem;
  color: var(--metin-soluk);
}

.form-alan--hata label {
  color: var(--uyari);
}

.form-alan--hata input,
.form-alan--hata textarea,
.form-alan--hata select {
  border-color: var(--uyari);
}

.form-alan--hata small {
  color: var(--uyari);
}

.bolum--koyu .form-alan label {
  color: var(--metin-ters);
}

.bolum--koyu .form-alan input,
.bolum--koyu .form-alan textarea,
.bolum--koyu .form-alan select {
  background: var(--zemin-orta);
  border-color: var(--cizgi-koyu);
  color: var(--metin-ters);
}

.form-mesaj {
  padding: var(--bosluk-3);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  margin-bottom: var(--bosluk-4);
  font-size: 0.9375rem;
}
.form-mesaj--basari { border-color: var(--yesil); color: var(--lacivert); }
.form-mesaj--hata { border-color: var(--uyari); color: var(--uyari); }
.bolum--koyu .form-mesaj--basari,
.bolum--koyu .form-mesaj--hata { color: var(--metin-ters); }

.form-onay {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-2);
  margin-bottom: var(--bosluk-4);
  font-size: 0.875rem;
  color: var(--metin-soluk);
}
.form-onay input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1px solid var(--cizgi);
  accent-color: var(--mavi);
}
.form-onay a { color: inherit; text-decoration: underline; }
.bolum--koyu .form-onay { color: var(--metin-ters); opacity: 0.85; }
.bolum--koyu .form-onay a { color: var(--metin-ters); }

/* Bal küpü — yalnızca botlar görsün diye ekrandan tamamen çıkarılır */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------
   Bileşen: Önizleme Şeridi — eticaret_aktif=0 iken panel oturumu
   açık kullanıcılara ürün sayfalarının üstünde gösterilir
--------------------------------------------------------------- */
.onizleme-serit {
  position: sticky;
  top: 0;
  z-index: 200;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--uyari);
  color: #fff;
  font-family: var(--font-metin);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  padding-inline: var(--bosluk-3);
}
body.onizleme-aktif .site-header { top: 40px; }

/* ---------------------------------------------------------------
   Bileşen: Etiket
--------------------------------------------------------------- */

.etiket {
  display: inline-block;
  padding: 0.25em 0.75em;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  font-family: var(--font-metin);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--metin-soluk);
}

/* İzin verilen üç yeşil kullanımından biri: aktif durum göstergesi */
.etiket--aktif {
  border-color: var(--yesil);
  color: var(--yesil);
}

.etiket--uyari {
  border-color: var(--uyari);
  color: var(--uyari);
}

.bolum--koyu .etiket,
.site-header .etiket {
  border-color: var(--cizgi-koyu);
  color: var(--metin-ters);
}

.bolum--koyu .etiket--aktif {
  border-color: var(--yesil);
  color: var(--yesil);
}

/* ---------------------------------------------------------------
   Bileşen: Bölüm
--------------------------------------------------------------- */

.bolum {
  padding-block: var(--bosluk-6);
}

.bolum--koyu {
  background: var(--zemin-koyu);
  color: var(--metin-ters);
}

.bolum--acik {
  background: var(--zemin-acik);
  color: var(--metin);
}

@media (min-width: 768px) {
  .bolum {
    padding-block: calc(var(--bosluk-6) * 1.5);
  }
}

/* ---------------------------------------------------------------
   Bileşen: Kapsayıcı
--------------------------------------------------------------- */

.kapsayici {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--bosluk-4);
}

@media (min-width: 768px) {
  .kapsayici {
    padding-inline: var(--bosluk-5);
  }
}

/* ---------------------------------------------------------------
   Bileşen: Breadcrumb
--------------------------------------------------------------- */

.breadcrumb {
  font-family: var(--font-metin);
  font-size: 0.875rem;
  color: var(--metin-soluk);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-inline: 0.5em;
  color: var(--cizgi);
}

.breadcrumb a {
  color: var(--metin-soluk);
  transition: color var(--gecis);
}

.breadcrumb a:hover {
  color: var(--mavi);
}

.breadcrumb li:last-child {
  color: var(--metin);
  font-weight: 600;
}

/* Koyu zeminde bağlantılar soluk, güncel sayfa tam opaklıkta okunur kalır */
.bolum--koyu .breadcrumb,
.bolum--koyu .breadcrumb a {
  color: var(--metin-ters);
  opacity: 0.65;
}

.bolum--koyu .breadcrumb a:hover {
  color: var(--mavi);
  opacity: 1;
}

.bolum--koyu .breadcrumb li:last-child {
  color: var(--metin-ters);
  opacity: 1;
}

.bolum--koyu .breadcrumb li:not(:last-child)::after {
  color: var(--metin-ters);
  opacity: 0.35;
}

/* ---------------------------------------------------------------
   Bileşen: Akordiyon
--------------------------------------------------------------- */

.akordiyon {
  border-top: 1px solid var(--ayrac-acik);
}

.akordiyon details {
  border-bottom: 1px solid var(--ayrac-acik);
}

.akordiyon summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: var(--bosluk-3);
  font-family: var(--font-baslik);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color var(--gecis);
}

.akordiyon summary:hover {
  color: var(--mavi);
}

.akordiyon summary::-webkit-details-marker {
  display: none;
}

.akordiyon summary::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--font-baslik);
  font-weight: 600;
  color: var(--mavi);
}

.akordiyon details[open] summary::after {
  content: '\2212';
}

.akordiyon details > div,
.akordiyon details > p {
  padding-bottom: var(--bosluk-3);
  color: var(--metin-soluk);
}

.bolum--koyu .akordiyon {
  border-color: var(--ayrac-koyu);
}

.bolum--koyu .akordiyon details {
  border-color: var(--ayrac-koyu);
}

.bolum--koyu .akordiyon details > div,
.bolum--koyu .akordiyon details > p {
  color: var(--metin-ters);
}

/* ---------------------------------------------------------------
   Bileşen: Bölüm Genişlik Ölçeği ve Düzenleri
   Hizmet detay sayfalarında (hizmet.php) her bölüm kendi konusuna
   göre farklı genişlik ve sütun sayısı kullanır — tek bir dar
   sütuna sıkışmaz. Üç kapsayıcı genişliği ve bunları kullanan
   düzen sınıfları burada tanımlanır.
--------------------------------------------------------------- */

:root {
  /* Header'ın kendi kapsayıcısıyla (.kapsayici, 1200px) birebir aynı —
     aksi halde geniş ekranlarda logo ile sayfa gövdesi hizasız kalır. */
  --genislik-genis: 1200px;
}

.bolum--beyaz { background: var(--zemin-beyaz); color: var(--metin); }

/* Orta tonlu (lacivert) zemin — koyu (hero/CTA) ile beyaz gövde arasında bir
   ara nota, sayfada tek renk tonuna sıkışmamak için */
.bolum--orta { background: var(--zemin-orta); color: var(--metin-ters); }
.bolum--orta .ust-baslik { color: var(--metin-ters); opacity: 0.65; }

/* Tek hizalama çıpası: sayfadaki HER bölüm (hero, gövde, listeler, SSS, CTA)
   bu kapsayıcının içine girer. */
.hizmet-govde {
  max-width: var(--genislik-genis);
  margin-inline: auto;
  padding-inline: var(--bosluk-4);
}
@media (min-width: 768px) {
  .hizmet-govde { padding-inline: var(--bosluk-5); }
}

/* Bölüm üstü boşluk kademeleri — sayfanın dikey ritmi buradan yönetilir. */
.icerik-bolum { padding-bottom: var(--bosluk-4); scroll-margin-top: 100px; }
.icerik-bolum--devam         { padding-top: var(--bosluk-3); }
.icerik-bolum--yeni-konu     { padding-top: var(--bosluk-5); }
.icerik-bolum--zemin-degisti { padding-top: var(--bosluk-6); }
@media (min-width: 768px) {
  .icerik-bolum--yeni-konu     { padding-top: calc(var(--bosluk-6) * 0.9); }
  .icerik-bolum--zemin-degisti { padding-top: calc(var(--bosluk-6) * 1.15); }
}

/* Kapsam listeleri, tablolar, kart ızgaraları, çok
   sütunlu bloklar. Ayrı bir tavan koymaz — .hizmet-govde'nin (1200px)
   tamamını kullanır. */

.kapsam-liste {
  border-top: 1px solid var(--ayrac-acik);
  margin-top: var(--bosluk-3);
  columns: 1;
}
.kapsam-liste li {
  padding-block: var(--bosluk-3);
  padding-left: var(--bosluk-4);
  position: relative;
  border-bottom: 1px solid var(--ayrac-acik);
  break-inside: avoid;
}
.kapsam-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.35em;
  width: 8px;
  height: 8px;
  background: var(--mavi);
  border-radius: var(--kose);
}
@media (min-width: 600px) {
  .kapsam-liste--iki { columns: 2; column-gap: var(--bosluk-5); }
  .kapsam-liste--uc  { columns: 2; column-gap: var(--bosluk-5); }
}
@media (min-width: 900px) {
  .kapsam-liste--uc { columns: 3; }
}

/* Standartlar: standart numarası öne çıkan üç sütunlu ızgara */
.standart-izgara {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bosluk-5);
  border-top: 1px solid var(--ayrac-acik);
  padding-top: var(--bosluk-5);
  margin-top: var(--bosluk-3);
}
@media (min-width: 600px) { .standart-izgara { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .standart-izgara { grid-template-columns: 1fr 1fr 1fr; } }
.standart-oge { border-left: 2px solid var(--mavi); padding-left: var(--bosluk-3); }
.standart-oge .olcu {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--lacivert);
  margin-bottom: 4px;
}
.standart-oge span:last-child { display: block; font-size: 0.9375rem; color: var(--metin-soluk); }
.bolum--koyu .standart-oge span:last-child { color: var(--metin-ters); opacity: 0.75; }

/* Yatay şerit — teknik veriler ve süreç adımları için.
   .hizmet-govde'nin tam genişliğini kullanır, ayrı bir sınır koymaz. */
.serit {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--ayrac-acik);
  margin-top: var(--bosluk-3);
}
.serit > * {
  padding-block: var(--bosluk-4);
  border-bottom: 1px solid var(--ayrac-acik);
}
@media (min-width: 700px) {
  .serit {
    grid-template-columns: repeat(var(--serit-sutun, 3), 1fr);
    border-top: none;
    border-bottom: 1px solid var(--ayrac-acik);
  }
  .serit > * {
    border-bottom: none;
    border-left: 1px solid var(--ayrac-acik);
    padding: var(--bosluk-4);
  }
  .serit > *:first-child { border-left: none; padding-left: 0; }
}
.serit-hucre { display: flex; flex-direction: column; gap: 6px; }
.serit-etiket {
  font-size: 0.8125rem;
  color: var(--metin-soluk);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.serit-deger { font-size: 1.125rem; font-weight: 700; font-family: var(--font-baslik); }
.serit-adim .olcu { color: var(--mavi); font-weight: 600; }
.serit-adim h4 { font-size: 1.0625rem; margin-bottom: 4px; margin-top: 6px; }
.serit-adim p { font-size: 0.9375rem; color: var(--metin-soluk); margin-bottom: 0; max-width: 32ch; }

/* ---------------------------------------------------------------
   Yardımcı Sınıflar
--------------------------------------------------------------- */

.metin-sol   { text-align: left; }
.metin-orta  { text-align: center; }
.metin-sag   { text-align: right; }

.dikey-bosluk-kucuk { margin-block: var(--bosluk-3); }
.dikey-bosluk-orta  { margin-block: var(--bosluk-5); }
.dikey-bosluk-buyuk { margin-block: var(--bosluk-6); }

/* İzin verilen üç yeşil kullanımından biri: rakam vurgusu */
.sayi-vurgu {
  font-family: var(--font-baslik);
  font-weight: 700;
  color: var(--yesil);
}

/* Görsel olarak gizli, ekran okuyucu için erişilebilir */
.gizli-erisim {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------
   Header
--------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-yukseklik);
  background: var(--zemin-koyu);
  color: var(--metin-ters);
  transition: background-color var(--gecis);
}

.site-header--kaydirildi {
  background: var(--zemin-koyu-koyu);
}

.site-header__izgara {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--bosluk-4);
  height: 100%;
}

.site-header__logo { display: flex; align-items: center; }
.site-header__logo img { display: block; height: 36px; width: auto; }

.site-header__menu {
  display: none;
  min-width: 0;
}

.site-header__menu > ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--bosluk-5);
}

.site-header__acilir-oge { position: static; }

.site-header__menu a {
  display: inline-block;
  padding-block: var(--bosluk-2);
  font-family: var(--font-metin);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--metin-ters);
  border-bottom: 2px solid transparent;
  transition: color var(--gecis), border-color var(--gecis);
}

.site-header__menu a:hover,
.site-header__menu a.site-header__aktif {
  color: var(--zemin-beyaz);
  border-bottom-color: var(--mavi);
}

/* Viewport'a göre sabitlenir, li/nav içindeki konumlandırma bağlamlarından
   bağımsız olarak her zaman tam genişlikte açılır */
.site-header__acilir-panel {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-yukseklik);
  overflow-x: hidden;
  background: var(--zemin-orta);
  border-top: 1px solid var(--ayrac-koyu);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--gecis), visibility var(--gecis);
}

.site-header__acilir-oge:hover .site-header__acilir-panel,
.site-header__acilir-oge:focus-within .site-header__acilir-panel {
  visibility: visible;
  opacity: 1;
}

.site-header__acilir-panel .kapsayici { padding-block: var(--bosluk-5); }

.site-header__hizmet-listesi {
  columns: 2;
  column-gap: var(--bosluk-6);
}

.site-header__hizmet-listesi li {
  break-inside: avoid;
  margin-bottom: var(--bosluk-4);
  padding-left: var(--bosluk-3);
  border-left: 2px solid transparent;
}

/* İzin verilen üç yeşil kullanımından biri: ihracat/ithalat vurgusu */
.site-header__hizmet-listesi li.site-header__oncelikli-hizmet {
  border-left-color: var(--yesil);
}

.site-header__hizmet-listesi a { display: block; }

.site-header__hizmet-baslik {
  display: block;
  font-family: var(--font-baslik);
  font-weight: 600;
  color: var(--metin-ters);
  margin-bottom: 2px;
  transition: color var(--gecis);
}

.site-header__hizmet-listesi a:hover .site-header__hizmet-baslik { color: var(--mavi); }

.site-header__hizmet-ozet {
  display: block;
  font-size: 0.875rem;
  color: var(--metin-ters);
  opacity: 0.65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-header__sag {
  display: flex;
  align-items: center;
  gap: var(--bosluk-4);
  justify-self: end;
}

.site-header__telefon {
  display: none;
  align-items: center;
  gap: var(--bosluk-2);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--metin-ters);
  transition: color var(--gecis);
}

.site-header__telefon:hover { color: var(--mavi); }

/* Header koyu zeminde .btn--cerceve varsayılanı yerine kendi karşıtlığını tanımlar */
.site-header .btn--cerceve {
  border-color: var(--cizgi-koyu);
  color: var(--metin-ters);
}

.site-header .btn--cerceve:hover {
  border-color: var(--mavi);
  color: var(--mavi);
}

.site-header__teklif-btn {
  display: none;
  height: 40px;
  padding-inline: var(--bosluk-4);
}

.site-header__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

.site-header__hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--metin-ters);
}

.site-header__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.site-header__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.site-header__mobil-menu {
  position: fixed;
  top: var(--header-yukseklik);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--zemin-koyu);
  overflow-y: auto;
  z-index: 90;
}

.site-header__mobil-menu .kapsayici { padding-block: var(--bosluk-5); }

.site-header__mobil-liste > li { border-bottom: 1px solid var(--ayrac-koyu); }

.site-header__mobil-liste > li > a {
  display: block;
  padding-block: var(--bosluk-4);
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--metin-ters);
}

.site-header__mobil-liste .akordiyon { border-top: none; }
.site-header__mobil-liste .akordiyon details { border-bottom: none; }
.site-header__mobil-liste .akordiyon summary {
  padding-block: var(--bosluk-4);
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--metin-ters);
}

.site-header__mobil-hizmet-listesi { padding-bottom: var(--bosluk-3); }
.site-header__mobil-hizmet-listesi li { padding-block: var(--bosluk-2); }
.site-header__mobil-hizmet-listesi a { color: var(--metin-ters); opacity: 0.8; }

.site-header__mobil-alt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bosluk-4);
  padding-top: var(--bosluk-5);
  margin-top: var(--bosluk-4);
  border-top: 1px solid var(--ayrac-koyu);
}

@media (min-width: 1100px) {
  .site-header__menu { display: block; }
  .site-header__telefon { display: inline-flex; }
  .site-header__teklif-btn { display: inline-flex; }
  .site-header__hamburger { display: none; }
  .site-header__mobil-menu { display: none !important; }
}

/* ---------------------------------------------------------------
   Footer
--------------------------------------------------------------- */

.site-footer {
  background: var(--zemin-koyu);
  color: var(--metin-ters);
  padding-block: var(--bosluk-6);
}

.site-footer__izgara {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bosluk-6);
}

.site-footer__izgara > * { min-width: 0; }

.site-footer__sutun h2 {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--bosluk-3);
  color: var(--metin-ters);
}

.site-footer__sutun p {
  color: var(--metin-ters);
  opacity: 0.75;
  font-size: 0.9375rem;
  margin-bottom: var(--bosluk-3);
  max-width: none;
}

.site-footer__sutun ul {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-2);
}

.site-footer__sutun a {
  color: var(--metin-ters);
  opacity: 0.75;
  font-size: 0.9375rem;
  transition: opacity var(--gecis), color var(--gecis);
}

.site-footer__sutun a:hover { opacity: 1; color: var(--mavi); }

.site-footer__iletisim {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-3);
}

.site-footer__iletisim dd {
  color: var(--metin-ters);
  opacity: 0.75;
  font-size: 0.9375rem;
  overflow-wrap: break-word;
}

.site-footer__iletisim dd a { opacity: 1; }

.site-footer__iletisim-satir {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-2);
}

.site-footer__iletisim-ikon {
  flex-shrink: 0;
  margin-top: 0.2em;
  color: var(--metin-ters);
  opacity: 0.6;
}

.site-footer__alt {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-3);
  margin-top: var(--bosluk-6);
  padding-top: var(--bosluk-4);
  border-top: 1px solid var(--ayrac-koyu);
  font-size: 0.875rem;
  color: var(--metin-ters);
}

.site-footer__alt p { opacity: 0.65; margin-bottom: 0; }

.site-footer__yasal {
  display: flex;
  gap: var(--bosluk-4);
  flex-wrap: wrap;
}

.site-footer__yasal a {
  color: var(--metin-ters);
  opacity: 0.65;
  transition: opacity var(--gecis);
}

.site-footer__yasal a:hover { opacity: 1; }

.site-footer__telif {
  display: flex;
  align-items: center;
  gap: var(--bosluk-4);
  flex-wrap: wrap;
}

.site-footer__imza {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-2);
  padding-left: var(--bosluk-4);
  border-left: 1px solid var(--ayrac-koyu);
  color: var(--metin-ters);
  opacity: 0.65;
  font-size: 0.875rem;
  transition: opacity var(--gecis);
}

.site-footer__imza:hover { opacity: 1; }

.site-footer__imza img,
.site-footer__imza svg {
  height: 16px;
  width: auto;
  /* Koyu renkli ikonu koyu zemin üstünde okunur kılmak için beyaza çevir */
  filter: brightness(0) invert(1);
}

@media (min-width: 700px) {
  .site-footer__alt {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

@media (min-width: 900px) {
  .site-footer__izgara { grid-template-columns: repeat(4, 1fr); gap: var(--bosluk-5); }
  .site-footer__sutun { padding-left: var(--bosluk-5); border-left: 1px solid var(--ayrac-koyu); }
  .site-footer__sutun:first-child { padding-left: 0; border-left: none; }
}

/* ---------------------------------------------------------------
   Bileşen: Hızlı Erişim (WhatsApp / Telefon) — her sayfada sağ altta sabit
---------------------------------------------------------------- */
.hizli-erisim {
  position: fixed;
  right: var(--bosluk-4);
  bottom: var(--bosluk-4);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-2);
}

.hizli-erisim__buton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--lacivert);
  color: var(--zemin-beyaz);
  border-radius: var(--kose);
  transition: background-color var(--gecis), transform var(--gecis);
}

.hizli-erisim__buton:hover {
  background: var(--mavi);
  transform: translateY(-1px);
}

@media (min-width: 700px) {
  .hizli-erisim {
    right: var(--bosluk-5);
    bottom: var(--bosluk-5);
  }
}