/* =====================================================
   Sidien Web App — Auth + Dashboard ortak stiller
   Landing page tasarım diliyle tutarlı (Signal & Wire)
   ===================================================== */
:root {
  --paper: #FAF9F5; --panel: #F2F0EA; --ink: #171A1F;
  --ink-soft: #5A6069; --ink-faint: #8B9099; --line: #E4E1D8;
  --line-strong: #CFCBBF;
  --amber: #ED9410; --amber-deep: #8F5A00; --amber-soft: #FBEED6;
  --hit: #2E9E44; --hit-deep: #1F7A33; --hit-soft: #E3F3E6;
  --block: #D64545; --block-soft: #FBE7E7;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 6px;
  --container: 1120px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--ink); background: var(--paper);
       line-height: 1.65; font-size: 16.5px; -webkit-font-smoothing: antialiased; }
a { color: var(--amber-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3 { line-height: 1.2; letter-spacing: -.015em; font-weight: 650; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ── Nav ── */
nav { position: sticky; top: 0; z-index: 50;
      background: rgba(250,249,245,.92); backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.nav-logo { height: 24px; color: var(--ink); display: block; }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { font-family: var(--mono); font-size: 13.5px; color: var(--ink-soft); }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links-secondary { font-family: var(--mono); font-size: 13.5px; }
@media (max-width: 860px) { .nav-links a:not(.nav-cta):not(.btn) { display: none; } }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
       font-family: var(--sans); font-weight: 600; font-size: 15.5px;
       padding: 12px 22px; border-radius: var(--radius);
       border: 1.5px solid transparent; cursor: pointer;
       transition: transform .12s ease, background .12s ease; text-decoration: none !important; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #000; transform: translateY(-1px); }
.btn-amber { background: var(--amber); color: #221600; }
.btn-amber:hover { background: #F5A21F; transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--ink); }
.btn-sm { padding: 7px 14px; font-size: 13.5px; }
.btn-lg { padding: 14px 26px; font-size: 16px; }
.btn-block { width: 100%; }

/* ── Auth pages ── */
.auth-page { min-height: 100vh; display: flex; flex-direction: column;
             align-items: center; justify-content: center; padding: 40px 24px; }
.auth-card { background: #fff; border: 1px solid var(--line-strong);
             border-radius: 10px; padding: 36px 32px; width: 100%; max-width: 420px; }
.auth-card .hdr { font-family: var(--mono); font-size: 13px; color: var(--ink-faint); margin-bottom: 14px; }
.auth-card .hdr span { color: var(--amber-deep); font-weight: 500; }
.auth-card h1 { font-size: 24px; margin-bottom: 6px; }
.auth-card .sub { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 26px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.field input { width: 100%; padding: 10px 14px; font-size: 15px;
               font-family: var(--sans); border: 1.5px solid var(--line-strong);
               border-radius: var(--radius); background: var(--paper);
               color: var(--ink); outline: none; transition: border-color .12s; }
.field input:focus { border-color: var(--amber); background: #fff; }
.field input::placeholder { color: var(--ink-faint); }

.alert { padding: 11px 14px; border-radius: var(--radius); font-size: 14px; margin-bottom: 18px; }
.alert-error { background: var(--block-soft); color: var(--block); border: 1px solid #f5c6c6; }
.alert-success { background: var(--hit-soft); color: var(--hit-deep); border: 1px solid #b8e4c2; }

.auth-footer { font-size: 14px; color: var(--ink-soft); text-align: center; margin-top: 20px; }

/* ── Footer ── */
footer { padding: 44px 0 52px; border-top: 1px solid var(--line); }
.footer-wrap { display: flex; flex-direction: column; gap: 12px; }
.footer-wrap .logo { height: 22px; width: auto; color: var(--ink-faint); }
.footer-wrap p { font-size: 13.5px; color: var(--ink-faint); font-family: var(--mono); }

/* ── Modal ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(23,26,31,.55);
                 display: none; align-items: center; justify-content: center;
                 z-index: 100; padding: 20px; }
.modal-overlay.is-open { display: flex; }
.modal-box { background: var(--paper); border-radius: 10px; max-width: 440px;
             width: 100%; padding: 32px; position: relative;
             border: 1px solid var(--line-strong); }
.modal-close { position: absolute; top: 14px; right: 16px; background: none;
               border: none; font-size: 26px; line-height: 1;
               color: var(--ink-faint); cursor: pointer; }
.modal-box h3 { font-size: 20px; margin-bottom: 10px; }
.modal-box > p { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 18px; }
.modal-email-row { display: flex; gap: 10px; align-items: center;
                   background: #fff; border: 1px solid var(--line-strong);
                   border-radius: var(--radius); padding: 10px 14px; }
.modal-email-row code { font-family: var(--mono); font-size: 14px; flex: 1; }
.copy-btn { font-family: var(--mono); font-size: 12px; background: #fff;
            border: 1px solid var(--line-strong); border-radius: 4px;
            padding: 3px 10px; cursor: pointer; }
.copy-btn:hover { border-color: var(--ink); }

/* ── Dashboard (iskelet) ── */
.dash-wrap { display: flex; min-height: calc(100vh - 62px); }
.dash-sidebar { width: 240px; flex-shrink: 0; background: var(--panel);
                border-right: 1px solid var(--line); padding: 28px 16px; }
.dash-sidebar .logo-sm { height: 20px; color: var(--ink); margin-bottom: 28px; display: block; }
.dash-nav a { display: flex; align-items: center; gap: 10px;
              font-family: var(--mono); font-size: 13.5px; color: var(--ink-soft);
              padding: 8px 12px; border-radius: var(--radius); margin-bottom: 2px; }
.dash-nav a:hover { background: var(--line); color: var(--ink); text-decoration: none; }
.dash-nav a.active { background: var(--amber-soft); color: var(--amber-deep); }
.dash-content { flex: 1; padding: 36px 40px; }
.dash-content h1 { font-size: 24px; margin-bottom: 6px; }
.dash-content .sub { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 32px; }
@media (max-width: 768px) {
  .dash-wrap { flex-direction: column; }
  .dash-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--line); }
}

/* Site status badges */
.site-status-badge { font-family: var(--mono); font-size: 11px; padding: 2px 8px; border-radius: 3px; }
.badge-active   { background: var(--hit-soft);  color: var(--hit-deep); }
.badge-inactive { background: var(--panel);      color: var(--ink-faint); }