/* ==========================================================================
   MEDDATA 2026 — arayuz tasarim sistemi
   ========================================================================== */

:root {
  --navy-950: #050b18;
  --navy-900: #071230;
  --navy-800: #0b1e3d;
  --navy-700: #10294f;
  --navy-600: #163a6b;
  --blue-500: #1080f2;
  --blue-400: #3d9dff;
  --blue-300: #7cc0ff;
  --cyan-400: #22d3d8;
  --mint-400: #34e5b0;
  --red-500: #cc0000;
  --white: #ffffff;
  --ink-100: #eaf1ff;
  --ink-300: #b7c6e6;
  --ink-500: #7f8fb3;

  --glass-bg: rgba(13, 27, 56, 0.55);
  --glass-bg-light: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-blur: blur(18px);

  --grad-hero: radial-gradient(120% 120% at 15% 10%, #163a6b 0%, #0b1e3d 45%, #050b18 100%);
  --grad-accent: linear-gradient(135deg, var(--blue-500), var(--cyan-400));
  --grad-mint: linear-gradient(135deg, var(--mint-400), var(--blue-400));

  --shadow-soft: 0 20px 60px -20px rgba(3, 10, 26, 0.55);
  --shadow-glow: 0 0 0 1px rgba(61, 157, 255, 0.15), 0 25px 80px -25px rgba(16, 128, 242, 0.45);

  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-arc: cubic-bezier(0.3, 1.2, 0.34, 1);

  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --container-w: 1240px;
  --nav-h: 98px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.md-body {
  margin: 0;
  background: var(--navy-950);
  color: var(--ink-100);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.md-body h1, .md-body h2, .md-body h3, .md-body h4, .md-body h5 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--white);
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

.md-body p { color: var(--ink-300); }
.md-body a { color: inherit; text-decoration: none; }
.md-body ul { list-style: none; margin: 0; padding: 0; }
.md-body img { max-width: 100%; display: block; }
.md-body button { font-family: inherit; cursor: pointer; }

.md-container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================================================
   LOADER (intro)
   ========================================================================== */

.md-loader {
  position: fixed; inset: 0;
  z-index: 99999;
  background: var(--grad-hero);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px;
  transition: opacity 0.9s var(--ease-out-soft), visibility 0.9s;
}
.md-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.md-loader__mark { position: relative; display: flex; align-items: center; justify-content: center; }
.md-loader__mark::before {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 192, 255, 0.32), transparent 70%);
  filter: blur(6px);
  animation: loaderHalo 2.6s ease-in-out infinite;
}
.md-loader__mark img {
  position: relative;
  height: 210px; width: auto;
  opacity: 0;
  filter: blur(8px);
  animation: loaderReveal 0.65s var(--ease-out-soft) forwards, loaderPulse 2.6s ease-in-out 0.65s infinite;
  transition: transform 0.9s var(--ease-out-soft), filter 0.9s var(--ease-out-soft);
}
.md-loader.is-hidden .md-loader__mark img {
  animation: none;
  opacity: 1;
  transform: scale(1.1);
  filter: blur(10px);
}
.md-loader__bar { width: 150px; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; }
.md-loader__bar span { display: block; height: 100%; width: 32%; background: var(--grad-accent); border-radius: 3px; animation: loaderBar 1.6s ease-in-out infinite; }
@keyframes loaderReveal { 0% { opacity: 0; transform: scale(0.72); filter: blur(10px); } 100% { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes loaderPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes loaderHalo { 0%, 100% { transform: scale(0.9); opacity: 0.55; } 50% { transform: scale(1.2); opacity: 1; } }
@keyframes loaderBar { 0% { transform: translateX(-120%); } 100% { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) {
  .md-loader { display: none; }
}

/* ==========================================================================
   CUSTOM CURSOR (desktop / fine-pointer only — see initCustomCursor in JS)
   ========================================================================== */

body.md-cursor-active, body.md-cursor-active a, body.md-cursor-active button,
body.md-cursor-active [role="button"] { cursor: none; }
body.md-cursor-active input, body.md-cursor-active textarea { cursor: text; }

#mdCursor {
  position: fixed; top: 0; left: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(124, 192, 255, 0.85);
  background: rgba(124, 192, 255, 0.12);
  pointer-events: none;
  z-index: 100000;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: width 0.25s var(--ease-out-soft), height 0.25s var(--ease-out-soft), background 0.25s, border-color 0.25s, opacity 0.3s;
}
#mdCursor.is-active { opacity: 1; }
#mdCursor.is-hover { width: 46px; height: 46px; background: rgba(124, 192, 255, 0.18); border-color: var(--cyan-400); }
#mdCursor.is-down { width: 16px; height: 16px; }

/* ambient glow that trails the pointer across the whole page — a soft
   "living software" touch behind the content (see initAmbientGlow in JS) */
#mdAmbientGlow {
  position: fixed; top: 0; left: 0;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61, 157, 255, 0.16), rgba(34, 211, 216, 0.07) 42%, transparent 68%);
  filter: blur(16px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out-soft);
  will-change: transform;
}
#mdAmbientGlow.is-active { opacity: 1; }

/* digital rain + retro PC corner decoration (see initCodeRain in JS) —
   pinned to viewport bottom-left; the PC "powers off" once you scroll past
   the hero, the rain keeps trickling (thinner) for the rest of the page */
.md-code-rain {
  position: fixed;
  left: 6px; top: 0;
  width: 36px; height: 100vh;
  pointer-events: none;
  z-index: 4;
}
.md-code-rain span {
  position: absolute;
  top: -20px;
  left: var(--x, 0);
  font-family: 'Courier New', monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cyan-400);
  text-shadow: 0 0 6px rgba(34, 211, 216, 0.75);
  opacity: 0.55;
  animation: codeFall var(--dur, 6s) linear infinite;
  animation-delay: var(--delay, 0s);
  transition: opacity 0.8s var(--ease-out-soft);
}
.md-code-rain.is-thin span { opacity: 0.2; }
.md-code-rain span.is-word {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--mint-400);
  text-shadow: 0 0 10px rgba(52, 229, 176, 0.95), 0 0 26px rgba(52, 229, 176, 0.55);
  opacity: 0.95;
}
.md-code-rain.is-thin span.is-word { opacity: 0.75; }
@keyframes codeFall {
  0% { transform: translateY(-4vh); opacity: 0; }
  8% { opacity: 0.9; }
  90% { opacity: 0.9; }
  100% { transform: translateY(105vh); opacity: 0; }
}

.md-retro-pc {
  position: fixed;
  left: 14px; bottom: 16px;
  z-index: 4;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(5, 11, 24, 0.55);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  color: var(--cyan-400);
  font-size: 18px;
  box-shadow: 0 0 22px 2px rgba(34, 211, 216, 0.25);
  opacity: 1;
  transform: scale(1);
  transform-origin: bottom left;
  transition: transform 0.6s var(--ease-out-back), opacity 0.5s var(--ease-out-soft), filter 0.5s;
}
.md-retro-pc.is-off {
  transform: scaleY(0.04) scaleX(1.4);
  opacity: 0;
  filter: blur(3px);
}
@media (prefers-reduced-motion: reduce) {
  .md-code-rain, .md-retro-pc { display: none; }
}

/* back-to-top: shares the PC's corner, "powers on" once the PC powers off */
.md-back-top {
  position: fixed;
  left: 14px; bottom: 16px;
  z-index: 4;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(5, 11, 24, 0.55);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  color: var(--cyan-400);
  font-size: 16px;
  box-shadow: 0 0 22px 2px rgba(34, 211, 216, 0.25);
  opacity: 0;
  transform: scaleY(0.04) scaleX(1.4);
  transform-origin: bottom left;
  pointer-events: none;
  transition: transform 0.6s var(--ease-out-back), opacity 0.5s var(--ease-out-soft), filter 0.5s, background 0.3s;
}
.md-back-top.is-on { opacity: 1; transform: scale(1); pointer-events: auto; }
.md-back-top:hover { background: rgba(5, 11, 24, 0.8); }
@media (prefers-reduced-motion: reduce) {
  .md-back-top { transition: opacity 0.3s; transform: none !important; }
}

