/* =============================================================================
   FEDEM – Freelance C++ Consultant
   style.css — Single stylesheet, served from /static/css/style.css
   ============================================================================= */

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #1a1a1a;
  background: #ffffff;
}


a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* ── Page Layout ──────────────────────────────────────────────────────────── */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


/* ── Content wrapper (used by all pages) ─────────────────────────────────── */
.content-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px 24px;
}

/* screen_width: "full" — content spans the full viewport width */
.page-full .content-wrap {
  max-width: none;
}
/* ── screen_width: full — remove max-width cap on navbar and footer too ─────── */
.page-full .navbar-inner {
  max-width: none;
}
.page-full .footer-inner {
  max-width: none;
}

/* screen_width: "restricted" — explicit rule mirrors the default */
.page-restricted .content-wrap {
  max-width: 1000px;
  margin: 0 auto;
}
.page-restricted .navbar-inner {
  max-width: 1000px;
  margin: 0 auto;
}
.page-restricted .footer-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.page-heading { margin-bottom: 32px; }
.page-heading h1,
h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; color: #111; margin-bottom: 12px; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem);   font-weight: 700; color: #111; margin-bottom: 12px; }

.empty-msg {
  color: #888;
  font-style: italic;
  margin-top: 24px;
  display: block;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .content-wrap { padding: 24px 16px; }
}

/* ── CTA Button ─────────────────────────────────────────────────────────────── */
.cta-button {
  display: inline-block;
  padding: 16px 40px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: #1a1a2e;
  color: #fff;
  border: 2.5px solid rgba(255,255,255,0.6);
  border-radius: 50px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.22s, color 0.22s, transform 0.18s,
              box-shadow 0.22s, border-color 0.22s;
}
.cta-button:hover {
  background: #0f3460;
  color: #fff;
  border-color: rgba(255,255,255,0.9);
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 32px rgba(0,0,0,0.28);
}
.cta-button:active {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}

/* ── Horizontal overflow control (does NOT break position:sticky) ──────────── */
/* overflow-x:hidden kırar sticky — clip kullan */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* ── Wt internal elements — must not take up space ────────────────────────── */
iframe[id^="wt_iframe"],
iframe[name^="wt_iframe"],
div:has(> input#Wt-history-field) {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  pointer-events: none !important;
}