/* Dijital Kent Arsivi - ortak stil */
body { font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.font-display { font-family:'Fraunces',Georgia,serif; font-optical-sizing:auto; }
.num { font-variant-numeric:tabular-nums; }

.hairline { box-shadow: 0 0 0 1px #E5E0D6; }
.dark .hairline { box-shadow: 0 0 0 1px #3A332B; }
.ring-focus:focus-visible { outline:2px solid #2C3E47; outline-offset:2px; }
.dark .ring-focus:focus-visible { outline-color:#6FA5BD; }

.placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(122,31,31,.06) 0 6px, rgba(122,31,31,0) 6px 14px),
    linear-gradient(180deg,#F7F2E8,#EFE8D9);
  color:#6B6660;
}
.dark .placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(232,199,126,.05) 0 6px, rgba(232,199,126,0) 6px 14px),
    linear-gradient(180deg,#221C16,#1A1612);
  color:#8A8478;
}
.placeholder-2 {
  background:
    repeating-linear-gradient(45deg, rgba(44,62,71,.06) 0 6px, rgba(44,62,71,0) 6px 14px),
    linear-gradient(180deg,#EAEEF0,#DDE3E6);
}
.dark .placeholder-2 {
  background:
    repeating-linear-gradient(45deg, rgba(111,165,189,.06) 0 6px, rgba(111,165,189,0) 6px 14px),
    linear-gradient(180deg,#1B2226,#15191C);
}
.placeholder-3 {
  background:
    repeating-linear-gradient(90deg, rgba(201,169,97,.08) 0 6px, rgba(201,169,97,0) 6px 14px),
    linear-gradient(180deg,#F4EAD0,#E8DAB6);
}
.dark .placeholder-3 {
  background:
    repeating-linear-gradient(90deg, rgba(232,199,126,.06) 0 6px, rgba(232,199,126,0) 6px 14px),
    linear-gradient(180deg,#221C16,#1A1612);
}

.paper-tex {
  background-image:
    radial-gradient(rgba(122,31,31,.025) 1px, transparent 1px),
    radial-gradient(rgba(201,169,97,.018) 1px, transparent 1px);
  background-size: 24px 24px, 17px 17px;
  background-position: 0 0, 12px 8px;
}
.dark .paper-tex {
  background-image:
    radial-gradient(rgba(232,199,126,.025) 1px, transparent 1px),
    radial-gradient(rgba(196,75,75,.018) 1px, transparent 1px);
}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#D4CDBE;border-radius:8px}
.dark ::-webkit-scrollbar-thumb{background:#3A332B}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Tarihte bugün şeridi: sağdan sola, sabit hızda (linear), kesintisiz sakin akış.
   width:max-content -> şerit gerçek içerik genişliğinde olur.
   Boşluk için ortak "gap" yerine her öğeye sağ-margin veriyoruz: böylece SON öğeden sonra da
   boşluk kalır ve -50% tam olarak bir kopyaya birebir oturur -> hiç sıçrama/dikiş olmaz.
   animation ... !important -> reduced-motion kısıtına takılmadan akmaya devam eder. Hızı tek yerden ayarla: 90s. */
.marquee-row { display:flex; width:max-content; animation: marq 90s linear infinite !important; }
.marquee-row > * { margin-right:24px; }
@keyframes marq { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-row:hover { animation-play-state: paused; }

details > summary { list-style:none; cursor:pointer; }
details > summary::-webkit-details-marker { display:none; }

input[type=range]{appearance:none;height:2px;background:#E5E0D6}
.dark input[type=range]{background:#3A332B}
input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:#7A1F1F;border:2px solid #FAFAF7;cursor:pointer}
.dark input[type=range]::-webkit-slider-thumb{background:#C44B4B;border-color:#14110E}

mark{background:rgba(201,169,97,.32);color:inherit;padding:0 .15em;border-radius:2px}
.dark mark{background:rgba(232,199,126,.25)}

.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem; border-radius:8px; font-size:13.5px; font-weight:500; line-height:1; transition:opacity .15s, background .15s; }
.btn-primary { background:#7A1F1F; color:#FAFAF7; }
.btn-primary:hover { background:#641818; }
.dark .btn-primary { background:#C44B4B; color:#14110E; }
.btn-ink { background:#1A1A1A; color:#FAFAF7; }
.dark .btn-ink { background:#2A241D; color:#F5F1E8; }
.btn-ghost { box-shadow:0 0 0 1px #E5E0D6; background:transparent; }
.dark .btn-ghost { box-shadow:0 0 0 1px #3A332B; }

.flash { padding:.85rem 1rem; border-radius:8px; font-size:13.5px; margin-bottom:1rem; }
.flash-ok { background:rgba(45,106,79,.12); color:#1f4d39; border:1px solid rgba(45,106,79,.3); }
.flash-err { background:rgba(153,27,27,.12); color:#7a1f1f; border:1px solid rgba(153,27,27,.3); }
.flash-info { background:rgba(30,64,175,.10); color:#1e3a8a; border:1px solid rgba(30,64,175,.25); }

.tag-chip { display:inline-flex; align-items:center; gap:.35rem; font-size:10.5px; font-weight:500; border-radius:9999px; padding:.15rem .55rem; border:1px solid #E5E0D6; }
.dark .tag-chip { border-color:#3A332B; }
.tag-chip.kind-period { color:#2C3E47; background:rgba(44,62,71,.05); border-color:rgba(44,62,71,.3); }
.tag-chip.kind-type { color:#7A1F1F; background:rgba(122,31,31,.05); border-color:rgba(122,31,31,.3); }
.tag-chip.kind-rights { color:#C9A961; background:rgba(201,169,97,.1); border-color:rgba(201,169,97,.5); }
.tag-chip.kind-new { color:#7A1F1F; background:rgba(122,31,31,.1); border-color:rgba(122,31,31,.5); }

/* ============================================================
   Anasayfa açılış animasyonları — scroll-reveal + sayaç + daktilo
   Kural: öğeler YALNIZCA JS aktifken (.reveal-on) gizli başlar.
   JS kapalı veya bir hata olursa hiçbir şey gizlenmez; tasarım
   birebir korunur. Sadece opacity + transform kullanılır (GPU,
   reflow yok) → scroll akıcı kalır, takılma olmaz.
   ============================================================ */
.reveal-on [data-reveal]{
  opacity:0;
  transform: translateY(26px);
  transition: opacity .75s cubic-bezier(.22,.61,.36,1),
              transform .75s cubic-bezier(.22,.61,.36,1);
}
.reveal-on [data-reveal="left"]{  transform: translateX(-44px); }
.reveal-on [data-reveal="right"]{ transform: translateX(44px); }
.reveal-on [data-reveal].is-in{ opacity:1; transform:none; }

/* Kart ızgaraları: çocuklar teker teker (stagger) yukarıdan gelir */
.reveal-on [data-reveal-stagger] > *{
  opacity:0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1),
              transform .6s cubic-bezier(.22,.61,.36,1);
}
.reveal-on [data-reveal-stagger].is-in > *{ opacity:1; transform:none; }

/* Daktilo (typewriter) — hero başlığı yazılana kadar gizli, harf harf gelir */
.reveal-on [data-type]{ opacity:0; }
.reveal-on .tw{ opacity:0; transition: opacity .1s linear; }
.tw-caret{
  display:inline-block; width:.08em; height:1.05em;
  background:currentColor; margin-left:.04em; border-radius:1px;
  vertical-align:-.14em;
  animation: tw-blink .9s steps(1) infinite;
}
@keyframes tw-blink{ 0%,49%{opacity:.9} 50%,100%{opacity:0} }

/* Erişilebilirlik: hareketi azalt seçeneği açıksa animasyon yok, her şey görünür. */
@media (prefers-reduced-motion: reduce){
  .reveal-on [data-reveal],
  .reveal-on [data-reveal-stagger] > *{ opacity:1 !important; transform:none !important; transition:none !important; }
  .reveal-on [data-type]{ opacity:1 !important; }
  .reveal-on .tw{ opacity:1 !important; }
  .tw-caret{ display:none !important; }
}

/* Arama filtre paneli: kendi içinde kayan alan. Kaydırma çubuğu ince ve ayrı bir
   olukta (gutter) durur → sağdaki sayıların üstüne binmez, tasarıma sinen bir çizgi olur. */
.filtre-scroll {
  scrollbar-gutter: stable;
  scrollbar-width: thin;                     /* Firefox */
  scrollbar-color: #C9BEA6 transparent;      /* Firefox: thumb / track */
}
.dark .filtre-scroll { scrollbar-color: #4A4238 transparent; }
.filtre-scroll::-webkit-scrollbar { width: 6px; }
.filtre-scroll::-webkit-scrollbar-track { background: transparent; }
.filtre-scroll::-webkit-scrollbar-thumb { background: #D4CDBE; border-radius: 8px; }
.filtre-scroll::-webkit-scrollbar-thumb:hover { background: #C9BEA6; }
.dark .filtre-scroll::-webkit-scrollbar-thumb { background: #4A4238; }

/* SSS (yardım) akordeon — sade artı işareti açıkken ×'e döner, içerik yumuşak açılır.
   Yalnızca .faq-* sınıfları hedeflenir; sitenin diğer <details> öğeleri etkilenmez. */
.faq-item { transition: box-shadow .2s ease; }
.faq-summary { cursor: pointer; }
.faq-plus {
  position: relative; width: 15px; height: 15px; flex: none; color: #6B6660;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), color .2s ease;
}
.faq-plus::before, .faq-plus::after {
  content: ""; position: absolute; background: currentColor; border-radius: 2px;
}
.faq-plus::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }   /* yatay çizgi */
.faq-plus::after  { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }   /* dikey çizgi */
.faq-summary:hover .faq-plus { color: #7A1F1F; }
.dark .faq-summary:hover .faq-plus { color: #C44B4B; }
details[open] .faq-plus { transform: rotate(135deg); color: #7A1F1F; }  /* + → × */
.dark details[open] .faq-plus { color: #C44B4B; }
details[open].faq-item { box-shadow: 0 0 0 1px #D4CDBE; }
.dark details[open].faq-item { box-shadow: 0 0 0 1px #4A4238; }
.faq-body { animation: faq-open .3s cubic-bezier(.22,.61,.36,1); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }