/* =========================================================
   Bilet Baba — Base Reset & Typography
   ========================================================= */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--gray-900);
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--gray-900);
}
h1 { font-size: clamp(36px, 6vw, var(--fs-7xl)); }
h2 { font-size: clamp(28px, 4vw, var(--fs-5xl)); }
h3 { font-size: clamp(22px, 3vw, var(--fs-3xl)); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); }

p { margin: 0; }

/* === Container === */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* === Section === */
.section { padding-block: clamp(48px, 8vw, var(--sp-24)); }
.section-header { text-align: center; max-width: 720px; margin: 0 auto var(--sp-12); }
.section-header h2 { margin-bottom: var(--sp-3); }
.section-header p { color: var(--gray-500); font-size: var(--fs-md); }

/* === Tags & badges === */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 12px;
  border-radius: var(--r-full);
  background: var(--primary-50);
  color: var(--primary-700);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* === Utilities === */
.text-center { text-align: center; }
.text-muted  { color: var(--gray-500); }
.text-primary{ color: var(--primary); }
.bg-soft     { background: var(--bg-soft); }
.flex        { display: flex; }
.grid        { display: grid; }
.gap-2       { gap: var(--sp-2); }
.gap-4       { gap: var(--sp-4); }
.gap-6       { gap: var(--sp-6); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* === Animations === */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .7; transform: scale(1.04); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }

.fade-in { animation: fadeInUp .5s ease both; }

/* === Selection === */
::selection { background: var(--primary-200); color: var(--primary-900); }

/* === Scrollbar (subtle) === */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* === Focus visible === */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}