/* terminal-style scramble-on-hover for stat numbers/badges (see initScrambleHover) */
[data-scramble] { cursor: default; }
[data-scramble].is-scrambling {
  color: var(--cyan-400) !important;
  text-shadow: 0 0 8px rgba(34, 211, 216, 0.6);
}

.md-section {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
}

.md-section--tight { padding: 90px 0; }

/* ambient drifting background glows, reused across a few sections for
   continuous "living" motion beyond the one-shot scroll reveals */
.md-section--glow::before, .md-section--glow::after {
  content: '';
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
}
.md-section--glow::before {
  background: var(--blue-500);
  top: -10%; left: -8%;
  animation: sectionGlowA 22s ease-in-out infinite;
}
.md-section--glow::after {
  background: var(--mint-400);
  bottom: -12%; right: -6%;
  opacity: 0.2;
  animation: sectionGlowB 26s ease-in-out infinite;
}
.md-section--glow > * { position: relative; z-index: 1; }
@keyframes sectionGlowA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.2); }
}
@keyframes sectionGlowB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, -30px) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .md-section--glow::before, .md-section--glow::after { animation: none; }
}

.md-section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
}

.md-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-400);
  margin-bottom: 14px;
}

.md-eyebrow::before,
.md-eyebrow::after {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--grad-accent);
  border-radius: 2px;
}

.md-section-head h2 { font-size: clamp(28px, 4vw, 42px); }
.md-section-head p { font-size: 17px; }

/* ---- buttons -------------------------------------------------------- */

.md-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  /* composed from independent pieces so magnetic-pull JS (--mx/--my) never
     fights the hover-lift / active-press states below */
  --mx: 0px; --my: 0px; --hoverY: 0px; --pressScale: 1;
  transform: translate(var(--mx), var(--my)) translateY(var(--hoverY)) scale(var(--pressScale));
  transition: transform 0.35s var(--ease-out-soft), box-shadow 0.35s var(--ease-out-soft), background 0.35s;
  white-space: nowrap;
}
.md-btn:active { --pressScale: 0.97; }

.md-btn--primary {
  background: var(--grad-accent);
  color: var(--white);
  text-shadow: 0 1px 3px rgba(3, 10, 26, 0.45);
  box-shadow: 0 14px 34px -12px rgba(16, 128, 242, 0.65);
}
.md-btn--primary:hover { --hoverY: -3px; color: var(--white); box-shadow: 0 20px 44px -14px rgba(16, 128, 242, 0.75); }

.md-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  border-color: var(--glass-border);
  backdrop-filter: var(--glass-blur);
}
.md-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); --hoverY: -3px; }

.md-btn--block { width: 100%; }
.md-btn--sm { padding: 10px 20px; font-size: 13.5px; }

/* ---- glass panel ------------------------------------------------------ */

.md-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
}

/* cursor-tracking spotlight — driven by --mx/--my custom properties (set in JS),
   deliberately NOT using transform so it layers with flip/tilt/entrance animations
   on the same element without conflict */
.md-spotlight { position: relative; overflow: hidden; }
.md-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(124, 192, 255, 0.22), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.md-spotlight:hover::before { opacity: 1; }
.md-spotlight > * { position: relative; z-index: 1; }

/* ==========================================================================
   REVEAL ENGINE (scroll-triggered)
   ========================================================================== */

.reveal { opacity: 0; will-change: transform, opacity; transition: opacity 0.9s var(--ease-out-soft), transform 0.9s var(--ease-out-soft); }
.reveal.is-visible { opacity: 1; }

.reveal-up { transform: translateY(60px); }
.reveal-up.is-visible { transform: translateY(0); }

.reveal-fade { transform: none; }

.reveal-tilt { transform: perspective(1200px) rotateX(24deg) rotateY(-10deg) translateY(70px) scale(0.92); transform-origin: bottom center; }
.reveal-tilt.is-visible { transform: perspective(1200px) rotateX(0) rotateY(0) translateY(0) scale(1); }

.reveal-flip { transform: perspective(1400px) rotateY(-90deg) translateX(-40px); transform-origin: left center; }
.reveal-flip.is-visible { transform: perspective(1400px) rotateY(0) translateX(0); }

.reveal-flip-r { transform: perspective(1400px) rotateY(90deg) translateX(40px); transform-origin: right center; }
.reveal-flip-r.is-visible { transform: perspective(1400px) rotateY(0) translateX(0); }

.reveal-slide-l { transform: translateX(-90px) rotate(-4deg); }
.reveal-slide-l.is-visible { transform: translateX(0) rotate(0); }

.reveal-slide-r { transform: translateX(90px) rotate(4deg); }
.reveal-slide-r.is-visible { transform: translateX(0) rotate(0); }

.reveal-spin3d { transform: perspective(1200px) rotateY(140deg) rotateX(10deg) translateZ(-120px) scale(0.7); opacity: 0; }
.reveal-spin3d.is-visible { transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateZ(0) scale(1); }

.reveal-pop { transform: scale(0.7) translateY(30px); }
.reveal-pop.is-visible { transform: scale(1) translateY(0); }

[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }
[data-reveal-delay="5"] { transition-delay: 0.4s; }
[data-reveal-delay="6"] { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-up, .reveal-tilt, .reveal-flip, .reveal-flip-r,
  .reveal-slide-l, .reveal-slide-r, .reveal-spin3d, .reveal-pop {
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */

.md-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background 0.4s var(--ease-out-soft), height 0.4s var(--ease-out-soft), box-shadow 0.4s;
}

.md-nav.is-scrolled {
  height: 72px;
  background: rgba(5, 11, 24, 0.72);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,0.6);
  border-bottom: 1px solid var(--glass-border);
}
.md-nav.is-scrolled .md-nav__logo img { height: 100px; }

.md-nav__inner {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.md-nav__logo { display: flex; align-items: center; gap: 12px; }
.md-nav__logo-mark { position: relative; display: inline-flex; }
.md-nav__logo img { height: 150px; width: auto; transition: height 0.4s var(--ease-out-soft); }
.md-footer__brand img { height: 44px; width: auto; }

.md-nav__links { display: flex; align-items: center; gap: 2px; }

.md-nav__links a {
  padding: 10px 13px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-300);
  border-radius: 100px;
  white-space: nowrap;
  transition: color 0.25s, background 0.25s;
}
.md-nav__links a:hover, .md-nav__links a.is-active { color: var(--white); background: rgba(255,255,255,0.08); }

/* İndirme Merkezi linki - sadece sayfanin en basinda (scroll edilmeden
   once) header'da görünür; asagi kaydirinca kaybolur, o an yerine sag
   alttaki .md-fab görünür hale gelir (bkz. body.is-scrolled) */
.md-nav__links-sep { margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--glass-border); transition: opacity 0.25s var(--ease-out-soft); }
.md-nav__links-sep a { color: var(--cyan-400); }
.md-nav__links-sep a:hover { color: var(--white); }
body.is-scrolled .md-nav__links-sep { display: none; }

.md-nav__cta { display: flex; align-items: center; gap: 10px; }

.md-lang-switch { position: relative; }
.md-lang-switch__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  color: var(--ink-100);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color 0.25s, background 0.25s;
}
.md-lang-switch__toggle i.fa-globe { color: var(--cyan-400); font-size: 12px; }
.md-lang-switch__toggle i.fa-angle-down { font-size: 11px; transition: transform 0.25s var(--ease-out-soft); }
.md-lang-switch__toggle:hover { color: var(--white); background: rgba(255,255,255,0.1); }
.md-lang-switch.is-open .md-lang-switch__toggle i.fa-angle-down { transform: rotate(180deg); }

.md-lang-switch__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 96px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(7, 18, 48, 0.96);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  box-shadow: 0 20px 45px -15px rgba(0,0,0,0.6);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease-out-soft), transform 0.2s var(--ease-out-soft);
  z-index: 20;
}
.md-lang-switch.is-open .md-lang-switch__menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.md-lang-switch__menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-300);
  transition: color 0.2s, background 0.2s;
}
.md-lang-switch__menu a:hover { color: var(--white); background: rgba(255,255,255,0.08); }
.md-lang-switch__menu a.is-active { color: var(--navy-950); background: var(--cyan-400); }

