@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap&subset=latin+ext");

/* Root değişkenleri: kolay tema / responsive ayar */
:root{
  --base-font-family: 'Titillium Web', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --brand-font-family: "teknoFont", var(--base-font-family);
  --base-font-size: 16px;
  --line-height: 1.45;
  --text-color: #222;
}

/* Genel gövde ayarları */
html {
  font-size: var(--base-font-size);
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-color);
  line-height: var(--line-height);
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }

/* Titillium Web başlık sınıfı */
.titilB {
  font-family: var(--base-font-family);
  font-weight: 600;
  font-style: normal;
  font-size: clamp(1rem, 1.6vw, 1.25rem); /* responsive başlık boyutu */
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* Özel marka fontu: teknoFont */
/* Not: sunucuda woff2/woff/ttf/eot dosyalarının doğru ve CORS izinli olduğundan emin ol */
@font-face {
  font-family: 'teknoFont';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: local('teknoFont'), local('TeknoFont'),
       url('../plugin/webfonts/teknomar_hum521ub-webfont.woff2') format('woff2'),
       url('../plugin/webfonts/teknomar_hum521ub-webfont.woff') format('woff'),
       url('../plugin/webfonts/teknomar_hum521ub-webfont.ttf') format('truetype'),
       url('../plugin/webfonts/teknomar_hum521ub-webfont.eot'); /* IE9 fallback */
  /* EOT için ayrı src (IE8/9) gerekiyorsa ek bir @font-face ile src: url('...eot?#iefix') format('embedded-opentype') ekle */
}

/* Tekno fontu kullanan sınıf */
.font521 {
  font-family: var(--brand-font-family);
  font-style: normal;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: clamp(0.9rem, 1.2vw, 1rem);
}

/* Responsive örnek: gövde ve linkler için temel ayarlar */
body {
  font-family: var(--base-font-family);
  font-size: 1rem;
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--text-color);
}

/* Küçük ekranlar için dokunmatik hedefleri büyütme */
a, button {
  -webkit-tap-highlight-color: rgba(0,0,0,0.05);
}

/* Basit medya sorguları: mobil / tablet / desktop */
@media (max-width: 599px) {
  :root { --base-font-size: 15px; }
  .titilB { font-size: clamp(1rem, 4.5vw, 1.1rem); }
  .font521 { font-size: 0.95rem; }
}

@media (min-width: 600px) and (max-width: 1199px) {
  :root { --base-font-size: 16px; }
  .titilB { font-size: clamp(1.05rem, 1.8vw, 1.2rem); }
  .font521 { font-size: 1rem; }
}

@media (min-width: 1200px) {
  :root { --base-font-size: 16px; }
  .titilB { font-size: clamp(1.1rem, 1.2vw, 1.25rem); }
  .font521 { font-size: 1rem; }
}

/* İsteğe bağlı: font yüklenemediğinde görünümü korumak için fallback stiller */
.no-font .font521 { font-family: var(--base-font-family); font-weight: 600; }