/* "Her kulp, kendi ağacının izini taşır" bölümü (yalnızca index.html kullanır) */
.doku-bolum { background: #1f1d1a; color: #fff; padding: 120px 0 100px; overflow: hidden; }
.doku-baslik { max-width: 720px; margin: 0 auto; text-align: center; }
.doku-baslik .ust-yazi { color: #c4d8b8; }
.doku-baslik h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.doku-baslik p { color: #d9d5cd; font-size: 1.06rem; margin-top: 18px; }

/* Dört kayın parçası */
.parcalar-kutu {
  margin: 56px auto 0; max-width: 980px; padding: 40px 32px 30px; border-radius: 22px;
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .06);
}
.parcalar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; justify-items: center; }
.parca { position: relative; width: 100%; max-width: 178px; text-align: center; cursor: pointer; transition: opacity .5s var(--gecis), filter .5s; }
.parca figure { margin: 0; }
.parca-gorsel {
  position: relative; border-radius: 46px; overflow: hidden;
  transition: transform .8s var(--salinim), box-shadow .6s;
  box-shadow: 0 18px 36px rgba(0, 0, 0, .35);
}
.parca-gorsel img { display: block; width: 100%; height: auto; transition: filter .8s var(--gecis); }
.parca-gorsel::after {
  content: ""; position: absolute; inset: -20% -60%; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, 0) 60%);
  transform: translateX(-70%); transition: transform 1.1s var(--gecis);
}
.parca:hover .parca-gorsel, .parca.vurgu .parca-gorsel { transform: translateY(-12px) rotate(-1.5deg); box-shadow: 0 30px 50px rgba(0, 0, 0, .5); }
.parca:hover .parca-gorsel::after, .parca.vurgu .parca-gorsel::after { transform: translateX(70%); }
.parcalar.odak .parca:not(.vurgu) { opacity: .38; filter: saturate(.7); }
.parca figcaption { margin-top: 16px; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #b8b4ac; transition: color .3s; }
.parca.vurgu figcaption, .parca:hover figcaption { color: var(--turuncu); }

/* Notlar (2 × 2) */
.doku-notlar { list-style: none; margin: 64px auto 0; padding: 0; max-width: 980px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.doku-notlar li {
  display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start;
  padding: 22px 12px 22px 0; border-top: 1px solid rgba(255, 255, 255, .12);
  cursor: default; transition: background .3s, padding .5s var(--gecis);
}
.doku-notlar li:hover, .doku-notlar li.aktif { padding-left: 12px; background: rgba(255, 255, 255, .04); }
.doku-notlar svg { width: 44px; height: 44px; color: #c4d8b8; transition: color .3s; }
.doku-notlar li:hover svg, .doku-notlar li.aktif svg { color: var(--turuncu); }
.doku-notlar h3 { font-family: "Manrope", sans-serif; font-size: 1.05rem; font-weight: 700; }
.doku-notlar p { color: #b8b4ac; font-size: .95rem; margin-top: 4px; }

/* Dipnot */
.doku-dipnot { max-width: 980px; margin: 48px auto 0; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .12); }
.doku-dipnot strong { display: block; font-size: 1.02rem; }
.doku-dipnot p { color: #a9a59d; font-size: .88rem; margin-top: 6px; }

/* Kütükten kulpa süreç */
.surec { list-style: none; margin: 90px 0 0; padding: 48px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.surec li { position: relative; padding-right: 12px; }
.surec svg { width: 52px; height: 52px; color: #e6e3dc; display: block; margin-bottom: 18px; }
.surec li:not(:last-child)::after {
  content: ""; position: absolute; top: 26px; left: 72px; right: -20px; height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
}
.surec h3 { font-family: "Manrope", sans-serif; font-size: 1rem; font-weight: 700; }
.surec p { color: #b8b4ac; font-size: .92rem; margin-top: 6px; max-width: 240px; }

/* Sırayla, salınarak belirme */
.js .parca, .js .surec li { opacity: 0; transform: translateY(46px) rotate(-2deg); transition: opacity .9s var(--gecis), transform 1.3s var(--salinim); transition-delay: var(--sira, 0ms); }
.js .parcalar.acik .parca, .js .surec.acik li { opacity: 1; transform: none; }
.js .parcalar.acik.odak .parca:not(.vurgu) { opacity: .38; }

@media (max-width: 900px) {
  .doku-bolum { padding: 84px 0 72px; }
  .parcalar-kutu { padding: 28px 18px 22px; }
  .parcalar { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .doku-notlar { grid-template-columns: 1fr; }
  .surec { grid-template-columns: 1fr 1fr; row-gap: 40px; margin-top: 72px; }
  .surec li::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .js .parca, .js .surec li { opacity: 1; transform: none; } }