.md-lang-switch--mobile { margin: 18px auto; }
.md-lang-switch--mobile .md-lang-switch__toggle { margin: 0 auto; }
.md-lang-switch--mobile .md-lang-switch__menu { right: 50%; transform: translate(50%, -6px); }
.md-lang-switch--mobile.is-open .md-lang-switch__menu { transform: translate(50%, 0); }

.md-nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}
.md-nav__toggle span { width: 18px; height: 2px; background: var(--white); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; pointer-events: none; }
.md-nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.md-nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.md-nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.md-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 850;
  background: var(--grad-hero);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: calc(var(--nav-h) + 20px) 24px 40px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transform: perspective(1000px) rotateX(8deg) scale(0.96);
  transform-origin: top center;
  transition: opacity 0.5s var(--ease-out-soft), transform 0.5s var(--ease-out-soft), visibility 0.5s;
}
.md-mobile-menu.is-open { opacity: 1; visibility: visible; transform: perspective(1000px) rotateX(0) scale(1); }
.md-mobile-menu a { font-family: var(--font-display); font-size: 24px; color: var(--white); padding: 9px 0; font-weight: 700; }
.md-mobile-menu .md-btn { margin: 26px 0 20px; padding: 17px 30px; flex: none; }

@media (max-height: 680px) {
  .md-mobile-menu { gap: 0; padding-top: calc(var(--nav-h) + 10px); }
  .md-mobile-menu a { font-size: 19px; padding: 6px 0; }
  .md-mobile-menu .md-btn { margin: 16px 0 14px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.md-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--grad-hero);
  padding-top: var(--nav-h);
  overflow: hidden;
}

.md-hero__video-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.md-hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-hero__video-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,11,24,0.65), rgba(7,18,48,0.9));
}
@media (prefers-reduced-motion: reduce) {
  .md-hero__video { display: none; }
}

.md-hero__noise {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.4;
  pointer-events: none;
}

.md-hero__glow {
  position: absolute;
  width: 620px; height: 620px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.5;
  pointer-events: none;
}
.md-hero__glow--a { background: var(--blue-500); top: -180px; right: -120px; }
.md-hero__glow--b { background: var(--mint-400); bottom: -220px; left: -160px; opacity: 0.25; }

.md-hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; width: 100%; }

.md-hero__badge-wrap { position: relative; display: inline-block; margin-bottom: 22px; }

.md-hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 100px;
  background: rgba(255,255,255,0.07); border: 1px solid var(--glass-border);
  font-size: 12.5px; font-weight: 600; color: var(--ink-100);
  margin: 0 0 0 34px;
}
.md-hero__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint-400); box-shadow: 0 0 0 4px rgba(52,229,176,0.2); }

.md-hero h1 {
  font-size: clamp(34px, 5.4vw, 62px);
  line-height: 1.06;
  margin-bottom: 20px;
}
.md-hero h1 .grad { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* two-line entrance choreography, triggered by revealHero() once the loader dissolves */
.md-hero__line1, .md-hero__line2 {
  display: inline-block;
  opacity: 0;
  filter: blur(7px);
  transition: opacity 0.85s var(--ease-out-soft), transform 0.85s var(--ease-out-soft), filter 0.85s var(--ease-out-soft);
}
.md-hero__line1 { transform: translateY(-24px); }
.md-hero__line2 { transform: translateY(8px); }
.md-hero__line1.is-in, .md-hero__line2.is-in { opacity: 1; transform: translateY(0); filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .md-hero__line1, .md-hero__line2 { opacity: 1; transform: none; filter: none; transition: none; }
}

.md-hero p.lead { font-size: 18px; color: var(--ink-300); max-width: 520px; margin-bottom: 34px; }
.md-hero p.lead span {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  filter: blur(3px);
  transition: opacity 0.4s var(--ease-out-soft), transform 0.4s var(--ease-out-soft), filter 0.4s var(--ease-out-soft);
}
.md-hero p.lead.is-in span { opacity: 1; transform: translateY(0); filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .md-hero p.lead span { opacity: 1; transform: none; filter: none; transition: none; }
}

.md-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }

.md-hero__meta { display: flex; flex-wrap: wrap; gap: 28px; }
.md-hero__meta-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-300); }
.md-hero__meta-item i { color: var(--blue-400); }
.md-hero__meta-item strong { color: var(--white); }

.md-hero__scene {
  position: relative;
  height: 520px;
  perspective: 1400px;
}

.md-hero__stage {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  animation: heroFloat 9s ease-in-out infinite;
}

@keyframes heroFloat {
  0%, 100% { transform: rotateY(-3.5deg) rotateX(2.5deg) translateY(0); }
  50% { transform: rotateY(2.5deg) rotateX(-1.5deg) translateY(-8px); }
}

.md-hero__card {
  position: absolute;
  border-radius: 22px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-glow);
  padding: 18px;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: transform 2.6s var(--ease-arc), opacity 1s var(--ease-out-soft);
}
.md-hero__card--1 { width: 62%; height: 54%; top: 4%; left: 0; transform: translateZ(30px); }
.md-hero__card--2 { width: 42%; height: 52%; bottom: 4%; right: 0; transform: translateZ(90px) rotate(-3deg); } /* Meddata e-Care fotosu dik (portre) oldugu icin kutu da dikeye yakin */
.md-hero__card--3 { width: 36%; height: 26%; top: 8%; right: 0; transform: translateZ(140px) rotate(4deg); }
.md-hero__card--4 { width: 40%; height: 34%; bottom: 14%; left: 18%; transform: translateZ(170px) rotate(-5deg); }

/* otomatik "sirayla one cikma": initHeroSpotlight() JS ile 4 kartta dönüşümlü
   olarak eklenir/kaldirilir - kart yavaşça, hafif kavisli bir yörüngeyle
   (kucuk bir yanal kayma + derinlik degisimi ayni anda) ortaya dogru öne
   çikar, ayni gecis simetrik oldugu icin geri çekilirken de ayni yoldan
   döner. translateZ degeri kasitli olarak DİNLENME durumundaki TÜM
   kartlarin translateZ'inden (en fazla 170px) yuksek tutulur (240px) -
   böylece hangi kart spotlight olursa olsun her zaman digerlerinin
   KESİNLİKLE önünde kalir, arkada baska kart gorunmez.
   Her kartin taban boyutu farkli oldugu icin (bkz. yukarida --1..--4),
   öne çiktiginda hepsi AYNI (ama asiri buyumeyen) ortak bir hedef boyuta
   ulaşsin diye olcek (scale) degerleri ayri ayri hesaplandi - hedef, 4
   kartin ortalama boyutuna yakin - TEK (esit) bir carpanla (scale(N), N,N
   degil) buyutulup kucultuluyor ki rotate() ile birlesince olusan
   "shear" (egilme) bozulmasi olmasin - farkli x/y carpanlari resim
   kenarlarini ve yazi/köşe yuvarlakligini görünür şekilde bozuyordu. */
.md-hero__card.is-spotlight { z-index: 30; box-shadow: 0 30px 70px -18px rgba(0,0,0,0.65); }
.md-hero__card--1.is-spotlight { transform: translate(20px, 14px) translateZ(240px) scale(0.76); }
.md-hero__card--2.is-spotlight { transform: translate(-18px, -14px) translateZ(240px) rotate(-3deg) scale(0.95); }
.md-hero__card--3.is-spotlight { transform: translate(-14px, 10px) translateZ(240px) rotate(4deg) scale(1.25); }
.md-hero__card--4.is-spotlight { transform: translate(14px, -12px) translateZ(240px) rotate(-5deg) scale(1.2); }

/* click-to-focus: a card is pulled to the stage centre + enlarged via an
   inline transform computed in JS (initHeroFocus) so it works regardless
   of the card's own top/left/right/bottom origin - buraya özel, daha hizli/
   "pop" hissi veren gecis; spotlight'in yavas/soft gecisini degistirmez */
.md-hero__stage.has-focus { animation-play-state: paused; }
.md-hero__stage.has-focus .md-hero__card:not(.is-focused) { opacity: 0; pointer-events: none; }
.md-hero__card.is-focused { z-index: 50; box-shadow: 0 40px 90px -20px rgba(0,0,0,0.7); transition: transform 0.6s var(--ease-out-back), opacity 0.5s var(--ease-out-soft); }

/* artik foto kumesinin ustunde degil, sol metin sutununda "1997'den beri..."
   rozetinin sol ustune hafif egik binen kucuk bir amblem (bkz. .md-hero__badge-wrap) */
.md-hero__seal {
  position: absolute;
  top: -24px;
  left: -22px;
  z-index: 1;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--navy-800), var(--navy-950));
  border: 2px solid var(--cyan-400);
  box-shadow: 0 0 0 4px rgba(34,211,216,0.1), 0 10px 24px -10px rgba(0,0,0,0.65);
  transform: rotate(-9deg);
  animation: heroSealPulse 3.2s ease-in-out infinite;
  pointer-events: none;
}
.md-hero__seal-num {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(120deg, var(--cyan-400), var(--white));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.md-hero__seal-label {
  margin-top: 2px;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-300);
  text-align: center;
  line-height: 1.15;
}
@keyframes heroSealPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34,211,216,0.1), 0 10px 24px -10px rgba(0,0,0,0.65); }
  50% { box-shadow: 0 0 0 9px rgba(34,211,216,0.18), 0 10px 24px -10px rgba(0,0,0,0.65); }
}

.md-hero__card svg { width: 100%; height: 100%; }

.md-hero__card--photo { padding: 0; overflow: hidden; }
.md-hero__card--photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.03);
  transition: transform 8s var(--ease-out-soft);
}
.md-hero__stage:hover .md-hero__card--photo img { transform: scale(1.08); }
/* Meddata e-Care fotosu dik (portre) oldugu icin object-fit:cover ortasini
   kirpiyordu - onemli olan ust kisim (telefon ekrani), alt bos zemin */
.md-hero__card--2 img { object-position: top; }
.md-hero__card--photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,11,24,0) 40%, rgba(5,11,24,0.75) 100%);
  pointer-events: none;
}
.md-hero__card-tag {
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  width: fit-content;
  max-width: calc(100% - 28px);
  padding: 7px 13px;
  border-radius: 18px;
  background: rgba(5, 11, 24, 0.55);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  font-size: 11.5px; font-weight: 600; color: var(--white);
  line-height: 1.3;
}
.md-hero__card-tag i { color: var(--cyan-400); }
.md-hero__card.is-focused .md-hero__card-tag,
.md-hero__card.is-spotlight .md-hero__card-tag { opacity: 0; }

.md-hero__card-caption {
  position: absolute; left: 50%; bottom: -34px; z-index: 1;
  transform: translateX(-50%);
  width: max-content;
  max-width: 220px;
  text-align: center;
  line-height: 1.3;
  font-size: 13px; font-weight: 700; color: var(--white);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out-soft) 0.25s;
  pointer-events: none;
}
/* is-focused'da kart JS ile (initHeroFocus) dinamik/degisken bir oranda
   buyutuluyor - yazi eskiden kartin DISINA (bottom:-34px) taşiyordu, bu
   sabit ofset de kartla birlikte buyuk oranda büyüyünce ekran disina
   tasip hic görünmez oluyordu. Simdi kartin İÇİNDE, alt kenara yakin
   kaliyor - boylece kart ne kadar büyürse büyüsün yazi hep görünür kalir. */
.md-hero__card.is-focused .md-hero__card-caption {
  bottom: 18px;
  top: auto;
  opacity: 1;
  padding: 8px 16px;
  background: rgba(5, 11, 24, 0.75);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 100px;
  transition: opacity 0.4s var(--ease-out-soft) 0.3s;
}

/* spotlight sirasinda yazi kartin disina (altina) degil, kartin icinde alt
   kenara yakin gösterilir - sikisik kart kümesinde komsu kartlarin altinda
   kalip kaybolmasin diye (disina taşan bir "alt yazi" komşu kartlarca
   örtülüyordu). Kartin kendisi (parent) buyume/kucülme gecisini 2.6s'de
   tamamliyor; yazi bu sure boyunca gorunur olursa ters-olcek ile telafi
   ETSE bile gecis SIRASINDA (parent henuz hedef olcege ulasmamisken) bir
   an gerilip bozuk gorunebiliyordu. Bunu onlemek icin yazi, parent'in
   gecisi neredeyse bitene kadar (2.6s'nin buyuk kismi) gizli kalip en
   sonda hizlica belirir - boylece bozuk ara kareler hic görünmez. */
.md-hero__card.is-spotlight .md-hero__card-caption {
  bottom: 14px;
  top: auto;
  transform: translateX(-50%);
  opacity: 1;
  transition: opacity 0.4s var(--ease-out-soft) 1.8s, transform 2.6s var(--ease-arc);
  z-index: 3;
  padding: 8px 16px;
  background: rgba(5, 11, 24, 0.75);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 100px;
}
/* kartlar farkli oranda buyudugu icin (bkz. is-spotlight scale degerleri),
   yazinin gerilip bozulmamasi icin ters orantili (TEK carpanli, esit x/y)
   kucultme uygulanir - metin hangi kart olursa olsun hep ayni, dogal
   boyutta ve bozulmadan kalir */
.md-hero__card--1.is-spotlight .md-hero__card-caption { transform: translateX(-50%) scale(1.316); }
.md-hero__card--2.is-spotlight .md-hero__card-caption { transform: translateX(-50%) scale(1.053); }
.md-hero__card--3.is-spotlight .md-hero__card-caption { transform: translateX(-50%) scale(0.8); }
.md-hero__card--4.is-spotlight .md-hero__card-caption { transform: translateX(-50%) scale(0.833); }

.md-hero__scroll-cue {
  position: absolute;
  bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500);
}
.md-hero__scroll-cue .stick { width: 2px; height: 34px; border-radius: 2px; background: linear-gradient(var(--blue-400), transparent); animation: scrollCue 1.8s ease-in-out infinite; }
@keyframes scrollCue { 0% { transform: scaleY(0.3); transform-origin: top; opacity: 0.3; } 50% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(0.3); transform-origin: bottom; opacity: 0.3; } }

/* ==========================================================================
   ONE CIKAN URUN SLIDER (bkz. initFeatureSlider)
   ========================================================================== */

.md-feature-slider__track { position: relative; min-height: 380px; }
.md-feature-slide {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.md-feature-slide.is-active { display: grid; }
.md-feature-slide__text p { margin: 18px 0 28px; font-size: 16px; }
.md-feature-slide__visual {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  height: 340px;
  box-shadow: var(--shadow-glow);
  cursor: pointer;
  transition: transform 0.3s var(--ease-out-soft);
}
.md-feature-slide__visual:hover { transform: scale(1.02); }
.md-feature-slide__visual:active { transform: scale(0.98); }
.md-feature-slide__visual img { width: 100%; height: 100%; object-fit: cover; }
.md-feature-slider .md-container { position: relative; }
.md-feature-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  color: var(--white);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s, border-color 0.25s;
}
.md-feature-slider__arrow:hover { background: var(--grad-accent); border-color: transparent; transform: translateY(-50%) scale(1.08); }
.md-feature-slider__arrow--prev { left: -14px; }
.md-feature-slider__arrow--next { right: -14px; }
@media (max-width: 1200px) {
  .md-feature-slider__arrow--prev { left: 4px; }
  .md-feature-slider__arrow--next { right: 4px; }
}
@media (max-width: 900px) {
  .md-feature-slider__arrow { width: 38px; height: 38px; font-size: 16px; top: 120px; }
}

