/* Maren Robotics portalı — giriş ve projeler. Marka laciverti #001e5e. */
:root {
  --lacivert: #001e5e;
  --lacivert-koyu: #00113a;
  --lacivert-acik: #e8eef8;
  --zemin: #f3f6fb;
  --kart: #ffffff;
  --metin: #0f1b33;
  --ikincil: #53627c;
  --cizgi: #d9e1ee;
  --vurgu: #1f6feb;
  --basari: #1a9e6a;
  --hata: #c62f3a;
  --golge: 0 1px 2px rgba(0, 20, 60, .06), 0 8px 24px rgba(0, 20, 60, .08);
  --yazi: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--yazi); color: var(--metin); background: var(--zemin); -webkit-font-smoothing: antialiased; }
a { color: inherit; }

/* ── Giriş ─────────────────────────────────────────── */
.giris-sayfa {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 16px; background-color: var(--lacivert-koyu);
  /* sonar halkaları: markanın deniz altı işine gönderme, çok soluk */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='1400' viewBox='0 0 1400 1400'%3E%3Cg fill='none' stroke='%236FB6FF' stroke-opacity='.10'%3E%3Ccircle cx='700' cy='700' r='160'/%3E%3Ccircle cx='700' cy='700' r='320' stroke-dasharray='10 12'/%3E%3Ccircle cx='700' cy='700' r='480'/%3E%3Ccircle cx='700' cy='700' r='640' stroke-dasharray='10 12'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center; background-repeat: no-repeat; background-size: 1400px 1400px;
}
.giris-logo { width: min(260px, 64vw); height: auto; margin-bottom: 32px; }
.giris-kart {
  width: 100%; max-width: 400px; background: var(--kart); border-radius: 16px; padding: 32px 28px 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.giris-kart h1 { margin: 0 0 6px; font-size: 22px; font-weight: 650; letter-spacing: -.01em; }
.giris-kart .alt { margin: 0 0 24px; color: var(--ikincil); font-size: 14.5px; line-height: 1.5; }
.alan { display: block; margin-bottom: 16px; }
.alan span { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: var(--metin); }
.alan input {
  width: 100%; height: 46px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--metin);
  border: 1.5px solid var(--cizgi); border-radius: 10px; background: #fbfcfe; transition: border-color .15s, box-shadow .15s;
}
.alan input:focus { outline: none; border-color: var(--vurgu); box-shadow: 0 0 0 4px rgba(31, 111, 235, .15); background: #fff; }
.sifre-kutu { position: relative; }
.sifre-kutu input { padding-right: 76px; }
.goster {
  position: absolute; right: 6px; top: 6px; height: 34px; padding: 0 10px; border: 0; border-radius: 7px;
  background: transparent; color: var(--ikincil); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.goster:hover { background: var(--lacivert-acik); color: var(--lacivert); }
.dugme {
  width: 100%; height: 48px; border: 0; border-radius: 10px; background: var(--lacivert); color: #fff;
  font: inherit; font-size: 16px; font-weight: 650; cursor: pointer; margin-top: 6px; transition: background .15s, transform .05s;
}
.dugme:hover { background: #0a2f82; }
.dugme:active { transform: translateY(1px); }
.dugme:disabled { opacity: .65; cursor: progress; }
.hata {
  display: none; margin: 0 0 16px; padding: 10px 12px; border-radius: 9px; font-size: 14px; line-height: 1.45;
  background: #fdecee; color: var(--hata); border: 1px solid #f5c2c7;
}
.hata.acik { display: block; }
.giris-alt { margin-top: 28px; color: rgba(255, 255, 255, .55); font-size: 13px; text-align: center; }

/* ── Projeler ──────────────────────────────────────── */
.ust {
  background: var(--lacivert); color: #fff; padding: 0 16px;
}
.ust-ic { max-width: 1120px; margin: 0 auto; height: 68px; display: flex; align-items: center; gap: 16px; }
.ust-logo { height: 34px; width: auto; }
.ust-bosluk { flex: 1; }
.kullanici { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.kullanici-rozet {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .16);
  display: flex; align-items: center; justify-content: center; font-weight: 700; text-transform: uppercase;
}
.cikis {
  height: 36px; padding: 0 14px; border-radius: 9px; border: 1.5px solid rgba(255, 255, 255, .45); background: transparent;
  color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.cikis:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }

.govde { max-width: 1120px; margin: 0 auto; padding: 36px 16px 64px; }
.govde h1 { margin: 0 0 6px; font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.govde .alt { margin: 0 0 28px; color: var(--ikincil); font-size: 15.5px; }

.projeler { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.proje {
  display: flex; flex-direction: column; text-decoration: none; background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: 16px; padding: 22px; box-shadow: var(--golge); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.proje:hover { transform: translateY(-2px); border-color: #b7c6de; box-shadow: 0 2px 4px rgba(0, 20, 60, .06), 0 14px 34px rgba(0, 20, 60, .12); }
.proje:focus-visible { outline: 3px solid var(--vurgu); outline-offset: 3px; }
.proje-bas { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.proje-simge { width: 72px; height: 72px; border-radius: 18px; flex: none; box-shadow: 0 6px 16px rgba(0, 30, 94, .25); }
.proje h2 { margin: 0 0 4px; font-size: 19px; font-weight: 700; }
.etiket {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--basari);
  background: #e6f6ef; border-radius: 999px; padding: 3px 10px;
}
.etiket::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.proje p { margin: 0 0 18px; color: var(--ikincil); font-size: 14.5px; line-height: 1.55; flex: 1; }
.proje-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--cizgi); padding-top: 14px; }
.platformlar { color: var(--ikincil); font-size: 13px; }
.ac { font-weight: 700; color: var(--lacivert); font-size: 15px; }
.proje:hover .ac { color: var(--vurgu); }

@media (max-width: 520px) {
  .giris-kart { padding: 26px 20px 22px; }
  .ust-logo { height: 28px; }
  .kullanici-ad { display: none; }
  .govde h1 { font-size: 24px; }
}