/* ============================================
   meshitkhan.css — Kişisel Profil Sayfası
   Tailwind CSS + Custom overrides
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Manrope:wght@400;600;700;800&display=swap');

:root {
  --blue:        #1A6FBA;
  --blue-dark:   #0A4D8C;
  --blue-pale:   #E8F4FD;
  --green:       #1A9266;
  --green-dark:  #0D6B4A;
  --teal:        #0EA5A0;
  --nav-h:       64px;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden !important;
  max-width: 100%;
  width: 100%;
  position: relative;
}
body {
  font-family: 'Inter', -apple-system, sans-serif;
  overflow-x: hidden !important;
  max-width: 100%;
  width: 100%;
  position: relative;
  touch-action: pan-y;
}
.font-manrope { font-family: 'Manrope', 'Inter', sans-serif; }

/* ── NAV ── */
.mk-nav { height: var(--nav-h); transition: box-shadow 0.25s ease; }
.mk-nav.scrolled { box-shadow: 0 4px 24px rgba(10,77,140,.1); }
.pt-16 { padding-top: var(--nav-h); }

/* ── HERO ── */
.mk-hero-bg {
  background: linear-gradient(150deg, #F0F8FF 0%, #E6F8F1 45%, #F0F8FF 100%);
}
.mk-orb { pointer-events: none; }
.orb1 { width:480px; height:480px; background:radial-gradient(circle,rgba(26,111,186,.12),transparent 65%); top:-100px; right:-60px; }
.orb2 { width:320px; height:320px; background:radial-gradient(circle,rgba(26,146,102,.1),transparent 65%); bottom:-60px; left:-40px; }

/* ── GRADIENT TEXT ── */
.mk-gradient-text {
  background: linear-gradient(135deg, var(--blue), var(--green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── AVATAR ── */
.mk-avatar, .mk-avatar-sm {
  background: linear-gradient(135deg, var(--blue), var(--green));
}

/* ── DOT CHIP ── */
.mk-dot { background: linear-gradient(135deg, var(--blue), var(--green)); }

/* ── BUTTONS ── */
.mk-btn-primary {
  background: linear-gradient(135deg, var(--blue), var(--green));
  box-shadow: 0 4px 16px rgba(26,111,186,.3);
  border: none;
}
.mk-btn-primary:hover {
  background: linear-gradient(135deg, var(--blue-dark), var(--green-dark));
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(26,111,186,.4);
}

/* ── CARD ── */
.mk-card {
  background: #fff;
  border: 1px solid rgba(10,77,140,.08);
  border-radius: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mk-card:hover { box-shadow: 0 8px 28px rgba(10,77,140,.1); }

/* ── EYEBROW ── */
.mk-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--green);
  background: #E6F8F1;
  padding: 4px 14px; border-radius: 100px;
}

/* ── TIMELINE ── */
.mk-timeline::before {
  content: '';
  position: absolute;
  left: 28px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--blue), var(--green));
  border-radius: 2px;
}

/* Timeline dot colors */
.tl-red    { background: linear-gradient(135deg, #E83030, #c0392b); }
.tl-amber  { background: linear-gradient(135deg, #E88C00, #c67c00); }
.tl-teal   { background: linear-gradient(135deg, #0EA5A0, #0D6B4A); }
.tl-blue   { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); }
.tl-purple { background: linear-gradient(135deg, #7C3AED, #5B21B6); }
.tl-green  { background: linear-gradient(135deg, var(--green), var(--green-dark)); }
.tl-pink   { background: linear-gradient(135deg, #EC4899, #BE185D); }

/* ── ACHIEVEMENT BOX ── */
.mk-achievement {
  background: linear-gradient(135deg, var(--blue), var(--green));
  border-radius: 12px;
}

/* ── TAGS ── */
.mk-tag {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 4px;
  background: var(--blue-pale); color: var(--blue-dark);
}
.mk-tag-green  { background: #E6F8F1; color: var(--green-dark); }
.mk-tag-teal   { background: #E0F7F6; color: #0D5E5A; }
.mk-tag-amber  { background: #FEF3C7; color: #92400E; }
.mk-tag-purple { background: #EDE9FE; color: #5B21B6; }

/* ── CTA BLOCK ── */
.mk-cta-block {
  background: linear-gradient(135deg, var(--blue-dark), var(--green-dark));
}

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── STAGGER ── */
.tl-item:nth-child(1) { transition-delay: 0ms; }
.tl-item:nth-child(2) { transition-delay: 60ms; }
.tl-item:nth-child(3) { transition-delay: 120ms; }
.tl-item:nth-child(4) { transition-delay: 180ms; }
.tl-item:nth-child(5) { transition-delay: 240ms; }
.tl-item:nth-child(6) { transition-delay: 300ms; }
.tl-item:nth-child(7) { transition-delay: 360ms; }

/* ── MOBILE NAV ── */
@media (max-width: 767px) {
  #navLinks {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0; bottom: 0;
    background: white;
    flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px; z-index: 99;
  }
  #navLinks.open { display: flex !important; }
  #navLinks a { font-size: 18px; padding: 12px 24px; }

  .mk-timeline::before { left: 20px; }
  .tl-dot { width: 40px !important; height: 40px !important; font-size: 14px !important; border-radius: 10px !important; }
  .tl-item { gap: 16px !important; }
}

@media (max-width: 480px) {
  .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}