.md-feature-slider__dots { display: flex; justify-content: center; gap: 8px; margin-top: 30px; }
.md-feature-slider__dots button {
  width: 9px; height: 9px; border-radius: 50%; padding: 0;
  background: var(--glass-bg-light); border: 1px solid var(--glass-border);
  transition: width 0.3s, background 0.3s;
}
.md-feature-slider__dots button.is-active { width: 24px; border-radius: 5px; background: var(--grad-accent); border-color: transparent; }
@media (max-width: 900px) {
  .md-feature-slide { grid-template-columns: 1fr; }
  .md-feature-slide__visual { height: 240px; order: -1; }
}

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */

.md-trust {
  position: relative;
  padding: 26px 0;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--glass-border);
}
.md-trust__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 44px; }
.md-trust__hero {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 20px 6px 6px;
  border-right: 1px solid var(--glass-border);
  margin-right: 6px;
}
.md-trust__hero-num {
  font-family: var(--font-display);
  font-size: 34px; font-weight: 800;
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
}
.md-trust__hero-label { font-size: 13.5px; font-weight: 700; color: var(--white); }
.md-trust__item { display: flex; align-items: center; gap: 11px; font-size: 13.5px; font-weight: 600; color: var(--ink-300); }
.md-trust__item i {
  width: 34px; height: 34px; flex: none;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  color: var(--cyan-400);
  font-size: 14px;
}
@media (max-width: 600px) {
  .md-trust__row { gap: 12px 20px; }
  .md-trust__item { font-size: 12px; }
}

/* ==========================================================================
   ABOUT / SERVICES
   ========================================================================== */

.md-about-lead { font-size: 17px; max-width: 900px; margin: 0 auto 64px; text-align: center; }

.md-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.md-card--flip {
  perspective: 1400px;
  -webkit-perspective: 1400px;
  cursor: pointer;
  border-radius: 20px;
  overflow: hidden;
}
.md-card--flip:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 4px; }

.md-card-inner {
  position: relative;
  width: 100%;
  min-height: 300px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.75s var(--ease-out-back);
  will-change: transform;
}
.md-card--flip.is-flipped .md-card-inner { transform: rotateY(180deg); }
.md-card--flip:hover:not(.is-flipped) .md-card-inner { transform: rotateY(-8deg); }

.md-card-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) rotateY(0deg);
  transform: translateZ(0);
  overflow: hidden;
  border-radius: 20px;
  padding: 28px 24px;
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  display: flex; flex-direction: column;
  transition: background 0.4s, box-shadow 0.4s;
}
.md-card--flip:hover .md-card-face--front { background: rgba(255,255,255,0.1); box-shadow: var(--shadow-soft); }
.md-card-face--back {
  -webkit-transform: translateZ(0) rotateY(180deg);
  transform: rotateY(180deg);
  overflow-y: auto;
  background: linear-gradient(160deg, rgba(16,128,242,0.22), rgba(34,211,216,0.08));
}

.md-card__icon {
  width: 52px; height: 52px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-accent); color: var(--white); font-size: 20px;
  margin-bottom: 18px;
  box-shadow: 0 10px 24px -10px rgba(16,128,242,0.7);
  transition: transform 0.4s var(--ease-out-back);
}
.md-card--flip:hover .md-card__icon { transform: scale(1.1) rotate(-6deg); }

.md-card-face h4 { font-size: 17px; margin-bottom: 10px; }
.md-card-face p { font-size: 14px; margin: 0; }
.md-card-face--back p { font-size: 13.5px; }
.md-card-face a.md-inline-link { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--cyan-400); }
.md-card-face ul.md-cert-list { display: flex; flex-direction: column; gap: 8px; }
.md-card-face ul.md-cert-list a { font-size: 13.5px; color: var(--blue-300); font-weight: 500; }
.md-card-face ul.md-cert-list a:hover { color: var(--white); }

.md-card-flip-hint {
  margin-top: auto; padding-top: 14px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--cyan-400);
  display: flex; align-items: center; gap: 6px;
}
.md-card-back-btn {
  align-self: flex-start; margin-top: auto; padding: 8px 0 0;
  font-size: 11.5px; font-weight: 700; color: var(--cyan-400);
  background: none; border: none; display: flex; align-items: center; gap: 6px;
}

/* ==========================================================================
   PRODUCTS / HBYS TABS (with stethoscope 3D motif)
   ========================================================================== */

.md-products { position: relative; }

.md-tabbar {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 46px;
  flex-wrap: wrap;
}

.md-tabbar button {
  padding: 12px 24px;
  border-radius: 100px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.05);
  color: var(--ink-300);
  font-weight: 600;
  font-size: 14px;
  transition: all 0.35s var(--ease-out-soft);
}
.md-tabbar button.is-active {
  background: var(--grad-accent);
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 12px 30px -12px rgba(16,128,242,0.7);
}

.md-tab-panels { position: relative; min-height: 460px; transition: opacity 0.25s ease; }
.md-tab-panels.is-switching { opacity: 0; }

.md-tab-panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.md-tab-panel.is-active { display: grid; }

.md-tab-panel ul { display: flex; flex-direction: column; gap: 14px; margin: 22px 0 30px; }
.md-tab-panel ul li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  color: var(--ink-300);
}
.md-tab-panel ul li::before {
  content: '';
  position: absolute; left: 0; top: 6px;
  width: 14px; height: 14px; border-radius: 5px;
  background: var(--grad-accent);
}

.md-tab-visual {
  position: relative;
  height: 440px;
  perspective: 1300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* software-window mockup (replaces the earlier spinning icon-badge) */
.md-tab-window {
  position: relative;
  width: 100%;
  max-width: 380px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glow);
  transform: perspective(1300px) rotateY(35deg) rotateX(6deg) translateX(60px) scale(0.92);
  opacity: 0;
  transition: transform 1.1s var(--ease-out-back), opacity 1.1s var(--ease-out-soft);
  animation: tabWindowFloat 7s ease-in-out infinite;
}
.md-tab-panel.is-active .md-tab-window.is-visible {
  transform: perspective(1300px) rotateY(0deg) rotateX(0deg) translateX(0) scale(1);
  opacity: 1;
}
.md-tab-window__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid var(--glass-border);
}
.md-tab-window__bar span:not(.md-tab-window__title) {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,0.16);
}
.md-tab-window__bar span:nth-child(1) { background: #ff5f57; }
.md-tab-window__bar span:nth-child(2) { background: #febc2e; }
.md-tab-window__bar span:nth-child(3) { background: #28c840; }
.md-tab-window__title {
  margin-left: auto;
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--ink-300);
}
.md-tab-window__title i { color: var(--cyan-400); font-size: 12px; }
.md-tab-window__body { position: relative; padding: 22px 20px 26px; min-height: 220px; }

/* product photo (drop a real screenshot/photo in img/urunler/ — see md-tab-photo
   buttons in index.php) shown inside the window chrome, with a caption tag that
   reveals on hover (desktop) or tap (touch, via .is-open toggled in JS) */
.md-tab-window__body--photo { padding: 0; height: 340px; }
.md-tab-photo {
  position: relative;
  display: block;
  width: 100%; height: 340px;
  border: none; padding: 0; margin: 0;
  background: rgba(255,255,255,0.03);
  text-align: left;
}
.md-tab-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.03); }
.md-tab-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,11,24,0) 45%, rgba(5,11,24,0.8) 100%);
  pointer-events: none;
}
.md-tab-photo__tag {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border-radius: 100px;
  background: rgba(5, 11, 24, 0.6);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  font-size: 11.5px; font-weight: 600; color: var(--white);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease-out-soft), transform 0.35s var(--ease-out-soft);
}
.md-tab-photo__tag i { color: var(--cyan-400); }
.md-tab-photo:hover .md-tab-photo__tag,
.md-tab-photo.is-open .md-tab-photo__tag { opacity: 1; transform: translateY(0); }

@keyframes tabWindowFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}
@media (prefers-reduced-motion: reduce) {
  .md-tab-window { animation: none; }
}

