/* ============================================================
   Prof. Dr. M. Kadri Akboğa — Interventional Cardiology
   Design system: light paper, navy depth, cyan + platinum
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Paper / ink ---- */
  --paper:        #f7f9fb;      /* page background, faintly cool */
  --paper-2:      #eef2f6;      /* sunken bands */
  --card:         #ffffff;
  --ink:          #0c1726;      /* near-black navy text */
  --ink-soft:     #41526a;      /* secondary text */
  --ink-faint:    #8595a9;      /* tertiary / labels */
  --hair:         #e2e8f0;      /* hairlines */
  --hair-strong:  #cdd6e2;

  /* ---- Navy depth (dark sections) ---- */
  --navy:         #081428;      /* deepest */
  --navy-2:       #0c1f3c;
  --navy-3:       #12294d;
  --navy-line:    rgba(255,255,255,.10);
  --on-navy:      #eaf1fa;
  --on-navy-soft: #9db0c9;
  --on-navy-faint:#56688a;

  /* ---- Accent: cyan + platinum ---- */
  --accent:       #1bb6d6;      /* cyan */
  --accent-deep:  #0e8fb0;
  --accent-soft:  #d6f1f7;
  --accent-glow:  rgba(27,182,214,.35);
  --platinum-1:   #e9edf2;
  --platinum-2:   #c3ccd8;
  --platinum-3:   #f4f7fa;
  --gold:         #b9a06a;       /* reserved metallic, used sparingly */

  /* ---- Type ---- */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Spacing / radius ---- */
  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 15px;
  --r-xl: 18px;
  --shadow-sm: 0 1px 2px rgba(12,23,38,.05), 0 2px 8px rgba(12,23,38,.04);
  --shadow-md: 0 4px 16px rgba(12,23,38,.08), 0 12px 40px rgba(12,23,38,.06);
  --shadow-lg: 0 12px 36px rgba(12,23,38,.12), 0 32px 80px rgba(12,23,38,.10);
  --shadow-navy: 0 20px 60px rgba(4,10,22,.45);

  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01";
}

::selection { background: var(--accent); color: #fff; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: 40px; }
@media (max-width: 720px){ .wrap { padding-inline: 22px; } }

.section { padding-block: clamp(72px, 9vw, 140px); position: relative; }
.section--dark { background: var(--navy); color: var(--on-navy); }
.section--sunken { background: var(--paper-2); }

/* ---------- Type scale ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.section--dark .eyebrow { color: var(--accent); }
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  opacity: .6;
}

.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.018em;
  font-size: clamp(40px, 6vw, 84px);
  margin: 0;
}
.h2 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.015em;
  font-size: clamp(32px, 4.4vw, 56px);
  margin: 0;
}
.h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0;
}
.lede {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 400;
}
.section--dark .lede { color: var(--on-navy-soft); }
.italic-accent { font-style: italic; font-family: var(--serif); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--accent);
  color: #042733;
  box-shadow: 0 1px 2px rgba(4,16,28,.18);
}
.btn-primary:hover { background: var(--accent-deep); color: #fff; }
.btn-ghost {
  background: rgba(255,255,255,.05);
  color: var(--on-navy);
  border-color: rgba(255,255,255,.24);
}
.btn-ghost:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.42); }
.btn-ink {
  background: var(--ink);
  color: #fff;
}
.btn-ink:hover { background: #16263d; }
.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--hair-strong);
}
.btn-outline:hover { border-color: var(--ink); }
.btn .arrow { transition: transform .4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal-blur { filter: blur(8px); }
.reveal-blur.in { filter: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; }
  html { scroll-behavior: auto; }
}
body[data-motion="calm"] .reveal { transform: translateY(14px); transition-duration: .7s; }
body[data-motion="calm"] .reveal-blur { filter: none; }

/* ---------- Image placeholders ---------- */
.ph {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(12,23,38,.045) 0 2px, transparent 2px 11px),
    linear-gradient(160deg, var(--platinum-3), var(--platinum-1));
  display: flex;
  align-items: flex-end;
  color: var(--ink-faint);
}
.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: 2;
}
.ph img[style*="display: none"] {
  display: none !important;
}
.ph.on-dark {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 11px),
    linear-gradient(160deg, #102a4f, #0c1f3c);
  color: var(--on-navy-faint);
}
.ph__tag {
  font-family: var(--mono, ui-monospace, 'SF Mono', Menlo, monospace);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 10px 12px;
  background: rgba(255,255,255,.7);
  border-top-right-radius: 8px;
  color: var(--ink-soft);
  backdrop-filter: blur(4px);
}
.ph.on-dark .ph__tag { background: rgba(8,20,40,.6); color: var(--on-navy-soft); }

/* ---------- Glass card ---------- */
.glass {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ---------- Utility ---------- */
.stack > * + * { margin-top: var(--gap, 20px); }
.muted { color: var(--ink-faint); }
.hairline { height: 1px; background: var(--hair); border: 0; }
.section--dark .hairline { background: var(--navy-line); }
.tnum { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* hide scrollbars on horizontal rails */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }