/* hertakvim — Tanıtım (landing) sayfası stilleri. Yalnızca landing.html kullanır.
   Tek ekranlık minimalist hero: başlık + tek CTA + 4 özellik kartı (Takvim, Tablolar, Defter,
   Ekip) — sayfa aşağı kaymaz (yeterli yükseklikte). Topbar: ortak css/topbar.css. */
:root {
  --bg: #ffffff;
  --fg: #1a1d29;
  --muted: #6b7280;
  --line: #e7eaf2;
  --tint: #f5f6fb;
  --accent: #4f46e5;
  --accent-deep: #312e81;
  --c-blue: #2563eb;
  --c-green: #16a34a;
  --c-amber: #ea8a0c;
  --c-purple: #9333ea;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  color: var(--fg);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
  overflow: hidden;              /* tek ekran: aşağı kaydırma yok */
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.btn {
  display: inline-block; border: none; cursor: pointer;
  font-size: 15px; font-weight: 500; font-family: inherit;
  padding: 9px 16px; border-radius: 999px; transition: .15s ease;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 10px 24px -12px rgba(79,70,229,.7); }
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-1px); }
.btn-lg { padding: 13px 28px; font-size: 16px; }

/* ---------- Hero ---------- */
.hero {
  flex: 1; min-height: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(28px, 6vh, 64px);
  padding: 24px 24px clamp(24px, 5vh, 48px);
}
.hero__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 45% at 50% 18%, rgba(79,70,229,.12), transparent 70%),
    radial-gradient(35% 30% at 85% 90%, rgba(147,51,234,.06), transparent 70%);
}
.hero__head { text-align: center; }
.hero h1 {
  font-size: clamp(34px, 6.2vh, 60px); line-height: 1.06; letter-spacing: -0.035em; font-weight: 800;
  margin-bottom: 14px;
}
.grad {
  background: linear-gradient(120deg, var(--accent), #8b83f5);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub { font-size: clamp(15px, 2.1vh, 18px); color: var(--muted); margin-bottom: clamp(18px, 3.4vh, 28px); }

/* ---------- Özellik kartları ---------- */
.feats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  width: 100%; max-width: 1040px;
}
.feat {
  background: rgba(255,255,255,.75);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 14px 14px 16px;
  box-shadow: 0 1px 2px rgba(26,29,41,.04);
  transition: transform .2s ease, box-shadow .2s ease;
}
.feat:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -20px rgba(49,46,129,.3); }
.feat h2 { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; margin-top: 14px; }
.feat p { font-size: 13.5px; color: var(--muted); }

/* Kart görseli: saf CSS küçük önizleme */
.feat__art {
  height: clamp(96px, 17vh, 150px);
  background: var(--tint); border-radius: 12px;
  display: grid; place-items: center; overflow: hidden;
  padding: 12px;
}

/* Takvim: mini ay ızgarası */
.mcal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; width: 100%; max-width: 190px; }
.mcal i {
  aspect-ratio: 1; border-radius: 5px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--line); position: relative;
}
.mcal i.d1::after, .mcal i.d2::after, .mcal i.d3::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 22%; height: 3px; border-radius: 2px;
}
.mcal i.d1::after { background: var(--c-blue); }
.mcal i.d2::after { background: var(--c-green); }
.mcal i.d3::after { background: var(--c-purple); }
.mcal i.today { background: var(--accent); box-shadow: none; }

