/* /test/assets/css/site.css */
/* style.css üzerine biner — frontend'e özel bileşenler */

.site-main { min-height: calc(100vh - 200px); padding: 24px 0 48px; }

/* Header düzen */
.header-actions { display:flex; align-items:center; gap:6px; }
.nav-toggle {
  display:none; background:transparent; border:1px solid var(--line);
  color:var(--text); width:40px; height:40px; border-radius:8px;
  cursor:pointer; font-size:1.1rem;
}

/* Şiir kartları */
.poem-grid {
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.poem-card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; display:flex; flex-direction:column; gap:8px;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.poem-card:hover {
  transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--accent);
}
.poem-card-title {
  font-family:var(--font-serif); font-size:1.1rem; color:var(--text); margin:0;
  line-height:1.3;
}
.poem-card-author {
  font-size:.85rem; color:var(--text-mute);
}
.poem-card-excerpt {
  font-family: var(--font-serif);
  font-size: .92rem;
  line-height: 1.6;
  color: var(--text-mute);
  margin: 6px 0 0;
  display: block;
  overflow: hidden;
  max-height: 6.4em;
  word-break: break-word;
  white-space: pre-line;
}
.poem-card-meta {
  display:flex; gap:12px; font-size:.78rem; color:var(--text-mute);
  margin-top:auto; padding-top:8px; border-top:1px solid var(--line);
}

/* Bölüm başlığı */
.section-head {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:0 0 16px; flex-wrap:wrap;
}
.section-head h2 {
  font-family:var(--font-serif); font-size:1.35rem; margin:0;
}
.section-head a { font-size:.9rem; }

/* Şair vitrini */
.sair-grid {
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.sair-card {
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px;
  transition:border-color .18s, transform .18s;
}
.sair-card:hover { border-color:var(--accent); transform:translateY(-1px); text-decoration:none; }
.sair-avatar {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--accent), var(--accent-soft));
  color:#fff; display:grid; place-items:center;
  font-family:var(--font-serif); font-size:1.2rem; font-weight:700;
}
.sair-info { min-width:0; }
.sair-name {
  font-family:var(--font-serif); font-size:.98rem; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sair-count { font-size:.78rem; color:var(--text-mute); }

/* Etiket bulutu */
.tag-cloud { display:flex; flex-wrap:wrap; gap:8px; }
.tag-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px;
  background:var(--bg-alt); color:var(--text);
  font-size:.85rem; border:1px solid transparent;
  transition:border-color .18s, background .18s;
}
.tag-pill:hover { border-color:var(--accent); text-decoration:none; }
.tag-pill .cnt { color:var(--text-mute); font-size:.75rem; }

/* Şiir detay */
.poem-page {
  max-width:740px; margin:0 auto;
}
.poem-head {
  text-align:center; padding:16px 0 24px; border-bottom:1px solid var(--line);
  margin-bottom:24px;
}
.poem-head h1 {
  font-family:var(--font-serif); font-size:1.9rem; margin:0 0 8px;
  line-height:1.2;
}
.poem-head .author {
  font-family:var(--font-serif); font-style:italic; color:var(--accent);
  font-size:1.05rem;
}
.poem-head .meta {
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  font-size:.82rem; color:var(--text-mute); margin-top:12px;
}
.poem-video {
  margin:24px 0; aspect-ratio:16/9;
  border-radius:var(--radius); overflow:hidden;
  background:#000;
}
.poem-video iframe { width:100%; height:100%; border:0; }
.poem-tags { margin:24px 0; display:flex; flex-wrap:wrap; gap:8px; }

/* Breadcrumb */
.breadcrumb {
  font-size:.85rem; color:var(--text-mute); margin-bottom:16px;
}
.breadcrumb a { color:var(--text-mute); }
.breadcrumb a:hover { color:var(--accent); }
.breadcrumb span { margin:0 6px; }

/* Mobil */
@media(max-width:768px) {
  .nav-toggle { display:grid; place-items:center; order:2; }
  .nav {
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--surface); border-bottom:1px solid var(--line);
    padding:12px; flex-direction:column; gap:4px;
  }
  .nav.open { display:flex; }
  .nav a { padding:10px 12px; }
  .header-actions { order:3; }
  .header-actions .btn { display:none; }
  .header-actions .theme-toggle { display:grid; }
  .header-inner { position:relative; flex-wrap:nowrap; }
  .site-main { padding:16px 0 40px; }
  .poem-head h1 { font-size:1.5rem; }
}

.rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
}
.rating-stars {
  display: inline-flex;
  gap: 4px;
}
.rating-stars .star {
  background: transparent;
  border: 0;
  padding: 2px 4px;
  font-size: 1.9rem;
  line-height: 1;
  color: #c9c3b8; 
  cursor: pointer;
  transition: color .15s, transform .1s, text-shadow .15s;
  text-shadow: 0 1px 1px rgba(0,0,0,.06);
}
.rating-stars .star:hover,
.rating-stars .star:focus-visible {
  color: #d4a017;
  outline: none;
  transform: scale(1.12);
}
.rating-stars .star.active {
  color: #d4a017;
  text-shadow: 0 1px 2px rgba(212,160,23,.35);
}
.rating-stars .star:disabled {
  cursor: default;
  transform: none;
}
.rating-stars .star.active:disabled {
  color: #b8860b;
}

/* KARANLIK TEMA — yıldızlar parlak altın, pasifler görünür gri */
[data-theme="dark"] .rating-stars .star {
  color: #5a5550;
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
[data-theme="dark"] .rating-stars .star:hover,
[data-theme="dark"] .rating-stars .star:focus-visible,
[data-theme="dark"] .rating-stars .star.active {
  color: #f2c14e;
  text-shadow: 0 0 6px rgba(242,193,78,.45), 0 1px 0 rgba(0,0,0,.5);
}
[data-theme="dark"] .rating-stars .star.active:disabled {
  color: #d4a017;
}
.rating-meta {
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  align-items: baseline;
  font-size: .9rem;
  color: var(--text-mute);
}
.rating-meta .rating-ort {
  font-weight: 700;
  color: var(--text);
  font-size: 1.05rem;
}
.rating-meta .rating-benim {
  color: var(--accent);
}
.rating-msg {
  min-height: 1.2em;
  font-size: .85rem;
}
.rating-msg.ok { color: #1f7a3a; }
.rating-msg.err { color: #b22a2a; }


@media (max-width: 768px) {
  .rating-stars .star { font-size: 1.5rem; }
}

/* Şiir sonu aksiyon barı — puanlama + defter */
.poem-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 24px;
    margin: 28px 0 8px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.poem-actions .rating { margin: 0; }
.poem-actions .defter-bar { margin: 0; }

@media (max-width: 600px) {
    .poem-actions {
        flex-direction: column;
        gap: 14px;
    }
}

/* ============================================================
   DEFTER BUTONU + LİNKİ
   Açık ve karanlık tema tam uyumlu
   ============================================================ */

/* --- Buton --- */
.defter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--surface, #fff);
    color: #8b3a3a;
    border: 1.5px solid #8b3a3a;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.defter-btn:hover {
    background: #8b3a3a;
    color: #fff;
}
.defter-btn.active {
    background: #8b3a3a;
    color: #fff;
}
.defter-btn:disabled {
    opacity: .6;
    cursor: wait;
}

/* --- Buton içi yıldız ikonu --- */
.defter-btn .defter-icon {
    font-size: 18px;
    line-height: 1;
    color: #d4a017;                     /* açık tema: altın */
    text-shadow: 0 1px 1px rgba(0,0,0,.08);
}
.defter-btn.active .defter-icon {
    color: #f2c14e;                     /* aktif: parlak altın */
    text-shadow: 0 0 4px rgba(242,193,78,.4);
}
.defter-btn:hover .defter-icon {
    color: #f2c14e;
}

/* --- "Defterim (N)" linki --- */
.defter-link {
    color: var(--text, #1a1a2e);
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px dashed #8b3a3a;
}
.defter-link:hover {
    color: #8b3a3a;
}
.defter-sayi {
    color: #8b3a3a;
    font-weight: 600;
}

/* ============================================================
   KARANLIK TEMA
   ============================================================ */
[data-theme="dark"] .defter-btn {
    background: #241515;
    color: #e8b4b4;
    border-color: #8b3a3a;
}
[data-theme="dark"] .defter-btn:hover,
[data-theme="dark"] .defter-btn.active {
    background: #8b3a3a;
    color: #fff;
}
[data-theme="dark"] .defter-btn .defter-icon {
    color: #f2c14e;
    text-shadow: 0 0 6px rgba(242,193,78,.5);
}
[data-theme="dark"] .defter-btn.active .defter-icon {
    color: #ffd97a;
    text-shadow: 0 0 8px rgba(255,217,122,.6);
}
[data-theme="dark"] .defter-link {
    color: #e8d8d0;                     /* açık krem — koyu üstünde net */
    border-bottom-color: #c0392b;
}
[data-theme="dark"] .defter-link:hover {
    color: #e8b4b4;
}
[data-theme="dark"] .defter-sayi {
    color: #f2c14e;                     /* altın vurgu */
}