/* Derdiman – Liquid Glass Cards. Tüm sınıflar .dd-glass ile başlar. */
.dd-glass {
  --dd-g-ink: var(--ink, #1B1D22);
  --dd-g-muted: var(--muted, #565A63);
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: 2.6rem; padding: clamp(1.4rem, 3.4vw, 2.8rem);
  border-radius: 14px; background: #D9DBE0; color: var(--dd-g-ink);
}
.dd-glass__bg { position: absolute; inset: 0; z-index: -2; }
.dd-glass__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; transform: scale(1.05); filter: saturate(.9); }
/* cam arkasında okunan yumuşak ışık lekeleri: derinliği gösterir */
.dd-glass::before, .dd-glass::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.dd-glass::before { width: 38%; aspect-ratio: 1; left: -6%; top: -30%; background: radial-gradient(circle, rgba(29, 31, 36, .5), rgba(29, 31, 36, 0) 68%); }
.dd-glass::after { width: 34%; aspect-ratio: 1; right: -4%; bottom: -34%; background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 66%); }

.dd-glass__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.4rem); margin: 0; padding: 0; list-style: none; }

.dd-glass__card {
  position: relative; display: flex; flex-direction: column; min-height: 15rem; padding: 1.5rem 1.4rem 1.6rem;
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .5) 58%, rgba(255, 255, 255, .68));
  -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(27, 29, 34, .1), 0 26px 44px -26px rgba(20, 22, 28, .55);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s;
  will-change: transform;
}
/* kenar yansıması: köşelerde parlak, ortada sönük ince çerçeve */
.dd-glass__card::before {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .08) 38%, rgba(255, 255, 255, .08) 62%, rgba(255, 255, 255, .7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* ışık: imleci izleyen parlama */
.dd-glass__card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 60%);
}
.dd-glass__card:hover::after { opacity: 1; }
.dd-glass__card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .3), 0 1px 2px rgba(27, 29, 34, .12), 0 34px 54px -26px rgba(20, 22, 28, .6); }

.dd-glass__no { margin: 0; font-size: .68rem; font-weight: 600; letter-spacing: .22em; color: var(--dd-g-muted); }
.dd-glass__card h3 { margin: 1rem 0 .7rem; font-family: var(--serif, Georgia, serif); font-weight: 500; font-size: clamp(1.45rem, 2vw, 1.8rem); line-height: 1.1; color: var(--dd-g-ink); }
.dd-glass__card p { margin: 0; margin-top: auto; font-size: .93rem; line-height: 1.55; color: #30333a; }

/* tarayıcı cam efektini desteklemiyorsa okunaklı düz yüzey */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dd-glass__card { background: rgba(255, 255, 255, .88); }
}
@media (max-width: 1000px) { .dd-glass__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .dd-glass__grid { grid-template-columns: 1fr; }
  .dd-glass__card { min-height: 0; }
  .dd-glass__card p { margin-top: 0; }
}
@media (hover: none), (prefers-reduced-motion: reduce) { .dd-glass__card { transform: none; transition: box-shadow .3s; } .dd-glass__card::after { display: none; } }
