/* Masaldan Erdeme — marketing + policy site.
   Warm "daytime storybook" theme, mirroring the app (cream paper, indigo ink,
   gold accents, rounded Baloo 2 display + Nunito body). */

:root {
  --cream: #fbf3e1;
  --paper: #fffdf8;
  --sand-high: #f2e8cf;
  --clay: #e6dbc0;
  --ink: #2a2350;
  --ink-soft: #605a7e;
  --ink-faint: #9a94ac;
  --gold: #f4b740;
  --gold-deep: #d99a1e;
  --on-gold: #1a1330;
  --violet: #6b46c9;
  --danger: #d8564a;
  --radius: 18px;
  --radius-lg: 28px;
  --max: 820px;
  --shadow: 0 10px 30px rgba(74, 58, 30, 0.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand {
  font-family: 'Baloo 2', system-ui, sans-serif;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

a { color: var(--gold-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(251, 243, 225, 0.85);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--clay);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; }
.brand .star { width: 26px; height: 26px; }
.nav { display: flex; align-items: center; }
.nav a { color: var(--ink-soft); font-weight: 700; margin-left: 20px; font-family: 'Baloo 2', sans-serif; }
.nav a:hover { color: var(--ink); text-decoration: none; }

/* TR / EN switcher — the current language is a non-link <strong>. */
.lang {
  display: inline-flex; align-items: center; gap: 2px; margin-left: 20px; padding: 3px;
  background: var(--sand-high); border: 1px solid var(--clay); border-radius: 999px;
  font-family: 'Baloo 2', sans-serif; font-size: 14px;
}
.lang a, .lang strong { padding: 3px 10px; border-radius: 999px; line-height: 1.15; }
.lang strong { background: var(--ink); color: #fff; font-weight: 700; }
.lang a { color: var(--ink-soft); font-weight: 600; margin-left: 0; }
.lang a:hover { color: var(--ink); text-decoration: none; }

@media (max-width: 560px) {
  .brand { font-size: 19px; }
  .nav a { margin-left: 12px; font-size: 15px; }
  .lang { margin-left: 12px; }
}
/* Very narrow phones: stack the brand and nav instead of overflowing. */
@media (max-width: 430px) {
  .site-header .wrap {
    height: auto; flex-wrap: wrap; justify-content: center;
    padding: 10px 16px; gap: 4px 0;
  }
  .nav { flex-wrap: wrap; justify-content: center; }
  .nav a { margin: 0 8px; }
  .lang { margin-left: 8px; }
}

/* Hero */
.hero { text-align: center; padding: 72px 0 48px; }
.hero h1 { font-size: clamp(34px, 6vw, 56px); margin: 0 0 12px; }
.hero .tag { font-size: clamp(18px, 2.4vw, 22px); color: var(--ink-soft); max-width: 640px; margin: 0 auto 28px; }
.coming-soon {
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 17px;
  color: var(--ink-soft); margin: 0 0 14px; letter-spacing: 0.02em;
}
.coming-soon em { font-style: italic; font-weight: 600; }

/* Store badges. Both vendors require ≥ 1/4-badge-height of clear space and
   forbid recolouring, redrawing or animating the artwork — so these are plain
   <img> tags with only their size set, and the 24px gap/margin supplies the
   clear space. */
.badge-row {
  display: flex; gap: 24px; justify-content: center; align-items: center;
  flex-wrap: wrap; margin: 0 0 8px;
}
.badge { display: block; width: auto; }
/* 44px ≥ Apple's 40px onscreen minimum. */
.badge-apple { height: 44px; }
/* Google's web badge PNG bakes in ~1.30× vertical padding (646×250 canvas around
   192px of artwork), so 62px total renders ~47.6px of visible badge — keeping the
   Play badge at least as large as the App Store badge, as Google requires. */
.badge-google { height: 62px; }

/* Feature cards */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: 40px 0; }
.card {
  background: var(--paper); border: 1px solid var(--clay); border-radius: var(--radius-lg);
  padding: 24px; box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 8px; font-size: 21px; }
.card p { margin: 0; color: var(--ink-soft); font-size: 16px; }
.card .emoji { font-size: 30px; }

.trust {
  background: var(--sand-high); border: 1px solid var(--clay); border-radius: var(--radius-lg);
  padding: 24px 28px; margin: 40px 0; text-align: center;
}
.trust strong { color: var(--ink); }

/* Legal / content pages */
.doc { padding: 40px 0 60px; }
.doc h1 { font-size: clamp(30px, 5vw, 42px); margin-bottom: 4px; }
.doc .updated { color: var(--ink-faint); font-size: 15px; margin-bottom: 28px; }
.doc h2 { font-size: 24px; margin: 34px 0 10px; }
.doc h3 { font-size: 19px; margin: 22px 0 6px; }
.doc p, .doc li { color: #3a3360; }
.doc ul { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 16px; }
.doc th, .doc td { border: 1px solid var(--clay); padding: 10px 12px; text-align: left; vertical-align: top; }
.doc th { background: var(--sand-high); }

/* Footer */
.site-footer {
  border-top: 1px solid var(--clay); background: var(--paper);
  padding: 32px 0; margin-top: 40px; color: var(--ink-soft); font-size: 15px;
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.site-footer nav a { color: var(--ink-soft); margin-right: 18px; font-weight: 700; }

.btn {
  display: inline-block; background: var(--gold); color: var(--on-gold);
  font-family: 'Baloo 2', sans-serif; font-weight: 700; padding: 12px 24px;
  border-radius: 999px; border-bottom: 4px solid var(--gold-deep);
}
.btn:hover { text-decoration: none; filter: brightness(1.03); }