/* Ozel Sigortalar tab: overlapping logo stack that fans out on hover */
.md-insurance-note { font-size: 14.5px; margin: 0 0 22px; }
.md-insurance-stack { display: flex; margin-bottom: 26px; padding-left: 18px; }
.md-insurance-logo {
  width: 54px; height: 54px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 3px solid var(--navy-950);
  box-shadow: 0 8px 18px -8px rgba(0,0,0,0.6);
  margin-left: -18px;
  transition: margin-left 0.45s var(--ease-out-back), transform 0.3s var(--ease-out-soft), box-shadow 0.3s;
}
.md-insurance-stack:hover .md-insurance-logo { margin-left: 6px; }
.md-insurance-logo:hover { transform: translateY(-6px); box-shadow: 0 14px 26px -10px rgba(0,0,0,0.7); }
.md-insurance-logo img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.md-insurance-logo--more {
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-bg-light);
  color: var(--ink-300);
  font-size: 18px; font-weight: 700;
}

/* ==========================================================================
   TEKNOLOJI (keyboard + falling letters)
   ========================================================================== */

.md-tech { background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%); }

.md-tech__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 60px; align-items: center; }

.md-tech__points { display: flex; flex-direction: column; gap: 20px; margin-top: 26px; }
.md-tech__point { display: flex; gap: 16px; align-items: flex-start; }
.md-tech__point i { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--glass-bg-light); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; color: var(--mint-400); }
.md-tech__point h5 { color: var(--white); font-size: 15px; margin: 0 0 4px; }
.md-tech__point p { font-size: 13.5px; margin: 0; }

.md-keyboard-stage {
  position: relative;
  height: 380px;
  perspective: 1400px;
}

.md-letters {
  position: absolute;
  inset: 0 0 40% 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  z-index: 2;
}

.md-letter {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--grad-accent);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 24px -10px rgba(16,128,242,0.7);
  transform: translateY(-260px) rotate(var(--rot, 0deg));
  opacity: 0;
}
.md-letters.is-visible .md-letter {
  animation: letterDrop 1s var(--ease-out-back) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes letterDrop {
  0% { transform: translateY(-260px) rotate(var(--rot, 0deg)); opacity: 0; }
  60% { opacity: 1; }
  75% { transform: translateY(6px) rotate(0deg); }
  88% { transform: translateY(-4px); }
  100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}

.md-keyboard {
  position: absolute;
  left: 50%; bottom: 10%;
  transform: translateX(-50%) perspective(1400px) rotateX(52deg);
  width: 92%;
  max-width: 460px;
  transform-origin: bottom center;
}
.md-keyboard svg { width: 100%; height: auto; filter: drop-shadow(0 40px 40px rgba(0,0,0,0.55)); }
.md-keyboard .keycap { fill: #12213f; stroke: rgba(255,255,255,0.08); }
.md-keyboard .keybase { fill: #0a1730; }

/* ==========================================================================
   REFERENCE / MAP
   ========================================================================== */

.md-map-panel { padding: 40px; }
.md-map-frame { border-radius: 18px; overflow: hidden; border: 1px solid var(--glass-border); }

.md-counter-row { display: flex; align-items: center; justify-content: center; gap: 34px; margin-top: 36px; flex-wrap: wrap; }
.md-counter {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 30px;
  border-radius: 18px;
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
}
.md-counter i { font-size: 30px; color: var(--blue-400); }
.md-counter__num { font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--white); }
.md-counter__label { font-size: 13px; color: var(--ink-300); }

/* ==========================================================================
   EVENTS TIMELINE
   ========================================================================== */

.md-timeline { position: relative; max-width: 920px; margin: 0 auto; }
.md-timeline::before {
  content: '';
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; transform: translateX(-50%);
  background: linear-gradient(var(--blue-500), transparent 90%);
  opacity: 0.4;
}
.md-timeline-item { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 0; margin-bottom: 46px; align-items: start; }
.md-timeline-item__dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--grad-accent);
  margin: 8px auto 0;
  box-shadow: 0 0 0 6px rgba(16,128,242,0.18);
  animation: timelineDotPulse 2.6s ease-in-out infinite;
}
@keyframes timelineDotPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(16,128,242,0.18); }
  50% { box-shadow: 0 0 0 11px rgba(16,128,242,0.1); }
}
@media (prefers-reduced-motion: reduce) { .md-timeline-item__dot { animation: none; } }
.md-timeline-card { padding: 24px; }
.md-timeline-item:nth-child(odd) .md-timeline-card { grid-column: 1; text-align: right; }
.md-timeline-item:nth-child(odd) .md-timeline-spacer { grid-column: 3; }
.md-timeline-item:nth-child(even) .md-timeline-card { grid-column: 3; }
.md-timeline-item:nth-child(even) .md-timeline-spacer { grid-column: 1; }
.md-timeline-card h4 { font-size: 16px; margin-bottom: 8px; }
.md-timeline-card p { font-size: 13.5px; margin: 0; }
.md-timeline-card .md-tl-date { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--cyan-400); text-transform: uppercase; margin-bottom: 8px; }
.md-timeline-card .md-tl-gallery { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.md-timeline-item:nth-child(odd) .md-tl-gallery { justify-content: flex-end; }
.md-timeline-card .md-tl-gallery img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid var(--glass-border); cursor: pointer; transition: transform 0.3s; }
.md-timeline-card .md-tl-gallery img:hover { transform: scale(1.08); }

/* ==========================================================================
   KADROMUZ (currently hidden — see index.php)
   ========================================================================== */

.md-kadro-card { max-width: 560px; margin: 0 auto; padding: 44px 40px; text-align: center; }
.md-kadro-card__icon {
  width: 60px; height: 60px; margin: 0 auto 18px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-accent); color: var(--white); font-size: 24px;
  box-shadow: 0 14px 30px -12px rgba(16,128,242,0.7);
}
.md-kadro-card p { margin-bottom: 24px; }

/* ==========================================================================
   TEAM / TESTIMONIALS (coverflow)
   ========================================================================== */

.md-hr-banner { text-align: center; max-width: 700px; margin: -20px auto 60px; padding: 22px 30px; font-size: 14.5px; }

.md-coverflow { position: relative; padding: 20px 0 10px; }
.md-coverflow__track {
  display: flex; gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 20px 10vw 30px;
  scrollbar-width: none;
}
.md-coverflow__track::-webkit-scrollbar { display: none; }

.md-story {
  scroll-snap-align: center;
  flex: none;
  width: min(560px, 82vw);
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 130px 1fr;
}
.md-story__photo { height: 100%; min-height: 220px; background-size: cover; background-position: center; }
.md-story__body { padding: 26px 24px; }
.md-story__body h5 { font-size: 16px; margin-bottom: 4px; }
.md-story__body .md-tag { font-size: 12px; color: var(--cyan-400); font-weight: 600; margin-bottom: 10px; display: block; }
.md-story__body p { font-size: 13.5px; margin: 0; max-height: 140px; overflow-y: auto; }

.md-coverflow__nav { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.md-coverflow__nav button {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--glass-bg-light); border: 1px solid var(--glass-border);
  color: var(--white); display: flex; align-items: center; justify-content: center;
  transition: background 0.3s, transform 0.3s;
}
.md-coverflow__nav button:hover { background: var(--grad-accent); transform: scale(1.06); }

/* ==========================================================================
   CLIENTS MARQUEE
   ========================================================================== */

.md-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.md-marquee__track { display: flex; gap: 60px; width: max-content; animation: marquee 34s linear infinite; }
.md-marquee:hover .md-marquee__track { animation-play-state: paused; }
.md-references-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.md-reference-logo {
  display: flex; align-items: center; justify-content: center;
  height: 90px;
  padding: 16px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 26px -12px rgba(0,0,0,0.5);
  transition: transform 0.35s var(--ease-out-soft), box-shadow 0.35s var(--ease-out-soft);
}
.md-reference-logo:hover { transform: scale(1.08); box-shadow: 0 16px 34px -12px rgba(0,0,0,0.6); }
.md-reference-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 900px) {
  .md-references-grid { grid-template-columns: repeat(2, 1fr); }
}

