/* =========================================================
   base.css — Tüm sayfaların ortak kullandığı stiller
   (renk değişkenleri, tipografi, container, butonlar,
   küçük ortak bileşenler). Sayfaya özel stiller kendi
   dosyasındadır: anasayfa.css, panelde-ne-var.css ...
   ========================================================= */

/* ---------- 0. Yazı tipi: Poppins (sunucumuzdan yüklenir) ----------
   Daha önce Google Fonts'tan geliyordu; bu, sayfa açılırken 2 ayrı sunucuya
   (fonts.googleapis.com + fonts.gstatic.com) bağlanmayı gerektiriyordu.
   Artık dosyalar assets/fonts/ klasöründe. font-display: swap → yazı tipi
   gelene kadar metin yedek yazı tipiyle hemen görünür.
   'latin' dosyası temel harfleri, 'latin-ext' dosyası ğ, ş, İ, ı gibi Türkçe
   harfleri içerir; tarayıcı unicode-range sayesinde sadece gerekeni indirir. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/poppins-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/poppins-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/poppins-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/poppins-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/poppins-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/poppins-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/poppins-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/poppins-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* Poppins yüklenene kadar kullanılan, ölçüleri Poppins'e ayarlanmış yedek yazı tipi.
   Yazı tipi değiştiğinde metnin kayıp sayfayı oynatmasını (CLS) azaltır. */
@font-face { font-family: 'Poppins Fallback'; src: local('Arial'); size-adjust: 112.16%; ascent-override: 93.62%; descent-override: 31.21%; line-gap-override: 8.92%; }

/* ---------- 1. Tasarım değişkenleri (Figma renkleri) ---------- */
:root {
  --navy-500: #1A2A39;   /* Lacivert/lacivert-500 — ana metin ve koyu zemin */
  --navy-400: #243646;   /* koyu zemin üstündeki kartlar */
  --navy-300: #2C3D4D;   /* koyu zemin üstündeki çizgiler */
  --teal-500: #00B8A9;   /* ana vurgu rengi */
  --teal-700: #007A70;   /* açık zemin üstündeki teal yazılar */
  --teal-300: #4ED1C7;   /* hero büyük başlık */
  --teal-100: #E0F6F4;   /* teal rozet zemini */
  --coral-500: #FF8A4C;  /* Coral — kampanya / uyarı */
  --coral-700: #B04E17;  /* coral yazı */
  --coral-100: #FFEEE4;  /* coral rozet zemini */
  --gray-700: #4A5B6B;   /* paragraf metni */
  --gray-600: #5A6B7B;   /* ikincil metin */
  --gray-400: #B9C4CE;   /* koyu zemin üstünde ikincil metin */
  --gray-350: #C4CFD8;   /* buton / input kenarlığı */
  --gray-300: #D5DCE2;   /* koyu zemin üstünde paragraf */
  --gray-200: #E3E8EC;   /* kart kenarlığı */
  --gray-150: #EEF1F4;   /* satır ayırıcı, nötr rozet */
  --gray-100: #F4F6F8;   /* gri bölüm zemini */
  --gray-50:  #F8FAFC;   /* açık kart zemini */

  --site-width: 1240px;  /* İçerik genişliği: 1920px ekranda soldan ve sağdan 340px boşluk kalır */
  --site-gutter: 24px;   /* Dar ekranlarda içeriğin kenara yapışmaması için iç boşluk */

  /* Bootstrap'in varsayılanlarını tasarıma göre eziyoruz */
  --bs-body-font-family: 'Poppins', 'Poppins Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-color: var(--navy-500);
  --bs-body-bg: #FFFFFF;
  --bs-link-color-rgb: 0, 122, 112;
  --bs-link-hover-color-rgb: 0, 96, 88;
}

/* ---------- 2. Genel ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  font-family: var(--bs-body-font-family);
  color: var(--navy-500);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { text-decoration: none; }
img, video { max-width: 100%; }
h1, h2, h3, p { margin: 0; }

/* =========================================================
   HİZA KURALI — bütün sayfalarda aynı
   İçerik her zaman 1240px genişliğinde ve ortada durur.
   1920px ekranda: (1920 - 1240) / 2 = soldan ve sağdan 340px.
   Ekran 1288px'ten genişse iç boşluk 0'dır, böylece header, sayfa
   içeriği ve footer aynı çizgiden başlar. Daha dar ekranlarda
   kenara yapışmasın diye 24px iç boşluk verilir.
   .container-site ve .container-flush artık birebir aynı davranır.
   ========================================================= */
