/* ═══════════════════════════════════════════════════════
   Tataroğlu Gıda — Base CSS
   CSS custom properties, reset, typography, utilities
═══════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,400&display=swap');

/* ── CSS Custom Properties ── */
:root {
  /* Brand Colors */
  --primary:        #0A84FF;
  --primary-hover:  #0070e0;
  --primary-dark:   #0057b8;
  --primary-glow:   rgba(10,132,255,0.35);
  --primary-subtle: rgba(10,132,255,0.08);
  --primary-border: rgba(10,132,255,0.25);

  /* Backgrounds */
  --bg:         #070d18;
  --bg-card:    #0e1623;
  --bg-card2:   rgba(14,22,35,0.65);
  --bg-glass:   rgba(255,255,255,0.04);
  --bg-input:   rgba(255,255,255,0.05);

  /* Borders */
  --border:        rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.12);
  --border-card:   rgba(255,255,255,0.08);

  /* Text */
  --text-primary:   #ffffff;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-faint:     #475569;

  /* Semantic */
  --green:         #22c55e;
  --green-subtle:  rgba(34,197,94,0.1);
  --green-border:  rgba(34,197,94,0.3);
  --green-glow:    rgba(37,211,102,0.2);
  --amber:         #f59e0b;
  --amber-subtle:  rgba(245,158,11,0.1);
  --amber-border:  rgba(245,158,11,0.3);
  --red:           #ef4444;
  --red-subtle:    rgba(239,68,68,0.1);
  --red-border:    rgba(239,68,68,0.3);
  --indigo:        #6366f1;
  --violet:        #8b5cf6;

  /* Border Radius */
  --radius-xs:  0.375rem;
  --radius-sm:  0.5rem;
  --radius:     0.75rem;
  --radius-lg:  1rem;
  --radius-xl:  1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-primary: 0 0 25px rgba(10,132,255,0.3);
  --shadow-card:    0 4px 24px rgba(0,0,0,0.25);
  --shadow-strong:  0 8px 40px rgba(0,0,0,0.4);
  --shadow-sm:      0 2px 8px rgba(0,0,0,0.2);

  /* Transitions */
  --transition:      0.2s cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 0.35s cubic-bezier(0.4,0,0.2,1);
  --transition-spring: 0.4s cubic-bezier(0.34,1.56,0.64,1);

  /* Layout */
  --navbar-h: 4rem;
  --content-max: 72rem;
  --content-narrow: 48rem;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html                    { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; tab-size: 4; }
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main              { flex: 1; }
img, video        { max-width: 100%; height: auto; display: block; }
a                 { color: inherit; text-decoration: none; }
button            { cursor: pointer; font-family: inherit; border: none; background: none; }
input, textarea, select { font-family: inherit; }
ul, ol            { list-style: none; }
h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.2; }

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ── Typography helpers ── */
.text-gradient {
  background: linear-gradient(135deg, #60a5fa, #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-green {
  background: linear-gradient(135deg, #34d399, #10b981);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-warm {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Section pattern ── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--primary-border);
  background: var(--primary-subtle);
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* ── Container ── */
.container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }

/* ── Utility ── */
.sr-only    { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0; }
.truncate   { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.line-clamp-2 { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.line-clamp-3 { display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }

/* ── Animations ── */
@keyframes fadeInUp   { from{opacity:0;transform:translateY(28px)}  to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn     { from{opacity:0}                              to{opacity:1} }
@keyframes spin       { to  {transform:rotate(360deg)} }
@keyframes pulse-ring { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.04)} }
@keyframes bounce-y   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes shimmer    { from{background-position:-200% 0} to{background-position:200% 0} }
@keyframes glow-pulse { 0%,100%{box-shadow:0 0 15px rgba(10,132,255,.3)} 50%{box-shadow:0 0 30px rgba(10,132,255,.6)} }