/* Levent Bulut Research - style.css */
:root{
 --bg:#101418;
 --card:#182028;
 --text:#f4f7fb;
 --muted:#9fb0c0;
 --accent:#4db6ff;
 --border:#2b3642;
 --max:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 font-family:Inter,Arial,sans-serif;
 background:var(--bg);
 color:var(--text);
 line-height:1.7;
}
a{color:var(--accent);text-decoration:none}
img{max-width:100%}
.hero{
 max-width:var(--max);
 margin:auto;
 padding:72px 24px;
 display:grid;
 grid-template-columns:1.2fr .8fr;
 gap:40px;
 align-items:center;
}
.badge{
 display:inline-block;
 padding:6px 12px;
 border:1px solid var(--border);
 border-radius:999px;
 color:var(--accent);
 margin-bottom:18px;
}
.hero h1{
 font-size:clamp(2.5rem,5vw,4.5rem);
 line-height:1.05;
 margin-bottom:20px;
}
.hero-text{color:var(--muted);max-width:700px}
.hero-buttons{
 display:flex;flex-wrap:wrap;gap:14px;margin-top:28px
}
.button{
 padding:12px 18px;
 border:1px solid var(--border);
 border-radius:10px;
 background:var(--card);
}
.button:hover,.card:hover,.stat-card:hover{
 transform:translateY(-2px);
 transition:.2s;
}
.framework-preview{
 background:var(--card);
 border:1px solid var(--border);
 border-radius:16px;
 padding:24px;
}
.framework-preview ul{margin-top:14px;padding-left:20px}
.stats{
 max-width:var(--max);
 margin:0 auto;
 padding:0 24px 40px;
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:20px;
}
.stat-card{
 background:var(--card);
 border:1px solid var(--border);
 border-radius:16px;
 padding:24px;
 text-align:center;
}
.stat-card span{
 font-size:2rem;
 font-weight:700;
 color:var(--accent);
}
.section{
 max-width:var(--max);
 margin:auto;
 padding:48px 24px;
}
.section h2{margin-bottom:24px}
.section-title{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:20px;
 margin-bottom:24px;
}
#search{
 background:var(--card);
 color:var(--text);
 border:1px solid var(--border);
 border-radius:10px;
 padding:12px 16px;
 min-width:260px;
}
#research-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
 gap:24px;
}
.card{
 background:var(--card);
 border:1px solid var(--border);
 border-radius:16px;
 padding:20px;
}
.resources{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
 gap:16px;
}
.resources a{
 display:block;
 background:var(--card);
 border:1px solid var(--border);
 border-radius:12px;
 padding:18px;
}
footer{
 margin-top:60px;
 border-top:1px solid var(--border);
}
.footer-grid{
 max-width:var(--max);
 margin:auto;
 padding:40px 24px;
 display:grid;
 grid-template-columns:2fr 1fr;
 gap:40px;
}
footer ul{list-style:none}
footer li{margin:8px 0}
.copyright{
 text-align:center;
 color:var(--muted);
 padding:20px;
 border-top:1px solid var(--border);
}
@media (max-width:900px){
 .hero{grid-template-columns:1fr}
 .stats{grid-template-columns:repeat(2,1fr)}
 .footer-grid{grid-template-columns:1fr}
 .section-title{flex-direction:column;align-items:flex-start}
 #search{width:100%;min-width:0}
}
@media (max-width:600px){
 .stats{grid-template-columns:1fr}
 .hero{padding:48px 20px}
 .section{padding:36px 20px}
}
/* ==========================================================
   RESEARCH INDEX CARDS — append to the end of style.css
   ========================================================== */

.framework-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.framework-card,
.research-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  height: 100%;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease,
    background 0.18s ease;
}

.framework-card:hover,
.framework-card:focus-visible,
.research-card:hover,
.research-card:focus-visible {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
  outline: none;
}

.framework-card strong,
.research-card strong {
  font-size: 1.02rem;
  line-height: 1.35;
}

.framework-card .card-alt {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}

.framework-card span,
.research-card span {
  font-size: 0.87rem;
  line-height: 1.6;
  opacity: 0.75;
}

.framework-card .card-doi,
.research-card .card-doi {
  margin-top: auto;
  padding-top: 0.6rem;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  opacity: 0.5;
}

#research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.empty-state,
.search-empty {
  grid-column: 1 / -1;
  padding: 1rem 0;
  font-size: 0.92rem;
  opacity: 0.7;
}

.empty-state a {
  color: inherit;
  text-decoration: underline;
}

.framework-preview ul a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease, opacity 0.18s ease;
}

.framework-preview ul a:hover,
.framework-preview ul a:focus-visible {
  border-bottom-color: currentColor;
  opacity: 0.85;
  outline: none;
}

@media (max-width: 480px) {
  .framework-grid,
  #research-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .framework-card,
  .research-card,
  .framework-preview ul a {
    transition: none;
  }
  .framework-card:hover,
  .research-card:hover {
    transform: none;
  }
}