/*
  Radio Saas — Static CSS
  Clean, playful brand system to match the logo (deep blue + warm cream + yellow/orange accents)
  Author: ChatGPT (Design System)
*/

/* ===== Brand Tokens ===== */
:root {
  --rs-blue: #0D4F85;    /* background / primary */
  --rs-cream: #FFF6E1;   /* text-on-blue / surfaces */
  --rs-yellow: #F5B400;  /* accent (jacket) */
  --rs-orange: #F08C00;  /* accent (döner/energy) */
  --rs-graphite: #111827;/* dark text */

  --rs-radius: 16px;
  --rs-radius-lg: 20px;
  --rs-shadow: 0 10px 30px rgba(0,0,0,.18);
  --rs-shadow-sm: 0 6px 16px rgba(0,0,0,.10);
  --rs-glass-bg: rgba(255, 246, 225, 0.08);
  --rs-glass-brd: rgba(255, 246, 225, 0.18);
}

/* ===== Reset (lightweight) ===== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color: var(--rs-cream); background: var(--rs-blue); line-height: 1.5; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ===== Layout ===== */
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.section { padding: 64px 0; }
.section-sm { padding: 40px 0; }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Flex helpers */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 32px; }
.gap-4 { gap: 16px; }

/* Spacing utilities */
.mt-1{ margin-top:4px } .mt-2{ margin-top:8px } .mt-3{ margin-top:12px } .mt-4{ margin-top:16px } .mt-6{ margin-top:24px } .mt-8{ margin-top:32px }
.mb-1{ margin-bottom:4px } .mb-2{ margin-bottom:8px } .mb-4{ margin-bottom:16px } .mb-6{ margin-bottom:24px } .mb-8{ margin-bottom:32px }
.p-2{ padding:8px } .p-3{ padding:12px } .p-4{ padding:16px } .p-5{ padding:20px } .p-6{ padding:24px }

/* ===== Typography ===== */
.h1 { font-weight: 800; font-size: clamp(32px, 5vw, 56px); line-height: 1.1; }
.h2 { font-weight: 800; font-size: clamp(24px, 3.6vw, 36px); }
.h3 { font-weight: 700; font-size: 20px; }
.lead { font-size: clamp(16px, 2.4vw, 20px); opacity: .92; }
.small { font-size: 14px; opacity: .9; }
.text-cream { color: var(--rs-cream); }
.text-blue { color: var(--rs-blue); }
.text-graphite { color: var(--rs-graphite); }

/* ===== Surfaces ===== */
.surface-cream { background: var(--rs-cream); color: var(--rs-blue); }
.surface-blue { background: var(--rs-blue); color: var(--rs-cream); }
.card { background: var(--rs-cream); color: var(--rs-blue); border-radius: var(--rs-radius-lg); box-shadow: var(--rs-shadow-sm); padding: 20px; border: 1px solid rgba(0,0,0,.06); }
.glass { background: var(--rs-glass-bg); backdrop-filter: blur(8px); border: 1px solid var(--rs-glass-brd); border-radius: var(--rs-radius-lg); box-shadow: var(--rs-shadow-sm); padding: 20px; }
.rounded { border-radius: var(--rs-radius); }
.shadow { box-shadow: var(--rs-shadow); }

/* ===== Buttons ===== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius: 14px; font-weight: 700; cursor: pointer; transition: transform .06s ease, box-shadow .2s ease, background .2s ease; border: 1px solid transparent; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--rs-cream); color: var(--rs-blue); box-shadow: var(--rs-shadow-sm); }
.btn-primary:hover { filter: brightness(.98); }
.btn-outline { background: transparent; color: var(--rs-cream); border-color: var(--rs-cream); }
.btn-accent { background: var(--rs-yellow); color: var(--rs-graphite); }
.btn-warm { background: var(--rs-orange); color: var(--rs-graphite); }

/* ===== Badges & Chips ===== */
.badge { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius: 999px; border: 1px solid var(--rs-cream); color: var(--rs-cream); font-size: 12px; }

/* ===== Header / Nav ===== */
.nav { position: sticky; top: 0; z-index: 50; background: linear-gradient(180deg, rgba(13,79,133,.9), rgba(13,79,133,.6)); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(255,246,225,.15); }
.nav a { opacity: .9; }
.nav a:hover { opacity: 1; }
.logo { height: 48px; width: 48px; border-radius: 12px; background: var(--rs-cream); box-shadow: var(--rs-shadow-sm); }

/* ===== Hero ===== */
.hero { position: relative; overflow: hidden; }
.hero .blob-a, .hero .blob-b { position: absolute; border-radius: 999px; filter: blur(60px); opacity: .35; z-index: -1; }
.hero .blob-a { width: 32vw; height: 32vw; left: -12vw; top: -10vw; background: var(--rs-orange); }
.hero .blob-b { width: 28vw; height: 28vw; right: -10vw; bottom: -8vw; background: var(--rs-yellow); }

/* ===== Media Player (dummy styles) ===== */
.player { display:flex; gap:16px; align-items:center; }
.player .play { width: 56px; height: 56px; border-radius: 14px; background: var(--rs-cream); color: var(--rs-blue); display:grid; place-items:center; box-shadow: var(--rs-shadow-sm); }
.player .meta { flex:1; }
.player .bar { height: 8px; background: rgba(255,255,255,.15); border-radius: 10px; overflow: hidden; }
.player .bar > i { display:block; height:100%; width:66%; background: rgba(255,255,255,.7); }

/* ===== Cards: schedule & podcasts ===== */
.schedule-item { display:flex; align-items:center; justify-content:space-between; }
.podcast { display:flex; flex-direction:column; gap:10px; }

/* ===== Forms ===== */
.input { width:100%; padding:12px 14px; border-radius: 14px; border: 1px solid rgba(0,0,0,.08); background: var(--rs-cream); color: var(--rs-blue); outline: none; }
.input::placeholder { color: #6b7280; opacity: .8; }

/* ===== Footer ===== */
.footer { border-top: 1px solid rgba(255,246,225,.2); padding: 36px 0; }

/* ===== Simple icon helper (for inline SVG) ===== */
.icon { width: 20px; height: 20px; display:inline-block; }

/* ===== Utilities ===== */
.center { display:grid; place-items:center; }
.max-w-xl { max-width: 720px; }
.max-w-2xl { max-width: 880px; }
.max-w-7xl { max-width: 1200px; }
.opacity-80 { opacity: .8; }
.underline { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ===== Example component variants to keep consistency ===== */
.card--glass { background: var(--rs-glass-bg); border: 1px solid var(--rs-glass-brd); color: var(--rs-cream); }
.card--blue { background: var(--rs-blue); color: var(--rs-cream); }
.card--cream { background: var(--rs-cream); color: var(--rs-blue); }

/* End of file */