:root{
  --brand:#0F212C; --ink:#0f212c; --muted:#5a6c7a;   --bg:#0F212C;   /* ✅ burayı koyu lacivert yap */
 --soft:#ffffff; --line:#e3ebf1;
  --pill:#eef4f8; --good:#12B886; --warning:#ffb020; --danger:#ff4d4f; --shadow:0 14px 32px rgba(15,33,44,.16);
  --radius:16px; --r-sm:12px; --ring: rgba(15,33,44,.18);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:
    radial-gradient(1200px 420px at 10% -10%, rgba(31,135,255,.10), transparent),
    radial-gradient(900px 360px at 90% -10%, rgba(18,184,134,.10), transparent),
    var(--bg);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--ink);
}
a{color:#125fb6; text-decoration:none}
a:hover{ text-decoration:none }

.container{max-width:1240px; margin:24px auto 48px; padding:0 20px}

.hero{
  position:relative; border-radius:24px;
  background: radial-gradient(900px 360px at 8% -20%, rgba(255,255,255,.10), transparent),
              linear-gradient(180deg, #0f212c, #132c3c 60%);
  padding:28px 24px; color:#eaf2f8; overflow:hidden; box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.06);
}
.hero h1{ margin:.35rem 0 .5rem; font-size:2.2rem; line-height:1.2; color:#fff; font-weight:900; }
.subtitle{color:#cfe2f2; font-weight:600; margin:0 0 16px}

.toolbar{
  display:grid; grid-template-columns: 1fr auto auto; gap:10px;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:14px; padding:10px; backdrop-filter: blur(6px);
}
.input{ display:flex; align-items:center; gap:10px; background:#0f1f2c; border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:8px 12px; color:#eaf2f8; }
.input input{ flex:1; border:none; outline:none; background:transparent; color:#eaf2f8; font-size:1rem; }
.select, .chipbar{ display:flex; align-items:center; gap:8px; background:#0f1f2c; border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:6px 8px; color:#eaf2f8; }
.select select{ background:transparent; border:none; color:#eaf2f8; outline:none; font-weight:700; cursor:pointer; }
.chip{ padding:6px 10px; background:#163243; border:1px solid rgba(255,255,255,.15); color:#d8e7f4; border-radius:999px;
  font-size:.9rem; font-weight:800; cursor:pointer; transition: filter .15s, transform .1s, background-color .15s, color .15s, border-color .15s; }
.chip:hover{ filter:brightness(1.07) } .chip.active{ background:var(--brand); border-color:var(--brand); color:#fff }
.chip:active{ transform: translateY(1px) }

.layout{ display:grid; grid-template-columns: 300px 1fr; gap:18px; margin-top:18px }
@media (max-width: 1024px){ .layout{ grid-template-columns: 1fr } }

.filters{ background:var(--soft); border:1px solid var(--line); border-radius:var(--radius); box-shadow: var(--shadow);
  padding:16px; position:sticky; top:14px; align-self:start; }
.filters h3{ margin:.2rem 0 12px; font-size:1.05rem; color:#183447 }
.control{ display:grid; gap:6px; margin-bottom:12px }
.control label{ font-size:.9rem; font-weight:800; color:#476171 }
.control input, .control select{
  border:1px solid #d6e2ea; border-radius:10px; padding:10px 12px; outline:none; background:#fff; font-size:.95rem;
  transition: box-shadow .15s, border-color .15s;
}
.control input:focus, .control select:focus{ border-color:#c8d6e1; box-shadow: 0 0 0 3px var(--ring); }
.filters .btn{ width:100%; border:none; border-radius:12px; padding:12px 14px; font-weight:900; cursor:pointer;
  transition: transform .08s, filter .15s, box-shadow .15s; }
.filters .btn:active{ transform: translateY(1px) }
.btn-primary{ background: linear-gradient(180deg, var(--brand), #0b1821); color:#fff; border:1px solid #0b1821;
  box-shadow: 0 6px 16px rgba(15,33,44,.22); }
.btn-primary:hover{ filter:brightness(1.05) }
.btn-ghost{ background:#f1f6fb; color:#0f2a3a; border:1px solid #d8e6ef; }
.btn-ghost:hover{ filter:brightness(1.03) }

.results-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.count{ font-weight:900; color:#3a5565; background:#e9f1f6; border:1px solid #d7e5ee; padding:.35rem .65rem; border-radius:999px }
.sort-mini{ display:flex; gap:8px; align-items:center; background:#fff; padding:6px 10px; border:1px solid #dbe6ed; border-radius:999px;
  font-weight:800; color:#2c4c5e; }

.grid{ display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top:12px; }
.card{
  position:relative; display:grid; grid-template-columns:68px 1fr auto; gap:12px; padding:12px;
  background:var(--soft); border:1px solid var(--line); border-radius:14px; box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s, border-color .15s; cursor:pointer; min-height:120px;
}
.card:hover{ transform: translateY(-3px); box-shadow: 0 16px 34px rgba(15,33,44,.19); border-color:#d6e2ea }
.card:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ring) }
.pp{ width:68px; height:68px; border-radius:14px; object-fit:cover; background:#eef3f7; border:1px solid #e1eaf0; grid-row: span 2; }
.meta{ min-width:0 }
.topline{ display:flex; align-items:center; gap:8px; margin-bottom:2px }
.name{ font-weight:900; font-size:1.08rem; color:#112b39; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.verified{ display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; border:1px solid #bfe6d6;
  background:#e9fbf5; color:#0f5a44; font-size:.78rem; font-weight:900 }
.title{ color:#3c5a6b; font-weight:700; font-size:.92rem; margin:2px 0 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:#426476; font-size:.92rem }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; border:1px solid #e1ebf2;
  background:#f2f7fa; font-weight:800; color:#375565; font-size:.82rem; }
.stats{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px }
.stat{ background:#f7fbff; border:1px solid #e0edf8; border-radius:10px; padding:6px 8px; font-size:.84rem; color:#2f4e61; font-weight:900 }
.tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px }
.tag{ background:var(--pill); border:1px solid #d9e6ee; border-radius:999px; padding:4px 8px; font-size:.8rem; font-weight:900; color:#335567 }

.cta-col{ display:flex; flex-direction:column; align-items:flex-end; gap:8px }
.rating{ display:flex; align-items:center; gap:6px; font-weight:900; color:#244a5e }
.stars{display:inline-flex; gap:2px}
.star{font-size:16px; line-height:1}
.cta{ padding:8px 10px; border-radius:10px; font-weight:900; border:1px solid #dbe6ee; background:#f2f7fb; color:#0e2f42;
  transition: filter .15s, transform .08s; text-decoration:none; }
.cta:hover{ filter:brightness(1.03) } .cta:active{ transform: translateY(1px) }
.cta.primary{ background: var(--brand); color:#fff; border-color: var(--brand); box-shadow: 0 6px 16px rgba(15,33,44,.22); }
.cta.primary:hover{ filter:brightness(1.05) }

.state{ display:flex; align-items:center; justify-content:center; min-height:140px; background:#ffffff;
  border:1px dashed #d7e4ec; border-radius:12px; color:#4b6775; font-weight:800; }
.skeleton{ animation: pulse 1.1s infinite ease-in-out; background: linear-gradient(90deg,#eef3f7 25%,#f6fafc 37%,#eef3f7 63%); background-size: 400% 100% }
@keyframes pulse { 0%{background-position: 100% 0} 100%{background-position: -100% 0} }
.sk-card{ height:120px; border-radius:14px; border:1px solid #e8eff4 }
.mini{ color:#647d8c; font-size:.92rem; margin-top:14px }
.footer-actions{ display:flex; justify-content:center; margin-top:14px }
.loadmore{ border:none; padding:10px 14px; border-radius:12px; background:#fff; border:1px solid #dbe6ed; font-weight:900; cursor:pointer;
  transition: box-shadow .15s, border-color .15s, transform .08s; }
.loadmore:hover{ border-color: var(--brand); box-shadow: 0 10px 20px rgba(15,33,44,.12) }
.loadmore:active{ transform: translateY(1px) }

.input-col1 { grid-column: 1 / 2; }
.filter-buttons { display: grid; gap: 10px; margin-top: 12px; }
.sort-mini-select { border: none; outline: none; background: transparent; font-weight: 900; }

@media (max-width: 600px) {
  .hero h1 { font-size: 1.6rem; }
  .subtitle { font-size: .9rem; }
  .toolbar { grid-template-columns: 1fr; }
  .results-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* 📱 Mobil tipografi: Başlıklar 15px, diğer tüm metin 12px */
@media (max-width: 720px){
  /* Varsayılanı 12px yap */
  .container,
  .container *{
    font-size:12px !important;
    line-height:1.4;
  }

  /* Başlıklar 15px */
  .container h1,
  .container h2,
  .container h3,
  .container h4,
  .container h5,
  .container h6,
  .hero h1,
  .filters h3,
  .results-head h3,
  .card .name,
  .title{
    font-size:15px !important;
    line-height:1.25;
  }

  /* Placeholder / select/option */
  .container input::placeholder,
  .container textarea::placeholder{ font-size:12px !important; }
  .container select,
  .container option{ font-size:12px !important; }
}

/* Join Banner */
.join-banner {
  background: #0c1721;         /* koyu arka plan */
  border-radius: 12px;
  margin: 0 auto 20px;
  padding: 14px 20px;
  text-align: center;
}

.join-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.join-btn {
  display: inline-block;
  background: transparent;       /* içi boş */
  border: 2px solid #e03131;     /* kırmızı çerçeve */
  color: #ffffff;                /* yazı kırmızı */
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 8px;
  text-decoration: none;         /* alt çizgi kaldırıldı */
  transition: all 0.25s ease;
}

.join-btn:hover {
  background: #e03131;   /* hover'da kırmızı arka plan */
  color: #fff;           /* yazı beyaz olur */
}