:root{
      --bg:#0b1220;
      --panel:#121a2b;
      --panel-2:#0f1726;
      --card:#0f1726;
      --text:#e7ecf6;
      --muted:#9fb0d0;
      --primary:#2f6df6;
      --danger:#ef4444;
      --border:#24324c;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      background:linear-gradient(180deg, var(--bg), #0e1626 60%, #0b1220);
      color:var(--text);
    }

    /* Top bar */
    .topbar{
      position:sticky; top:0; z-index:50;
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 18px; background:rgba(10,16,30,.85); backdrop-filter: blur(8px);
      border-bottom:1px solid var(--border);
    }
    .brand{display:flex; align-items:center; gap:10px; font-weight:700}
    .brand .logo{color:var(--primary)}
    .brand .divider{opacity:.4}
    .actions{display:flex; gap:10px}
    .btn{
      background:var(--primary); border:1px solid transparent; color:white;
      padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600;
    }
    .btn:hover{opacity:.95}
    .btn.ghost{background:transparent; border:1px solid var(--border); color:var(--text)}
    .btn.danger{background:var(--danger)}
    .btn.link{background:transparent; color:var(--primary); border:1px solid var(--border)}

    /* Premium / trial banner */
    .banner{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      padding:12px 16px; background:#0e1626; color:var(--text);
      border-bottom:1px solid var(--border);
    }
    .banner.hidden{display:none}
    .banner-left{display:flex; flex-direction:column; gap:2px}
    .banner-right .btn{padding:8px 12px}

    /* Container */
    .container{max-width:1180px; margin:24px auto; padding:0 16px}

    /* Hero */
    .hero.card{
      display:flex; flex-direction:column; gap:8px;
      background:linear-gradient(180deg,var(--panel),var(--panel-2));
      border:1px solid var(--border); border-radius:18px; padding:18px;
      box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
    }
    .hero h1{margin:0; font-size:22px}
    .hero .slogan{margin:0; color:var(--muted)}

    /* Modules grid */
    .modules{
      display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin-top:16px;
    }
    .card{
      background:linear-gradient(180deg,var(--panel),var(--panel-2));
      border:1px solid var(--border); border-radius:18px; padding:16px;
      box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
    }
    .card:hover{border-color:#35507d}
    .modules .card{ text-decoration:none; color:var(--text); transition:transform .15s ease, box-shadow .15s ease}
    .modules .card:hover{ transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16,24,40,.15)}
    .modules .card h3{margin:0 0 8px}
    .modules .card p{margin:0; color:var(--muted)}

    /* Stats-like quick cards (optional, could be reused later) */
    .quick{display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px}
    .quick .item{padding:14px}
    .quick .title{font-size:12px; color:var(--muted); margin-bottom:6px}
    .quick .value{font-size:22px; font-weight:700}

    /* Jobs */
    .home-jobs{ margin-top:20px; }
    .home-jobs .card-title{font-weight:700; margin-bottom:10px}
    .job-list{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
    .job-card{
      background:#0f1726; border:1px solid var(--border); border-radius:12px;
      padding:14px; box-shadow:0 2px 8px rgba(0,0,0,.12);
    }
    .job-card h3{ margin:0 0 6px; font-size:16px; color:var(--text); }
    .job-card p{ margin:0 0 8px; color:var(--muted); }
    .meta{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom: 10px; }
    .tag{
      display:inline-block; background:#19253d; color:#b7c9ff; font-size:12px;
      border-radius:999px; padding:4px 8px; border:1px solid #2a3b62;
    }
    .job-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
    .job-status{ display:flex; align-items:center; gap:8px; }
    .status-pill{
      display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
      font-size:12px; font-weight:700; white-space:nowrap;
    }
    .status-green{ background:#0f2f1e; color:#6ee7b7; border:1px solid #164232; }
    .status-red{ background:#3a0f12; color:#ffb4b4; border:1px solid #5a1a1f; }
    .status-red .dot{ width:8px; height:8px; border-radius:50%; background:#ff6b6b; display:inline-block; }

    .actions-row{ display:flex; justify-content:flex-end; margin-top:8px; }
    .btn.outline{
      background:transparent; border:1px solid var(--border); color:var(--text);
      padding:8px 12px; border-radius:10px; text-decoration:none;
    }
    .btn.outline:hover{ border-color:#3a527a }

    @media (max-width:1024px){
      .modules{ grid-template-columns:1fr; }
      .job-list{ grid-template-columns:1fr; }
      .quick{ grid-template-columns:1fr; }
    }
    /* Topbar actions: küçük ekran dostu */
.actions{
  display:flex;
  flex-wrap:wrap;            /* gerektiğinde alt satıra geçsin */
  column-gap:8px;
  row-gap:8px;               /* satırlar arasında da boşluk */
  justify-content:flex-end;
}
.actions .btn{
  white-space:nowrap;        /* metin taşmasın, buton genişlesin */
  font-size:clamp(11px, 2.6vw, 14px);
  padding:clamp(6px, 1.6vh, 10px) clamp(10px, 3vw, 14px);
  border-radius:10px;
}

/* 420px ve aşağısı: bar kompaktlaşsın */
@media (max-width:420px){
  .topbar{ padding:10px 12px; }
  .brand{ font-size:14px; }
  .actions{ column-gap:6px; row-gap:6px; }
}

/* 360px ve aşağısı: tam genişlik, iki satıra yayılabilir */
@media (max-width:360px){
  .actions{ width:100%; justify-content:flex-end; }
  .brand .divider{ display:none; } /* “/” kalksın, yer açılsın */
  .actions .btn{ font-size:11px; padding:6px 8px; }
}
.premium-cta:hover{ filter:brightness(1.05); }
.premium-cta:focus-visible{ outline:2px solid #7dd3fc; outline-offset:2px; }
/* KUTU: yazı solda, buton sağda; aradaki boşluk responsive "gap" ile sabit */
.premium-info{
  display: grid;
  grid-template-columns: 1fr auto;   /* yazı esner, buton içerik kadar */
  align-items: start;                 /* buton tepeye yapışık kalsın */
  gap: clamp(12px, 2.2vw, 24px);      /* EKRAN KÜÇÜLDÜKÇE boşluk azalır */
  padding: clamp(12px, 2.2vw, 20px);  /* kutu iç boşluğu da orantılı */
  border-radius: 12px;
}

/* YAZI BLOĞU: sağa doğru taşma yapmasın (Safari için min-width:0 önemli) */
.premium-info .premium-text{
  min-width: 0;
}

/* BUTON: font ve padding clamp ile küçülür; sağ-üstte sabit durur */
.premium-cta{
  justify-self: end;                  /* sağa hizala */
  align-self: start;                  /* üste hizala */
  font-weight: 700;
  font-size: clamp(12px, 1.45vw, 14px);
  padding: clamp(8px, 1.2vw, 12px) clamp(12px, 1.8vw, 16px);
  border-radius: 12px;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;                /* tek satır kalsın, kutu daraldıkça font/padding küçülür */
  background:#ffb30e;     /* tema aksanına göre ayarlayabilirsin */
  color:#07131f;
}

/* Çok dar ekranlarda (telefon) buton yazının altına insin ama SAĞ-ÜSTE yakın kalsın */
@media (max-width: 480px){
  .premium-info{
    grid-template-columns: 1fr;       /* tek sütun */
  }
  .premium-cta{
    justify-self: end;                /* sağda kalsın */
    margin-top: clamp(6px, 1.5vw, 10px);
  }
}