/* Sâyename — Özel Sanatsal UI Varlıkları ve Vintage Katmanı */

/* 1. Hero ve Kitap Sahnesi */
.hero-visual { padding-bottom: 28px; }
.cover-scene { height: 330px; position: relative; }
.cover-outline { width: 78%; height: 247px; top: 33px; right: 6%; background: #e9dfd1; border: 1px solid #d1bfaa; transform: none; }
.hero-book { position: absolute; width: 245px; max-width: 78%; height: 290px; top: -15px; right: 13%; object-fit: contain; filter: drop-shadow(5px 9px 5px #432c3820); }
.scene-caption { bottom: 22px; right: 8%; transform: none; color: #7e665b; font-size: 14px; }
.scene-moon { position: absolute; top: 16px; left: 16px; width: 34px; height: 37px; object-fit: contain; opacity: .78; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(168,126,80,.25)); transition: transform 260ms ease; z-index: 1; }
.cover-scene:hover .scene-moon { transform: translateY(-2px) rotate(-6deg); }

.hero-eyebrow { display: flex; align-items: center; gap: 6px; }
.eyebrow-flower { width: 14px; height: 13px; object-fit: contain; opacity: .82; vertical-align: middle; }

.featured-preview { margin-top: -45px; position: relative; }
.featured-bookmark { position: absolute; top: -11px; right: 18px; width: 27px; height: auto; pointer-events: none; z-index: 3; filter: drop-shadow(0 3px 5px rgba(0,0,0,.15)); }

/* 2. Bölüm Ayraçları (Section Flourish) */
.dictionary { position: relative; margin-top: 14px; }
.section-divider-wrap { display: flex; justify-content: center; align-items: center; width: 100%; margin: 18px 0 -12px; position: relative; z-index: 2; pointer-events: none; }
.section-flourish-divider { max-width: min(520px, 86%); height: auto; display: block; filter: drop-shadow(0 1px 2px rgba(86,46,67,.06)); }
.dictionary-heading { padding-top: 36px; }

/* 3. Kelime Detay Sayfası */
.detail-content { position: relative; }
.detail-corner { position: absolute; pointer-events: none; opacity: .68; z-index: 2; transition: opacity 200ms ease; }
.detail-corner-tl { top: 14px; left: 14px; width: 44px; height: auto; }
.detail-corner-tr { top: 14px; right: 14px; width: 38px; height: auto; }
.detail-content:hover .detail-corner { opacity: .88; }

.definition-flourish { display: block; width: 154px; height: auto; margin: -18px 0 24px; filter: drop-shadow(0 1px 2px rgba(86,46,67,.08)); }
.detail-word { margin-bottom: 35px; }

.detail-nav-divider { display: block; width: 100%; max-width: 440px; height: auto; margin: 38px auto 8px; opacity: .6; pointer-events: none; }

.word-nav-link { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); transition: color 180ms ease, transform 180ms ease; }
.word-nav-link:hover { color: var(--plum); }
.word-nav-arrow { width: 25px; height: auto; object-fit: contain; vertical-align: middle; transition: transform 180ms ease; }
.word-nav-arrow-prev { transform: translateX(0); }
.word-nav-link:hover .word-nav-arrow-prev { transform: translateX(-4px); }
.word-nav-arrow-next { transform: translateX(0); }
.word-nav-link:hover .word-nav-arrow-next { transform: translateX(4px); }

.detail-colophon { display: flex; align-items: center; justify-content: center; gap: 12px; }
.colophon-accent { width: 12px; height: 12px; object-fit: contain; opacity: .6; }

/* 4. Alfabe Çubuğu Vurguları */
.letter-button { transition: color 140ms, background 140ms, transform 140ms; }
.letter-button[aria-pressed=true] { color: var(--page); background: var(--plum); font-weight: 500; box-shadow: 0 2px 6px rgba(86,46,67,.32); }
.letter-button[aria-pressed=true]::after { content: ''; position: absolute; width: 4px; height: 4px; background: #cba265; transform: rotate(45deg) translateX(-50%); bottom: 2px; left: 50%; border-radius: .5px; }

/* 5. Altbilgi (Footer) */
.site-footer { position: relative; padding-top: 24px; border-top: none !important; display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: center !important; gap: 14px 20px !important; }
.footer-divider-wrap { width: 100%; flex-basis: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: 20px; pointer-events: none; opacity: .72; }
.footer-divider { max-width: min(440px, 80%); height: auto; display: block; }

.footer-seal { display: block; width: 44px; height: 45px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 3px 6px rgba(67,35,51,.22)); transform: rotate(-5deg); transition: transform 220ms ease, filter 220ms ease; }
.footer-seal:hover { transform: rotate(0deg) scale(1.06); filter: drop-shadow(0 5px 9px rgba(67,35,51,.3)); }
.tiny-rule { background: #a47e50; }

/* 6. Duyarlı Ekran Davranışları */
@media (max-width: 1100px) {
  .cover-scene { height: 313px; }
  .cover-outline { height: 236px; top: 30px; }
  .hero-book { width: 232px; height: 279px; right: 13%; }
  .scene-caption { bottom: 22px; font-size: 13px; }
  .section-flourish-divider { max-width: min(480px, 90%); }
}

@media (max-width: 900px) {
  .cover-scene { height: 291px; }
  .cover-outline { height: 220px; top: 27px; }
  .hero-book { width: 208px; height: 253px; right: 11%; top: -13px; }
  .scene-caption { bottom: 18px; font-size: 12px; }
  .featured-preview { margin-top: -29px; }
  .section-flourish-divider { max-width: min(420px, 92%); }
  .detail-corner-tl { width: 36px; }
  .detail-corner-tr { width: 32px; }
}

@media (max-width: 580px) {
  .hero-visual { padding: 0; }
  .cover-scene { height: 163px; }
  .cover-outline { width: 109px; height: 135px; top: 14px; right: 0; }
  .hero-book { width: 125px; height: 158px; max-width: none; top: -8px; right: -1px; filter: drop-shadow(3px 5px 3px #432c381a); }
  .scene-moon { width: 24px; height: 26px; top: 8px; left: 8px; }
  .featured-bookmark { width: 22px; top: -8px; right: 12px; }
  .section-divider-wrap { margin: 12px 0 -8px; }
  .section-flourish-divider { max-width: 290px; }
  .dictionary-heading { padding-top: 26px; }
  .definition-flourish { width: 130px; margin-top: -12px; margin-bottom: 18px; }
  .detail-word { margin-bottom: 26px; }
  .detail-corner-tl { width: 26px; top: 10px; left: 10px; }
  .detail-corner-tr { width: 24px; top: 10px; right: 10px; }
  .detail-nav-divider { margin: 28px auto 6px; }
  .word-nav-arrow { width: 20px; }
  .footer-divider-wrap { margin-bottom: 18px; }
  .footer-divider { max-width: 280px; }
  .footer-seal { width: 36px; height: 37px; }
}

@media (max-width: 359px) {
  .cover-outline { width: 99px; height: 127px; top: 12px; }
  .hero-book { width: 114px; height: 145px; right: -2px; }
  .cover-scene { height: 153px; }
  .detail-corner { display: none; }
  .section-flourish-divider { max-width: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-moon, .footer-seal, .word-nav-arrow, .letter-button { transition: none !important; transform: none !important; }
}