.md-partner-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 8px 18px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,0.5);
  transition: transform 0.3s;
}
.md-partner-chip:hover { transform: translateY(-3px); }
.md-marquee__track img { height: 100%; width: auto; max-width: 130px; object-fit: contain; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   FAQ
   ========================================================================== */

.md-faq { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.md-faq__item {
  border-radius: 16px;
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  transition: background 0.3s, border-color 0.3s;
}
.md-faq__item.is-open { background: rgba(255,255,255,0.09); border-color: rgba(124,192,255,0.3); }
.md-faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px;
  background: none; border: none;
  text-align: left;
  font-family: inherit;
  font-size: 15px; font-weight: 600; color: var(--white);
}
.md-faq__q i { color: var(--cyan-400); transition: transform 0.35s var(--ease-out-soft); flex: none; }
.md-faq__item.is-open .md-faq__q i { transform: rotate(180deg); }
.md-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease-out-soft);
}
.md-faq__a-inner { overflow: hidden; }
.md-faq__item.is-open .md-faq__a { grid-template-rows: 1fr; }
.md-faq__a p { padding: 0 22px 20px; margin: 0; font-size: 14px; color: var(--ink-300); }
.md-faq__a a.md-inline-link { color: var(--cyan-400); font-weight: 600; }

/* ==========================================================================
   CONTACT
   ========================================================================== */

.md-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; }
.md-contact__map { border-radius: 24px; overflow: hidden; min-height: 420px; }
.md-contact__map #map { width: 100%; height: 100%; min-height: 420px; }
.md-contact__form { padding: 40px; }

.md-field { position: relative; margin-bottom: 20px; }
.md-field input, .md-field textarea {
  width: 100%;
  padding: 16px 16px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.05);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14.5px;
  transition: border-color 0.3s, background 0.3s;
}
.md-field input::placeholder, .md-field textarea::placeholder { color: var(--ink-500); }
.md-field input:focus, .md-field textarea:focus { outline: none; border-color: var(--blue-400); background: rgba(255,255,255,0.08); }
.md-field textarea { min-height: 130px; resize: vertical; }

.md-contact__info { display: flex; flex-direction: column; gap: 16px; margin-bottom: 26px; }
.md-contact__info div { display: flex; gap: 12px; font-size: 14px; color: var(--ink-300); }
.md-contact__info i { color: var(--blue-400); margin-top: 3px; }

.md-form-msg { font-size: 13.5px; padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; display: none; }
.md-form-msg.is-success { display: block; background: rgba(52,229,176,0.14); color: var(--mint-400); }
.md-form-msg.is-error { display: block; background: rgba(204,0,0,0.14); color: #ff8080; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.md-footer { padding: 70px 0 26px; border-top: 1px solid var(--glass-border); background: var(--navy-950); }
.md-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; margin-bottom: 50px; }
.md-footer__brand img { height: 32px; margin-bottom: 14px; }
.md-footer__brand p { font-size: 13.5px; max-width: 280px; }
.md-footer h6 { color: var(--white); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px; }
.md-footer__links { display: flex; flex-direction: column; gap: 10px; }
.md-footer__links a { font-size: 14px; color: var(--ink-300); transition: color 0.25s; }
.md-footer__links a:hover { color: var(--white); }
.md-footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 26px; border-top: 1px solid var(--glass-border); flex-wrap: wrap; gap: 12px; }
.md-footer__bottom span { font-size: 12.5px; color: var(--ink-500); }
.md-footer__social { display: flex; gap: 10px; }
.md-footer__social a { width: 36px; height: 36px; border-radius: 50%; background: var(--glass-bg-light); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; transition: background 0.3s, transform 0.3s; }
.md-footer__social a:hover { background: var(--grad-accent); transform: translateY(-3px); }

/* ==========================================================================
   INDIRME MERKEZI — floating action button + slide panel
   ========================================================================== */

.md-fab {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 950;
  display: flex; align-items: center; gap: 10px;
  padding: 15px 22px 15px 18px;
  border-radius: 100px;
  background: var(--grad-accent);
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 18px 40px -14px rgba(16,128,242,0.75);
  border: none;
  animation: fabPulse 3.2s ease-in-out infinite;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out-soft), transform 0.3s var(--ease-out-soft);
}
/* sayfanin en basinda İndirme Merkezi zaten header'da (bkz. .md-nav__links-sep)
   gösterildigi icin bu FAB gizli baslar; asagi kaydirilinca görünür olur */
body.is-scrolled .md-fab { opacity: 1; transform: translateY(0); pointer-events: auto; }
.md-fab i { font-size: 17px; }
.md-fab .md-fab__badge { position: absolute; top: -6px; right: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--mint-400); box-shadow: 0 0 0 3px var(--navy-950); }
@keyframes fabPulse { 0%, 100% { box-shadow: 0 18px 40px -14px rgba(16,128,242,0.75); } 50% { box-shadow: 0 18px 50px -10px rgba(16,128,242,0.95); } }

.md-panel-overlay {
  position: fixed; inset: 0; z-index: 980;
  background: rgba(3, 8, 20, 0.7);
  backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease-out-soft), visibility 0.4s;
}
.md-panel-overlay.is-open { opacity: 1; visibility: visible; }

/* Duyuru pop-up (bkz. index.php - duyuru.png varsa acilista gosterilir) */
.md-announce-overlay {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(3, 8, 20, 0.72);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out-soft), visibility 0.5s;
}
.md-announce-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.md-announce {
  position: relative;
  max-width: min(560px, 92vw);
  max-height: 88vh;
  border-radius: 20px;
  overflow: hidden;
  background: var(--navy-900);
  box-shadow: 0 40px 90px -20px rgba(0,0,0,0.7);
  transform: scale(0.94) translateY(10px);
  transition: transform 0.5s var(--ease-out-soft);
}
.md-announce-overlay.is-open .md-announce { transform: scale(1) translateY(0); }
/* dik (portre) ya da yatay (manzara) foto farketmeksizin - genislik VE
   yukseklik siniri ayni anda uygulanir, tarayici oranini bozmadan hangisi
   daha kisitlayici ise ona gore kuçultur (bkz. .md-announce'daki max-width/
   max-height ile ayni mantik, img burada intrinsic boyutuna gore sigar) */
.md-announce img { display: block; max-width: min(560px, 92vw); max-height: 88vh; width: auto; height: auto; }
.md-announce__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(3, 8, 20, 0.6);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(4px);
  color: var(--white);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.md-announce__close:hover { background: rgba(3, 8, 20, 0.85); transform: scale(1.08); }

.md-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  z-index: 990;
  width: min(460px, 100vw);
  background: linear-gradient(180deg, var(--navy-800), var(--navy-950));
  border-left: 1px solid var(--glass-border);
  box-shadow: -30px 0 80px -30px rgba(0,0,0,0.6);
  transform: translateX(100%) scale(0.98);
  opacity: 0;
  transition: transform 0.6s var(--ease-out-soft), opacity 0.5s var(--ease-out-soft);
  display: flex; flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
.md-panel.is-open { transform: translateX(0) scale(1); opacity: 1; }

/* ambient animated background — position:fixed here is scoped to this panel's own
   box because the transform above makes .md-panel a containing block for it, so the
   blobs stay put while __head/__body scroll past on top */
.md-panel::before, .md-panel::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(70px);
  opacity: 0.6;
}
.md-panel::before {
  background: radial-gradient(360px 360px at 18% 12%, rgba(16,128,242,0.55), transparent 70%);
  animation: panelBlobA 17s ease-in-out infinite;
}
.md-panel::after {
  background: radial-gradient(320px 320px at 88% 82%, rgba(52,229,176,0.4), transparent 70%);
  animation: panelBlobB 21s ease-in-out infinite;
}
@keyframes panelBlobA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, 70px) scale(1.3); }
}
@keyframes panelBlobB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-60px, -50px) scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .md-panel::before, .md-panel::after { animation: none; }
}