@media (min-width: 1288px) {
  :root { --site-gutter: 0px; }
}

.container-site {
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

.container-flush {
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

/* ---------- 3. Bölüm başlıkları ---------- */
.section { padding-block: 104px; }
.section--gray { background: var(--gray-100); }
.section--navy { background: var(--navy-500); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 48px;
  margin-bottom: 40px;
}
.section-head__text { max-width: 680px; }

.eyebrow {
  display: block;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  color: var(--teal-700);
  margin-bottom: 14px;
}
.section--navy .eyebrow { color: var(--teal-500); }

.section-title {
  font-weight: 600;
  font-size: 48px;
  line-height: 54px;
  letter-spacing: -1.2px;
  color: var(--navy-500);
}
.section--navy .section-title { color: #FFFFFF; }

.section-lead {
  font-size: 17px;
  line-height: 27px;
  color: var(--gray-700);
}
.section--navy .section-lead { color: var(--gray-300); }

/* ---------- 4. Butonlar (Bootstrap .btn üzerine) ---------- */
.btn {
  --bs-btn-font-family: inherit;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
  --bs-btn-font-size: 15px;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: 22px;
  --bs-btn-border-radius: 12px;
  --bs-btn-padding-x: 18px;
  --bs-btn-padding-y: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  white-space: nowrap;
}

/* Ana buton: normalde BEYAZ, fare üzerine gelince TURKUAZ olur.
   (Tasarım kuralı: yan yana iki buton varsa ikisi de beyaz durur,
   hangisinin üzerine gelinirse o turkuaza döner.) */
.btn-teal {
  --bs-btn-color: var(--navy-500);
  --bs-btn-bg: #FFFFFF;
  --bs-btn-border-color: var(--gray-350);
  --bs-btn-border-width: 1.5px;
  --bs-btn-hover-color: var(--navy-500);
  --bs-btn-hover-bg: var(--teal-500);
  --bs-btn-hover-border-color: var(--teal-500);
  --bs-btn-active-color: var(--navy-500);
  --bs-btn-active-bg: #00A598;
  --bs-btn-active-border-color: #00A598;
  --bs-btn-focus-shadow-rgb: 0, 184, 169;
}

.btn-navy {
  --bs-btn-color: #FFFFFF;
  --bs-btn-bg: var(--navy-500);
  --bs-btn-border-color: var(--navy-500);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: var(--navy-400);
  --bs-btn-hover-border-color: var(--navy-400);
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: var(--navy-300);
  --bs-btn-active-border-color: var(--navy-300);
  --bs-btn-font-weight: 500;
}

/* İkincil buton: o da normalde beyaz, üzerine gelince turkuaz */
.btn-soft {
  --bs-btn-color: var(--navy-500);
  --bs-btn-bg: #FFFFFF;
  --bs-btn-border-color: var(--gray-350);
  --bs-btn-hover-color: var(--navy-500);
  --bs-btn-hover-bg: var(--teal-500);
  --bs-btn-hover-border-color: var(--teal-500);
  --bs-btn-active-color: var(--navy-500);
  --bs-btn-active-bg: #00A598;
  --bs-btn-active-border-color: #00A598;
  --bs-btn-font-weight: 500;
}
.btn-soft--white { --bs-btn-bg: #FFFFFF; }

.btn-lg-site { height: 56px; --bs-btn-font-size: 16px; --bs-btn-line-height: 24px; --bs-btn-border-radius: 14px; --bs-btn-padding-x: 28px; }
.btn-md-site { height: 52px; --bs-btn-border-radius: 14px; }
.btn-sm-site { height: 44px; }

/* Metin linki: "… inceleyin →" */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  color: var(--teal-700);
}
.link-arrow:hover { color: var(--teal-500); }
.section--navy .link-arrow { color: var(--teal-500); }
.section--navy .link-arrow:hover { color: var(--teal-300); }

/* ---------- 5. Küçük ortak bileşenler ---------- */

/* Beyaz etiket: B2C, B2B, Pazaryeri ... */
.tag {
  display: inline-block;
  padding: 6px 12px;
  background: #FFFFFF;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0.3px;
  color: var(--navy-500);
}

/* Durum rozetleri: Gönderilmedi, Kargoda, Bağlı ... */
.status {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  color: var(--navy-500);
  white-space: nowrap;
}
.status--coral { background: var(--coral-100); }
.status--gray  { background: var(--gray-150); }
.status--teal  { background: var(--teal-100); }

/* Yuvarlak nokta */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--teal-500); flex: none; }
.dot--coral { background: var(--coral-500); }

/* Tik işaretli liste. Tik, CSS mask ile çizildiği için rengi
   --check-color değişkeniyle değiştirilebilir. */
.check-list {
  --check-color: var(--teal-700);
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.check-list li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 22px;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  background: var(--check-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M3.75 9.75l3 3 7.5-7.5' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M3.75 9.75l3 3 7.5-7.5' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Partial yüklenemezse gösterilen uyarı (bkz. js/include.js) */
.include-error {
  margin: 0;
  padding: 12px 24px;
  background: var(--coral-100);
  color: var(--coral-700);
  font-size: 14px;
  text-align: center;
}

/* ---------- 6. Responsive ---------- */
@media (max-width: 991.98px) {
  .section { padding-block: 72px; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .section-title { font-size: 38px; line-height: 44px; letter-spacing: -1px; }
  .section-title br { display: none; }
}
@media (max-width: 575.98px) {
  .section { padding-block: 56px; }
  .section-title { font-size: 30px; line-height: 36px; letter-spacing: -0.6px; }
  .section-lead { font-size: 16px; line-height: 25px; }
}

/* =========================================================
   Form hata yazısı — js/form-kontrol.js tarafından eklenir
   Hatalı alanın hemen altında kırmızı açıklama gösterilir.
   ========================================================= */
.alan-hata {
  display: none;
  margin-top: 6px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: #C0392B;
}
.alan-hata.is-gorunur { display: block; }
/* !important: sayfa CSS'lerindeki :focus kuralları kırmızı çerçeveyi ezmesin */
.is-hatali,
.is-hatali:focus { border-color: #D9534F !important; }
.is-hatali:focus { box-shadow: 0 0 0 4px rgba(217, 83, 79, 0.15) !important; }

/* ---------- Partial yer tutucuları: önceden yer ayırma (CLS önleme) ----------
   js/include.js; header, şerit, alt sekmeler gibi parçaları sayfa açıldıktan
   SONRA ekler. Eklenene kadar boş <div> 0px yüksekliğinde olduğu için, parça
   gelince altındaki bütün içerik aşağı kayıyordu (PageSpeed'de "Cumulative
   Layout Shift"). Burada her yer tutucuya, gelecek parçanın yüksekliği kadar
   yer ayırıyoruz. Parça gelince bu <div> zaten sayfadan kaldırılır, yani
   bu kuralların sayfanın son görünümüne hiçbir etkisi yoktur.
   Not: header/şerit yüksekliğini değiştirirseniz buradaki değerleri de güncelleyin. */
[data-include="partials/topbar.html"] { min-height: 40px; }
[data-include="partials/header.html"] { min-height: 73px; }
[data-include="partials/kurumsal-nav.html"],
[data-include="partials/cozumler-nav.html"] { min-height: 75px; }
[data-include="partials/panelde-ne-var.html"] { min-height: 860px; }

@media (max-width: 991.98px) {
  [data-include="partials/cozumler-nav.html"] { min-height: 132px; }
  [data-include="partials/panelde-ne-var.html"] { min-height: 1070px; }
}
@media (max-width: 575.98px) {
  [data-include="partials/topbar.html"] { min-height: 90px; }
  [data-include="partials/cozumler-nav.html"] { min-height: 75px; }
  [data-include="partials/panelde-ne-var.html"] { min-height: 930px; }
}