/* Tablo: satırlar + durum hapları */
.mtab { width: 100%; max-width: 200px; display: flex; flex-direction: column; gap: 7px; }
.mtab__row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border-radius: 7px; padding: 7px 9px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.mtab__row b { height: 6px; width: 60%; border-radius: 3px; background: #d9dce6; }
.mtab__row b.w2 { width: 45%; } .mtab__row b.w3 { width: 70%; }
.pill { width: 34px; height: 10px; border-radius: 999px; flex: none; }
.pill--done { background: color-mix(in srgb, var(--c-green) 70%, #fff); }
.pill--doing { background: color-mix(in srgb, var(--c-amber) 70%, #fff); }
.pill--todo { background: color-mix(in srgb, var(--c-blue) 55%, #fff); }

/* Defter: başlık + satırlar + yapılacaklar */
.mnote {
  width: 100%; max-width: 180px; background: #fff; border-radius: 9px; padding: 12px;
  box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 6px;
}
.mnote b { height: 8px; width: 55%; border-radius: 3px; background: var(--fg); opacity: .8; margin-bottom: 3px; }
.mnote i { display: block; height: 5px; width: 100%; border-radius: 3px; background: #dfe2ea; }
.mnote i.w2 { width: 70%; } .mnote i.w3 { width: 55%; }
.mnote__check { display: flex; align-items: center; gap: 6px; }
.mnote__check em { width: 9px; height: 9px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px #c3c7d3; flex: none; }
.mnote__check em.on { background: var(--accent); box-shadow: none; }
.mnote__check i { width: 65%; }

/* Ekip: üst üste avatarlar + atama satırları */
.mteam { width: 100%; max-width: 190px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.mteam__avatars { display: flex; margin-bottom: 4px; }
.mteam__avatars span {
  width: 32px; height: 32px; border-radius: 50%; margin-left: -8px;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff;
  border: 2px solid var(--tint);
}
.mteam__avatars span:first-child { margin-left: 0; }
.a1 { background: var(--accent); } .a2 { background: var(--c-green); } .a3 { background: var(--c-amber); }
.mteam__avatars .a4 { background: #fff; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.mteam__row {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 7px; padding: 6px 8px; box-shadow: inset 0 0 0 1px var(--line);
}
.mteam__row span { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.mteam__row i { height: 6px; width: 70%; border-radius: 3px; background: #d9dce6; }
.mteam__row i.w2 { width: 50%; }

/* ---------- Çöp adam (js/landing.js) — kartların üst kenarında gezer ---------- */
.feats { position: relative; }
.walker {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: 26px; height: 40px; will-change: transform;
  transform-origin: 13px 40px;               /* ayak ortası: yatarken/takla atarken bu noktadan döner */
  cursor: pointer; touch-action: manipulation;
  transition: opacity .35s ease;
}
.walker::before { content: ""; position: absolute; inset: -6px -8px; }   /* vurması kolay olsun: biraz daha geniş isabet alanı */
.walker.is-return { opacity: 0; }
.walker svg { display: block; overflow: visible; transition: transform .25s ease; }
.walker.is-left svg { transform: scaleX(-1); }
.walker line { stroke: var(--fg); stroke-width: 2.4; stroke-linecap: round; }
.walker__head { fill: var(--bg); stroke: var(--fg); stroke-width: 2.4; }
.walker__arm { transform-origin: 13px 14px; }
.walker__leg { transform-origin: 13px 24px; }
.walker__arm--a { transform: rotate(18deg); }  .walker__arm--b { transform: rotate(-18deg); }
.walker__leg--a { transform: rotate(8deg); }   .walker__leg--b { transform: rotate(-8deg); }
.walker.is-walking .walker__leg--a, .walker.is-walking .walker__arm--b { animation: walker-swing .5s ease-in-out infinite alternate; }
.walker.is-walking .walker__leg--b, .walker.is-walking .walker__arm--a { animation: walker-swing .5s ease-in-out infinite alternate-reverse; }
.walker.is-jumping .walker__leg--a { transform: rotate(38deg); }
.walker.is-jumping .walker__leg--b { transform: rotate(-24deg); }
.walker.is-jumping .walker__arm--a { transform: rotate(140deg); }
.walker.is-jumping .walker__arm--b { transform: rotate(-140deg); }
/* Vurulunca: kollar havada, bacaklar açık (savrulma/takla); yerde: gevşek uzanmış */
.walker.is-hit .walker__arm--a { transform: rotate(150deg); }
.walker.is-hit .walker__arm--b { transform: rotate(-120deg); }
.walker.is-hit .walker__leg--a { transform: rotate(30deg); }
.walker.is-hit .walker__leg--b { transform: rotate(-30deg); }
.walker.is-down .walker__arm--a { transform: rotate(60deg); }
.walker.is-down .walker__arm--b { transform: rotate(-40deg); }
.walker.is-down .walker__leg--a { transform: rotate(14deg); }
.walker.is-down .walker__leg--b { transform: rotate(-10deg); }
.walker__arm, .walker__leg { transition: transform .15s ease; }
@keyframes walker-swing { from { transform: rotate(28deg); } to { transform: rotate(-28deg); } }

/* Konuşma balonu (çöp adamın üstünde bulunduğu karta göre) */
.walker-bubble {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
  width: max-content; max-width: 230px;
  padding: 8px 12px; border-radius: 14px 14px 14px 4px;   /* sol alt köşe: kuyruk (çöp adam solda) */
  background: #fff; color: var(--fg);
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px -14px rgba(49,46,129,.35);
  font-size: 13px; line-height: 1.4; font-weight: 500;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
  will-change: transform;
}
.walker-bubble.walker-bubble--left { border-radius: 14px 14px 4px 14px; }   /* çöp adam sağda */
/* Kartın üzerine (çöp adamın altına) alınmış balon: kuyruk üst köşede */
.walker-bubble.walker-bubble--below { border-radius: 4px 14px 14px 14px; }
.walker-bubble.walker-bubble--left.walker-bubble--below { border-radius: 14px 4px 14px 14px; }
.walker-bubble.is-show { opacity: 1; visibility: visible; }

/* ---------- Duyarlı ---------- */
@media (max-width: 860px) {
  .feats { grid-template-columns: repeat(2, 1fr); max-width: 560px; gap: 12px; }
  .feat__art { height: clamp(96px, 14vh, 130px); padding: 8px; }
  .feat__art > * { transform: scale(.82); }   /* önizleme kartın küçük görseline sığsın */
}
@media (max-width: 520px) {
  .hero { padding: 16px 16px 20px; gap: 48px; }   /* CTA ile kartlar arasında çöp adama yer */
  .feat { padding: 10px 10px 12px; border-radius: 14px; }
  .feat h2 { font-size: 15px; margin-top: 10px; }
  .feat p { font-size: 12.5px; }
  .walker-bubble { max-width: 190px; font-size: 12px; padding: 7px 10px; }
  .feat__art { height: 104px; padding: 4px; }
  .feat__art > * { transform: scale(.7); }
}
/* Ekran çok kısaysa içerik kesilmesin: kaydırmaya izin ver (normal ekranlarda tek ekran kalır) */
@media (max-height: 640px), (max-width: 860px) and (max-height: 760px) {
  body { overflow: auto; }
  .hero { justify-content: flex-start; }
}