.md-panel__head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 24px 26px; border-bottom: 1px solid var(--glass-border); }
.md-panel__head h3 { font-size: 18px; margin: 0; }
.md-panel__close { width: 36px; height: 36px; border-radius: 50%; background: var(--glass-bg-light); border: 1px solid var(--glass-border); color: var(--white); display: flex; align-items: center; justify-content: center; }
.md-panel__body { position: relative; z-index: 1; padding: 26px; flex: 1; }

.md-dl-welcome { font-size: 13.5px; margin-bottom: 18px; padding: 14px 16px; border-radius: 14px; background: var(--glass-bg-light); border: 1px solid var(--glass-border); }
.md-dl-welcome a { color: var(--cyan-400); font-weight: 600; }

.md-dl-surum {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
  padding: 13px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(16,128,242,0.22), rgba(34,211,216,0.1));
  border: 1px solid rgba(124,192,255,0.3);
  font-size: 13.5px; font-weight: 600; color: var(--white);
  transition: background 0.3s, transform 0.3s;
}
.md-dl-surum:hover { background: linear-gradient(135deg, rgba(16,128,242,0.32), rgba(34,211,216,0.16)); transform: translateY(-1px); }
.md-dl-surum i:first-child { color: var(--cyan-400); font-size: 16px; }
.md-dl-surum span { flex: 1; }
.md-dl-surum i:last-child { color: var(--ink-300); }

.md-dl-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 10px; }
.md-dl-table th { text-align: left; padding: 10px 8px; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-500); border-bottom: 1px solid var(--glass-border); }
.md-dl-table td { padding: 12px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); color: var(--ink-100); vertical-align: middle; }
.md-dl-table tr:hover td { background: rgba(255,255,255,0.03); }
.md-dl-table a.md-dl-name { color: var(--ink-100); font-weight: 500; }
.md-dl-table a.md-dl-name:hover { color: var(--blue-300); }
.md-dl-table a.md-dl-btn { display: inline-flex; width: 34px; height: 34px; border-radius: 10px; background: var(--grad-accent); align-items: center; justify-content: center; color: var(--white); }
.md-dl-scroll { max-height: 46vh; overflow-y: auto; }

.md-moddet__loading { text-align: center; padding: 40px 0; color: var(--ink-500); font-size: 13.5px; }

.md-moddet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.md-moddet__head h4 { margin: 0; font-size: 18px; color: var(--white); }
.md-moddet__badge {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(34,211,216,0.12);
  border: 1px solid rgba(34,211,216,0.3);
  color: var(--cyan-400);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.md-moddet__current {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 22px;
}
.md-moddet__meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-500); margin-bottom: 10px; }
.md-moddet__desc { font-size: 13.5px; line-height: 1.6; color: var(--ink-300); margin: 0 0 16px; white-space: pre-wrap; }
.md-moddet__current .md-btn.is-disabled { opacity: 0.4; pointer-events: none; }

.md-moddet__history-title { display: block; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 10px; }
.md-moddet__ver-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.md-moddet__ver {
  padding: 8px 14px;
  border-radius: 100px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  color: var(--ink-300);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.25s, background 0.25s, border-color 0.25s;
}
.md-moddet__ver:hover { color: var(--white); background: rgba(255,255,255,0.08); }
.md-moddet__ver.is-active { color: var(--navy-950); background: var(--cyan-400); border-color: var(--cyan-400); }

.md-recaptcha-wrap { margin: 6px 0 18px; }
.md-panel__foot-link { text-align: center; margin-top: 18px; font-size: 13px; }
.md-panel__foot-link a { color: var(--cyan-400); font-weight: 600; }
.md-panel__error { background: rgba(204,0,0,0.16); color: #ff9c9c; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600; text-align: center; margin-bottom: 16px; }

.md-panel__intro { text-align: center; margin-bottom: 26px; }
.md-panel__intro-icon {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-accent);
  color: var(--white); font-size: 22px;
  box-shadow: 0 14px 30px -12px rgba(16,128,242,0.7);
}
.md-panel__intro p { font-size: 13.5px; margin: 0; }

/* devtools-blocked toast (see mdDevtoolsUyariGoster in index.php) */
#mdDevtoolsToast {
  position: fixed;
  bottom: 24px; left: 50%;
  z-index: 200000;
  padding: 12px 22px;
  border-radius: 100px;
  background: rgba(5, 11, 24, 0.92);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  color: var(--white);
  font-size: 13.5px; font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 0.35s var(--ease-out-soft), transform 0.35s var(--ease-out-soft);
}
#mdDevtoolsToast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   MOBIL / DOKUNMATIK PERFORMANS
   Bulanik (blur) katmanlar ve surekli calisan animasyonlar mobil GPU'larda
   pahali oluyor ve "akmiyor" hissi veriyor - burada agirliklarini azaltiyoruz.
   ========================================================================== */

@media (max-width: 900px), (pointer: coarse) {
  :root { --glass-blur: blur(6px); }
  .md-section--glow::before, .md-section--glow::after {
    filter: blur(50px);
    animation: none;
  }
  .md-code-rain, .md-retro-pc { display: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .md-cards { grid-template-columns: repeat(2, 1fr); }
  .md-tech__grid { grid-template-columns: 1fr; }
  .md-keyboard-stage { height: 320px; }
}

@media (max-width: 900px) {
  .md-nav__links { display: none; }
  .md-nav__toggle { display: flex; }
  /* mobilde header linki zaten yok (hamburger menude ayri bir buton var) -
     FAB scroll durumuna bakmaksizin hep görünür kalir */
  .md-fab { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .md-hero__grid { grid-template-columns: 1fr; text-align: center; }
  .md-hero p.lead { margin-left: auto; margin-right: auto; }
  .md-hero__actions, .md-hero__meta { justify-content: center; }
  .md-hero__scene { height: 380px; margin-top: 20px; }

  /* mobilde 4'lu, üst üste binen 3D küme yerine tek karta odakli, otomatik
     gecisli sade bir slider'a dönüsür - initHeroSpotlight() zaten hangi
     kartin "is-spotlight" oldugunu dönüsümlü olarak isaretliyor, burada onu
     sadece gösterip/gizleyerek bir slaydin yerine kullaniyoruz. */
  .md-hero__stage { animation: none; }
  .md-hero__card {
    box-sizing: border-box;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    transform: none !important;
    opacity: 0;
    z-index: 1;
    transition: opacity 1.1s var(--ease-out-soft);
  }
  .md-hero__card--1 { opacity: 1; z-index: 2; } /* JS calisana kadar / JS'siz durumda ilk kart görünür */
  .md-hero__card.is-spotlight { opacity: 1; z-index: 2; }
  .md-hero__card-caption { transform: translateX(-50%) !important; }
  .md-tab-panel { grid-template-columns: 1fr; }
  .md-tab-visual { height: 320px; order: -1; }
  .md-tab-window__body--photo, .md-tab-photo { height: 250px; }
  .md-contact__grid { grid-template-columns: 1fr; }
  .md-footer__grid { grid-template-columns: 1fr 1fr; }
  .md-timeline::before { left: 20px; }
  .md-timeline-item { grid-template-columns: 40px 1fr; }
  .md-timeline-item__dot { margin: 8px 0 0; }
  .md-timeline-item:nth-child(odd) .md-timeline-card,
  .md-timeline-item:nth-child(even) .md-timeline-card { grid-column: 2; text-align: left; }
  .md-timeline-item:nth-child(odd) .md-tl-gallery { justify-content: flex-start; }
  .md-timeline-item .md-timeline-spacer { display: none; }
}

@media (max-width: 600px) {
  .md-section { padding: 80px 0; }
  .md-cards { grid-template-columns: 1fr; }
  .md-footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .md-story { grid-template-columns: 1fr; width: 88vw; }
  .md-story__photo { min-height: 160px; }
  .md-fab span.md-fab__label { display: none; }
  .md-fab { padding: 16px; border-radius: 50%; }
  .md-panel { width: 100vw; }
  .md-hero__seal { width: 52px; height: 52px; }
  .md-hero__seal-num { font-size: 16px; }
  .md-hero__seal-label { font-size: 6px; }
  .md-insurance-logo { width: 44px; height: 44px; }
}