/* Derdiman – 3D Radial Gallery. Tüm sınıflar .dd-radial ile başlar; başka bileşenlerle çakışmaz. */
.dd-radial {
  --dd-ink: var(--ink, #1B1D22);
  --dd-muted: var(--muted, #565A63);
  --dd-line: var(--line, #D4D7DD);
  --dd-bg: var(--bg, #F3F4F6);
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
  color: var(--dd-ink);
  font-family: var(--sans, Inter, system-ui, sans-serif);
  -webkit-user-select: none;
  user-select: none;
}

.dd-radial__etiket { margin: 0 0 1.4rem; text-align: center; font-size: .7rem; font-weight: 500; letter-spacing: .24em; color: var(--dd-muted); }

/* ---- JS yokken: yatay kaydırmalı şerit (erişilebilir yedek) ---- */
.dd-radial__viewport { overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--kenar, 1.25rem) 1rem; }
.dd-radial__ring { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.dd-radial__item { flex: 0 0 min(72vw, 18rem); scroll-snap-align: center; }
.dd-radial__controls { display: none; }

.dd-radial__card {
  display: block;
  position: relative;
  background: #fff;
  border: 1px solid var(--dd-line);
  border-radius: 6px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 28px 44px -30px rgba(27, 29, 34, .5);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s;
}
.dd-radial__card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.dd-radial__cap { display: flex; align-items: baseline; gap: .7rem; padding: .8rem 1rem .9rem; font-family: var(--serif, Georgia, serif); font-size: 1.12rem; line-height: 1.2; background: #fff; }
.dd-radial__cap b { font-family: var(--sans, Inter, system-ui, sans-serif); font-size: .66rem; font-weight: 600; letter-spacing: .2em; color: var(--dd-muted); }
/* cam parlaması: kenarda ince ışık çizgisi ve çapraz yansıma */
.dd-radial__card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, 0) 38%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
  opacity: .7; transition: opacity .5s;
}

/* ---- 3D mod (JS .is-3d ekler) ---- */
.dd-radial.is-3d .dd-radial__viewport {
  --dd-w: 280px; --dd-r: 320px;
  position: relative; overflow: hidden; scroll-snap-type: none; padding: 0;
  height: calc(var(--dd-w) * .75 + 8.6rem);
  perspective: 1500px; perspective-origin: 50% 38%;
  cursor: grab; touch-action: pan-y;
}
.dd-radial.is-3d .dd-radial__viewport.is-drag { cursor: grabbing; }
.dd-radial.is-3d .dd-radial__ring {
  position: absolute; left: 50%; top: 1.6rem; display: block;
  width: var(--dd-w); height: calc(var(--dd-w) * .75 + 3rem); margin-left: calc(var(--dd-w) / -2);
  transform-style: preserve-3d; will-change: transform;
}
.dd-radial.is-3d .dd-radial__item {
  position: absolute; inset: 0; width: auto; flex: none;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform: rotateY(calc(var(--i) * var(--dd-a, 60deg))) translateZ(var(--dd-r));
  will-change: opacity;
}
/* zemin gölgesi */
.dd-radial.is-3d .dd-radial__viewport::after {
  content: ""; position: absolute; left: 50%; bottom: .6rem; width: calc(var(--dd-w) * 1.9); height: 1.6rem;
  transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(27, 29, 34, .16), rgba(27, 29, 34, 0) 70%);
}

/* hover: kart hafifçe büyür (yalnızca fareli cihazlarda) */
@media (hover: hover) and (pointer: fine) {
  .dd-radial.is-3d .dd-radial__item.is-front .dd-radial__card:hover,
  .dd-radial__card:focus-visible { transform: translateZ(26px) scale(1.07); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 40px 60px -28px rgba(27, 29, 34, .6); }
  .dd-radial__card:hover::after { opacity: 1; }
}
.dd-radial__card:focus-visible { outline: 2px solid var(--dd-ink); outline-offset: 3px; }

/* ---- denetimler ---- */
.dd-radial.is-3d .dd-radial__controls {
  display: flex; align-items: center; justify-content: center; gap: .9rem; margin-top: 1rem;
}
.dd-radial__btn {
  display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0;
  border: 1px solid var(--dd-line); border-radius: 50%; background: rgba(255, 255, 255, .7);
  color: var(--dd-ink); font: inherit; font-size: 1rem; line-height: 1; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .25s, border-color .25s, transform .25s;
}
.dd-radial__btn:hover { background: #fff; border-color: #A9ADB6; }
.dd-radial__btn:focus-visible { outline: 2px solid var(--dd-ink); outline-offset: 3px; }
.dd-radial__status { min-width: 12rem; text-align: center; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dd-muted); }
.dd-radial__status strong { display: block; margin-top: .2rem; font-family: var(--serif, Georgia, serif); font-size: 1.15rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--dd-ink); }

@media (max-width: 640px) {
  .dd-radial.is-3d .dd-radial__viewport { perspective: 1100px; }
  .dd-radial__status { min-width: 9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dd-radial__card, .dd-radial__card::after, .dd-radial__btn { transition: none; }
}