:root{
      /* LinkedIn hissi: temiz, kurumsal, form odaklı — dark */
      --bg:#0b0f14;
      --bg2:#0f1520;
      --card:#121a26;
      --card2:#0f1622;

      --text:#e6edf3;
      --muted:#9aa4b2;

      --line:rgba(255,255,255,.10);
      --line2:rgba(255,255,255,.18);

      --blue:#0a66c2;
      --blueHover:#085aa9;
      --blueSoft:rgba(10,102,194,.16);

      --danger:#ff6b6b;
      --shadow: 0 14px 40px rgba(0,0,0,.45);
      --radius: 14px;

      --container: 1120px;
      --footerPad: 16px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }

    /* Footer'ın her zaman sayfanın en altında kalması için */
    body{
      margin:0;
      min-height: 100vh;
      display:flex;
      flex-direction: column;

      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background:
        radial-gradient(950px 420px at 12% -10%, rgba(10,102,194,.20), transparent 55%),
        radial-gradient(820px 380px at 88% 0%, rgba(10,102,194,.10), transparent 60%),
        linear-gradient(180deg, var(--bg), var(--bg2));
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    a{ color:inherit; text-decoration:none; }
    a:hover{ text-decoration:underline; }
    button,input{ font-family:inherit; }

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

    /* Buttons */
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      height: 38px;
      padding: 0 14px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.06);
      color: var(--text);
      cursor:pointer;
      user-select:none;
      font-weight: 750;
      font-size: 13px;
      transition: background .12s ease, border-color .12s ease, transform .12s ease, opacity .12s ease;
    }
    .btn:hover{
      background: rgba(255,255,255,.08);
      border-color: var(--line2);
      transform: translateY(-1px);
      text-decoration:none;
    }
    .btn:active{ transform: translateY(0); opacity:.95; }

    .btn.primary{
      background: var(--blue);
      border-color: transparent;
      color:#fff;
    }
    .btn.primary:hover{ background: var(--blueHover); border-color: transparent; }

    .btn.ghost{
      background: transparent;
      border-color: transparent;
      color: var(--muted);
    }
    .btn.ghost:hover{
      background: rgba(255,255,255,.04);
      border-color: var(--line);
      color: var(--text);
      transform: translateY(0);
    }

    /* Main: SOL ORTA + SAĞ ORTA (dikey ortalama) */
    main{
      flex: 1;                 /* footer'ı alta iter */
      display:flex;
      align-items:center;      /* dikey ortalama */
      padding: 28px 0 30px;
    }

    .layout{
      width: 100%;
      display:grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 18px;
      align-items:center;      /* sol blok ve sağ kartı orta hizalar */
    }

    .headline{
      padding: 10px 6px;
    }
    .headline h1{
      margin:0;
      font-size: clamp(30px, 3.6vw, 48px);
      letter-spacing: -0.6px;
      line-height: 1.05;
    }
    .headline p{
      margin: 12px 0 0;
      color: var(--muted);
      line-height: 1.65;
      max-width: 60ch;
      font-size: 15px;
    }
    .hint{
      margin-top: 16px;
      display:flex;
      flex-wrap: wrap;
      gap: 10px;
      color: var(--muted);
      font-size: 12px;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.04);
      color: var(--text);
      font-size: 12px;
      user-select:none;
    }
    .pill svg{ opacity:.9; }

    /* Auth card */
    .card{
      background: rgba(18,26,38,.90);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;

      /* Sağ ortada daha net dursun diye */
      justify-self: end;       /* sağ sütunda sağa yasla (LinkedIn hissi) */
      width: min(420px, 100%); /* çok uzamasın */
    }
    .card-top{
      padding: 14px 14px 10px;
      border-bottom: 1px solid var(--line);
      background: rgba(15,22,34,.55);
    }
    .tabs{
      display:flex;
      gap: 8px;
      align-items:center;
    }
    .tab{
      flex:1;
      height: 38px;
      border-radius: 10px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--muted);
      cursor:pointer;
      font-weight: 800;
      font-size: 13px;
      transition: background .12s ease, border-color .12s ease, color .12s ease;
    }
    .tab:hover{
      background: rgba(255,255,255,.05);
      border-color: var(--line);
      color: var(--text);
    }
    .tab.active{
      background: rgba(10,102,194,.18);
      border-color: rgba(10,102,194,.28);
      color: #b9dcff;
    }

    .card-body{
      padding: 14px;
    }
    .title{
      margin: 0 0 10px;
      font-size: 16px;
      letter-spacing: -0.2px;
    }
    .sub{
      margin: 0 0 14px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

    .field{
      display:grid;
      gap: 8px;
      margin-bottom: 12px;
    }
    label{
      font-size: 12px;
      color: var(--muted);
    }
    input[type="email"], input[type="password"], input[type="text"]{
      height: 44px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.06);
      color: var(--text);
      padding: 0 12px;
      outline:none;
      font-size: 14px;
      transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
    }
    input::placeholder{ color: rgba(154,164,178,.75); }
    input:focus{
      border-color: rgba(10,102,194,.55);
      box-shadow: 0 0 0 3px rgba(10,102,194,.14);
      background: rgba(255,255,255,.08);
    }

    .row{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 10px;
      margin: 10px 0 12px;
      flex-wrap: wrap;
    }
    .check{
      display:flex;
      align-items:center;
      gap: 8px;
      color: var(--muted);
      font-size: 13px;
      user-select:none;
    }
    .check input{
      width: 16px;
      height: 16px;
      accent-color: var(--blue);
    }

    .link{
      color: #b9dcff;
      font-weight: 700;
      font-size: 13px;
    }
    .link:hover{ text-decoration:underline; }

    .submit{
      width:100%;
      height: 44px;
      border-radius: 999px;
      border: 1px solid transparent;
      background: var(--blue);
      color:#fff;
      font-weight: 850;
      cursor:pointer;
      font-size: 14px;
      transition: background .12s ease, transform .12s ease, opacity .12s ease;
    }
    .submit:hover{ background: var(--blueHover); transform: translateY(-1px); }
    .submit:active{ transform: translateY(0); opacity:.95; }

    .divider{
      display:flex;
      align-items:center;
      gap: 10px;
      margin: 14px 0;
      color: var(--muted);
      font-size: 12px;
    }
    .divider::before, .divider::after{
      content:"";
      height:1px;
      flex:1;
      background: var(--line);
    }

    .note{
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
      margin-top: 10px;
    }

    .error{
      display:none;
      margin: 0 0 12px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid rgba(255,107,107,.28);
      background: rgba(255,107,107,.10);
      color: rgba(255,235,235,.95);
      font-size: 13px;
    }

    /* Footer: her zaman sayfanın en altında */
    footer{
      margin-top: auto; /* flex column içinde en alta iter */
      padding: var(--footerPad) 0 calc(var(--footerPad) + 10px);
      border-top: 1px solid var(--line);
      background: rgba(15,20,27,.55);
      color: var(--muted);
      font-size: 12px;
    }
    .footer-links{
      display:flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items:center;
      justify-content:center;
    }
    .footer-links a{
      color: var(--muted);
      padding: 4px 6px;
      border-radius: 8px;
      border: 1px solid transparent;
    }
    .footer-links a:hover{
      text-decoration:none;
      color: var(--text);
      border-color: var(--line);
      background: rgba(255,255,255,.04);
    }

    /* Views */
    .view{ display:none; }
    .view.active{ display:block; }

    /* Responsive */
    @media (max-width: 980px){
      main{
        align-items:flex-start; /* mobilde ortalama yerine yukarıdan başlasın */
      }
      .layout{
        grid-template-columns: 1fr;
        align-items: stretch;
      }
      .headline{ padding: 6px 2px; }
      .card{
        justify-self: stretch;
        width: 100%;
      }
    }