:root{
  --bg:#0b0e14; --panel:#101521; --panel-2:#0f1420; --text:#e6edf3; --muted:#a7b3c2;
  --brand:#5b8cff; --brand-2:#7aa2ff; --accent:#1f2330; --ok:#35c46b; --warn:#f2b214; --err:#ff5d5d;
  --ring: 0 0 0 2px rgba(91,140,255,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:radial-gradient(1200px 800px at 10% -10%,#15213b 0%,transparent 60%),radial-gradient(900px 600px at 120% 20%,#1a2438 0%,transparent 55%),var(--bg);color:var(--text)}
.container{max-width:1200px;margin:0 auto;padding:28px}
header,footer{backdrop-filter:saturate(160%) blur(8px);background:color-mix(in oklab, var(--panel) 80%, transparent);border-bottom:1px solid #1b2333;position:sticky;top:0;z-index:10}
header .container,footer .container{display:flex;gap:16px;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px}
.logo-dot{width:10px;height:50px;border-radius:50%;background:linear-gradient(180deg,var(--brand),var(--brand-2));box-shadow:0 0 16px var(--brand)}
nav a{color:var(--muted);text-decoration:none;margin-right:12px}
.card{background:linear-gradient(180deg, #0f1420, #0b1018);border:1px solid #1f2a3d;border-radius:16px;padding:16px;box-shadow:0 6px 14px rgba(0,0,0,.25)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:linear-gradient(180deg,var(--brand),var(--brand-2));color:#fff;text-decoration:none;border:0;cursor:pointer;font-weight:600;box-shadow:0 6px 14px rgba(91,140,255,.25)}
.btn:hover{filter:brightness(1.05)}
.btn.secondary{background:#20283a;color:var(--text);box-shadow:none;border:1px solid #283247}
.badge{
  font-size:13px;
  background:#1b2336;
  color:#dbe6ff;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid #334063;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
  font-weight:600;
}
.badge:hover{ filter:brightness(1.08); border-color:#495a87; }
.badge.active{
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 6px 16px rgba(91,140,255,.35);
}
.input, select, textarea{background:var(--panel-2);border:1px solid #273142;border-radius:12px;padding:10px;color:var(--text);width:100%;outline:none}
.input:focus, select:focus, textarea:focus{box-shadow:var(--ring);border-color:#35528a}
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th{font-weight:600;color:var(--muted);text-transform:uppercase;font-size:12px;padding:8px 10px}
.table td{background:#0e1422;border:1px solid #1d2740;border-left:0;border-right:0;padding:10px;border-radius:10px}
.alert{padding:10px 12px;border-radius:12px;background:#11253a;color:#cfe5ff;margin:10px 0;border:1px solid #1b3555}
.tag{padding:6px 10px;border-radius:10px;background:#0f192b;border:1px solid #21304b;color:var(--muted)}
.audio{width:100%;height:40px}
.hero{display:flex;gap:18px;align-items:center;justify-content:space-between;margin:24px 0}
.hero h1{margin:0;font-size:28px}
.search{display:flex;gap:8px}
.search .input{min-width:300px}
.badge {
  font-size: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  background: #1b2336;          /* koyu mavi zemin */
  color: #ffffff;               /* beyaz yazı */
  border: 1px solid #3a4f7a;    /* hafif kenar */
  box-shadow: 0 3px 6px rgba(0,0,0,0.25);
  transition: all 0.2s ease;
}

.badge:hover {
  background: #2d3e63;          /* hover’da biraz daha açık */
  transform: translateY(-2px);  /* hafif yukarı kalkma efekti */
}

.badge.active {
  background: linear-gradient(135deg, #4a90e2, #357abd); /* marka rengi gradyan */
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(53,122,189,0.4);
}

/* --- PATCH: mobile + detail fixes (2025-08-10) --- */
@media (max-width: 768px) {
  /* Search alignment */
  .hero .search{display:flex;align-items:center;gap:8px;width:100%;max-width:100%}
  .hero .search input{flex:1 1 auto;min-width:0;width:100%}
  .hero .search .btn, .hero .search button{flex:0 0 auto;white-space:nowrap}

  /* Card should not clip content on mobile; audio-wrap will clip instead */
  .card{ overflow:visible !important; }

  /* Audio wrapper and player */
  .audio-wrap{ margin-top:8px; border-radius:12px; overflow:hidden !important; }
  .audio-wrap audio{ display:block; width:100%; height:48px; min-height:48px; -webkit-appearance:none; transform:translateZ(0); }
  .audio-wrap audio::-webkit-media-controls-enclosure{ background:rgba(255,255,255,.14); height:48px; min-height:48px; border-radius:12px; }

  /* Safe area padding */
  main{ padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* Desktop: keep size, only improve contrast a touch */
@media (min-width: 769px) {
  .audio-wrap{ background: rgba(255,255,255,.16); border-radius:12px; }
  .audio-wrap audio{ display:block; width:100%; }
  .audio-wrap audio::-webkit-media-controls-enclosure{ background: rgba(255,255,255,.22) !important; border-radius:12px; }
}