/* ====== Genel ====== */
:root{
  --container-max: 800px;
  --radius: 12px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
body{
  margin:0;
  padding:0;
  font-family:'Helvetica Neue', Arial, sans-serif;
  background:#f5f7fa;
  color:#333;
  -webkit-text-size-adjust:100%;
}

/* ====== Başlık ====== */
.category-header{
  text-align:center;
  margin:16px 0;
  padding:0 16px;
}
.category-header h1{
  font-size:1.5rem; /* ~24px */
  line-height:1.2;
  margin:0;
  font-weight:700;
  word-break:break-word;
}

/* ====== Liste ====== */
.story-list{
  max-width:var(--container-max);
  margin:24px auto;
  padding:0 16px;
}

/* Kart */
.story-item{
  display:flex;
  gap:12px;
  align-items:stretch;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:0 4px 8px rgba(0,0,0,.05);
  margin-bottom:14px;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
  padding:12px; /* iç padding verip görseli küçülttük */
}
.story-item:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 12px rgba(0,0,0,.08);
}

/* Kapak */
.story-cover{
  flex:0 0 96px;   /* 120 -> 96 */
  width:96px;
  height:144px;    /* oran korundu */
  object-fit:cover;
  border-radius:8px;
  background:#e0e0e0;
}

/* İçerik */
.story-content{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0; /* line-clamp ile taşmaları önler */
}

/* Başlık */
.story-title{
  font-size:1.1rem; /* ~17-18px */
  line-height:1.3;
  margin:0 0 6px;
  color:#222;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2; /* en fazla 2 satır */
  -webkit-box-orient:vertical;
}

/* Açıklama */
.story-description{
  margin:0 0 10px;
  line-height:1.45;
  color:#555;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:3; /* 3 satırda kes */
  -webkit-box-orient:vertical;
}

/* Buton */
.story-link{
  align-self:flex-start;
  padding:8px 14px; /* küçültüldü */
  background:#007acc;
  color:#fff;
  text-decoration:none;
  border-radius:8px;
  font-weight:700;
  font-size:.95rem;
  transition:background-color .2s ease, transform .1s ease;
}
.story-link:hover{ background:#005999 }
.story-link:active{ transform:scale(.98) }

/* ====== Küçük ekran (≤ 600px) ====== */
@media (max-width: 600px){
  .category-header h1{ font-size:1.25rem }      /* ~20px */
  .story-list{ margin:16px auto; padding:0 12px }

  .story-item{
    gap:10px;
    padding:10px;
    border-radius:10px;
  }

  .story-cover{
    flex:0 0 82px;  /* daha küçük görsel */
    width:82px;
    height:123px;
    border-radius:8px;
  }

  .story-title{ font-size:1rem; -webkit-line-clamp:2 }
  .story-description{ -webkit-line-clamp:2; font-size:.95rem }
  .story-link{ padding:7px 12px; font-size:.9rem; border-radius:7px }
}

/* ====== Çok küçük ekran (≤ 380px) ====== */
@media (max-width: 380px){
  .story-item{ padding:8px; gap:8px }
  .story-cover{
    flex:0 0 72px;
    width:72px;
    height:108px;
  }
  .story-title{ font-size:.95rem }
  .story-description{ font-size:.9rem }
  .story-link{ padding:6px 10px; font-size:.85rem }
}

/* ====== Dark Mode (html.dark) ====== */
html.dark body{ background:#181A1B; color:#E0E0E0 }
html.dark .category-header h1{ color:#90caf9 }
html.dark .story-item{ background:#23272B; box-shadow:0 4px 18px rgba(0,0,0,.21) }
html.dark .story-item:hover{ background:#24282e; box-shadow:0 8px 24px rgba(0,0,0,.32) }
html.dark .story-cover{ background:#333 }
html.dark .story-title{ color:#90caf9 }
html.dark .story-description{ color:#CCC }
html.dark .story-link{ background:#1976D2; color:#fff }
html.dark .story-link:hover{ background:#1565C0 }

/* ====== Hareketi azalt tercihine saygı ====== */
@media (prefers-reduced-motion: reduce){
  .story-item, .story-link{ transition:none }
}