/* Detay sayfalari (hizmet, blog, hakkimizda) icin paylasilan gorsel iyilestirme katmani.
   Ana sayfa markup'ina dokunmaz; yalnizca bu sayfalarda yuklenir. */

:root {
  --dp-primary: var(--primary-color, #c9a96e);
  --dp-ink: #211d16;
  --dp-muted: #6f6656;
  --dp-surface: #fdfbf7;
  --dp-shadow: 32 26 12; /* sicak, altin tonlu golge rengi (rgb) */
}

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(201, 169, 110, 0.10), transparent 60%),
    #faf7f2;
  color: var(--dp-ink);
}

/* ---- Tipografi ---- */
.detail-wrap h1,
.detail-wrap h2 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--dp-ink);
  text-wrap: balance;
}
.detail-wrap h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.detail-wrap h2 { letter-spacing: -0.01em; }
.detail-wrap p,
.detail-wrap li {
  font-family: 'Inter', system-ui, sans-serif;
  color: #4c4536;
  max-width: 68ch;
  text-wrap: pretty;
}
.detail-wrap .meta {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ---- Yuzeyler: altin tonlu golge, yumusak kenar ---- */
.detail-card,
.blog-list-card {
  background: var(--dp-surface);
  border: 1px solid rgba(201, 169, 110, 0.18);
  box-shadow:
    0 1px 2px rgba(var(--dp-shadow), 0.05),
    0 12px 32px -12px rgba(var(--dp-shadow), 0.18);
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.blog-list-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 169, 110, 0.45);
  box-shadow:
    0 2px 4px rgba(var(--dp-shadow), 0.06),
    0 20px 44px -14px rgba(var(--dp-shadow), 0.26);
}
.blog-list-card h2 a { transition: color 0.25s ease; }
.blog-list-card:hover h2 a { color: var(--dp-primary); }

/* ---- Butonlar: hover kaldirma, basma hissi, gorunur odak ---- */
.detail-wrap .btn,
.navbar .btn {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
  will-change: transform;
}
.detail-wrap .btn:hover,
.navbar .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(var(--dp-shadow), 0.35);
}
.detail-wrap .btn:active,
.navbar .btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 4px 10px -6px rgba(var(--dp-shadow), 0.3);
}
.detail-wrap a:focus-visible,
.navbar a:focus-visible,
.detail-wrap summary:focus-visible {
  outline: 2px solid var(--dp-primary);
  outline-offset: 3px;
  border-radius: 4px;
}
.detail-wrap .read-more { transition: color 0.2s ease, letter-spacing 0.25s ease; }
.detail-wrap .read-more:hover { letter-spacing: 0.02em; color: var(--dp-primary); }

/* ---- SSS akordiyonu: chevron + acilis animasyonu ---- */
.ella-faq details {
  background: #fbf8f2;
  border-color: rgba(201, 169, 110, 0.22);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.ella-faq details:hover {
  border-color: rgba(201, 169, 110, 0.5);
  background: #fcfaf5;
}
.ella-faq details[open] {
  border-color: rgba(201, 169, 110, 0.55);
  box-shadow: 0 8px 20px -10px rgba(var(--dp-shadow), 0.18);
}
.ella-faq summary {
  position: relative;
  padding-right: 34px;
}
.ella-faq summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--dp-primary);
  border-bottom: 2px solid var(--dp-primary);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ella-faq details[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}
.ella-faq details[open] > p {
  animation: dp-faq-open 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes dp-faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Kaydirma ile kademeli belirme ---- */
.dp-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--dp-delay, 0ms);
}
.dp-reveal.dp-in {
  opacity: 1;
  transform: none;
}

/* ---- Kapak gorseli: yumusak yaklasma ---- */
.detail-cover {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.detail-card:hover .detail-cover { transform: scale(1.02); }
.detail-card { overflow: hidden; }

/* ---- Hareket azaltma tercihi: tum animasyonlari kapat ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dp-reveal { opacity: 1; transform: none; transition: none; }
  .detail-wrap .btn,
  .navbar .btn,
  .detail-cover,
  .blog-list-card,
  .ella-faq summary::after { transition: none; }
  .ella-faq details[open] > p { animation: none; }
  .blog-list-card:hover,
  .detail-card:hover .detail-cover { transform: none; }
}