/* yardim-destek.css — Yardım / Destek merkezi */
.yd { --yd-navy: #0b1b33; --yd-text: #1e293b; --yd-muted: #64748b; --yd-line: #e7ebf2; }

/* ---------- Başlık + kartlar ---------- */
.yd-hero { position: relative; overflow: hidden; padding: 30px 0 56px; background: #f8fafd; }
.yd-hero__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(600px 320px at 8% 0%, rgba(59, 130, 246, .10), transparent 70%),
    radial-gradient(560px 300px at 96% 10%, rgba(244, 63, 94, .08), transparent 70%),
    radial-gradient(700px 380px at 50% 105%, rgba(16, 185, 129, .08), transparent 70%);
}
.yd-hero .container { position: relative; }
.yd-crumb { display: flex; justify-content: center; gap: 8px; font-size: .8rem; font-weight: 700; color: #94a3b8; margin-bottom: 18px; }
.yd-crumb a { color: var(--yd-navy); text-decoration: none; }
.yd-crumb a:hover { color: #dc2626; }
.yd-crumb b { color: var(--yd-muted); }
.yd-kicker { text-align: center; margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #3b82f6; }
.yd-hero h1 { text-align: center; font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 800; color: var(--yd-navy); letter-spacing: -.02em; margin: 6px 0 10px; }
.yd-lead { text-align: center; color: var(--yd-muted); max-width: 620px; margin: 0 auto 34px; line-height: 1.6; }

.yd-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; max-width: 1110px; margin: 0 auto; }
.yd-card {
  --c: #2563eb; --c-soft: rgba(37, 99, 235, .10);
  grid-column: span 2; position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--yd-line); border-radius: 22px; padding: 30px 30px 28px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.yd-card--genis { grid-column: span 3; }
.yd-card::before {
  content: ""; position: absolute; top: -90px; right: -90px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, var(--c-soft), transparent 70%); pointer-events: none;
}
.yd-card:hover { transform: translateY(-4px); box-shadow: 0 26px 54px rgba(15, 23, 42, .1); border-color: color-mix(in srgb, var(--c) 30%, #e7ebf2); }
.yd-card--mavi { --c: #2563eb; --c-soft: rgba(37, 99, 235, .12); }
.yd-card--kirmizi { --c: #e11d48; --c-soft: rgba(225, 29, 72, .11); }
.yd-card--yesil { --c: #059669; --c-soft: rgba(5, 150, 105, .12); }
.yd-card--turuncu { --c: #d97706; --c-soft: rgba(217, 119, 6, .13); }
.yd-card--mor { --c: #4f46e5; --c-soft: rgba(79, 70, 229, .12); }

.yd-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 22px; position: relative; }
.yd-ico { position: relative; width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; background: #fff; border: 1px solid var(--yd-line); box-shadow: 0 8px 20px rgba(15, 23, 42, .06); color: var(--c); font-size: 1.9rem; }
.yd-ico__mini { position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-size: .78rem; border: 2px solid #fff; }
.yd-tag { font-size: .74rem; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: var(--c-soft); color: var(--c); white-space: nowrap; }
.yd-card h2 { font-size: 1.45rem; font-weight: 800; color: var(--yd-text); margin: 0 0 10px; position: relative; }
.yd-card p { color: var(--yd-muted); line-height: 1.65; margin: 0 0 24px; flex: 1; position: relative; }
.yd-btn {
  align-self: flex-start; position: relative;
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 999px;
  background: var(--c); color: #fff; font-weight: 750; font-size: .9rem; text-decoration: none;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--c) 28%, transparent);
  transition: filter .15s, transform .15s;
}
.yd-btn:hover { color: #fff; filter: brightness(.92); }
.yd-btn:hover i { transform: translateX(2px); }
.yd-btn i { font-size: .8rem; transition: transform .15s; }
.yd-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--c) 40%, transparent); outline-offset: 3px; }
.yd-btn::after { content: ""; position: absolute; inset: -400px; }   /* tüm kart tıklanabilir */
.yd-card { cursor: pointer; }

.yd-quick { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 30px auto 0; padding: 0; max-width: 1110px; }
.yd-quick a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  background: #fff; border: 1px solid var(--yd-line); color: var(--yd-text); font-weight: 700; font-size: .88rem; text-decoration: none;
  transition: border-color .15s, color .15s;
}
.yd-quick a:hover { border-color: var(--yd-navy); color: var(--yd-navy); }
.yd-quick i { color: #dc2626; }

/* ---------- Ücretsiz tanıtım ---------- */
.yd-demo {
  position: relative; overflow: hidden; padding: 70px 0;
  background:
    radial-gradient(700px 420px at 30% 70%, rgba(14, 165, 233, .10), transparent 70%),
    radial-gradient(520px 520px at 108% 50%, rgba(244, 63, 94, .07), transparent 70%),
    #f6fafc;
  border-top: 1px solid var(--yd-line);
}
.yd-demo__in { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; max-width: 1040px; position: relative; }
.yd-demo h2 { font-size: clamp(2.2rem, 4.4vw, 3.2rem); font-weight: 800; line-height: 1.05; color: var(--yd-navy); margin: 0 0 16px; letter-spacing: -.02em; }
.yd-demo h2 em { font-style: normal; color: #16a34a; }
.yd-demo__k { margin: 0 0 12px; padding-left: 12px; border-left: 3px solid #22c55e; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #475569; }
.yd-demo__p { color: var(--yd-muted); line-height: 1.6; max-width: 440px; margin: 0 0 24px; }
.yd-demo__btn {
  height: 54px; padding: 0 30px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #4ade80, #16a34a); color: #fff; font: inherit; font-weight: 800; font-size: 1rem;
  box-shadow: 0 14px 28px rgba(22, 163, 74, .3); transition: transform .15s, box-shadow .15s;
}
.yd-demo__btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(22, 163, 74, .36); }
.yd-demo__btn:focus-visible { outline: 3px solid rgba(22, 163, 74, .4); outline-offset: 3px; }
.yd-demo__art svg { width: 100%; max-width: 440px; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 20px 30px rgba(11, 27, 51, .12)); }
.yd-ripple { transform-origin: 196px 98px; animation: ydRipple 2.2s ease-out infinite; }
@keyframes ydRipple { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }

.yd-shape { position: absolute; pointer-events: none; }
.yd-shape--tri { left: 8%; top: 14%; width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 30px solid #86efac; opacity: .7; animation: ydYuz 7s ease-in-out infinite; }
.yd-shape--tri::after { content: ""; position: absolute; left: -12px; top: 8px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 19px solid #f6fafc; }
.yd-shape--tri2 { right: 4%; top: 30%; border-left: 13px solid transparent; border-right: 13px solid transparent; border-bottom: 22px solid #fecdd3; opacity: .8; animation: ydYuz 9s ease-in-out infinite reverse; }
.yd-shape--circle { left: 4%; bottom: 22%; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #93c5fd; animation: ydYuz 8s ease-in-out infinite; }
.yd-shape--x { right: 9%; bottom: 26%; color: #fda4af; font-size: 1.3rem; font-weight: 700; }
@keyframes ydYuz { 50% { transform: translateY(-10px) rotate(8deg); } }

/* ---------- Duyarlı ---------- */
@media (max-width: 991.98px) {
  .yd-grid { grid-template-columns: repeat(2, 1fr); }
  .yd-card, .yd-card--genis { grid-column: span 1; }
  .yd-card:last-child { grid-column: 1 / -1; }
  .yd-demo__in { grid-template-columns: 1fr; text-align: center; }
  .yd-demo__k { display: inline-block; }
  .yd-demo__p { margin-left: auto; margin-right: auto; }
}
@media (max-width: 575.98px) {
  .yd-hero { padding: 22px 0 40px; }
  .yd-grid { grid-template-columns: 1fr; gap: 14px; }
  .yd-card:last-child { grid-column: auto; }
  .yd-card { padding: 22px; border-radius: 18px; }
  .yd-card h2 { font-size: 1.25rem; }
  .yd-card__top { margin-bottom: 16px; }
  .yd-ico { width: 54px; height: 54px; font-size: 1.6rem; }
  .yd-quick { justify-content: stretch; }
  .yd-quick li { flex: 1 1 100%; }
  .yd-quick a { width: 100%; justify-content: center; }
  .yd-demo { padding: 48px 0; }
  .yd-shape { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .yd-ripple, .yd-shape { animation: none; }
  .yd-card, .yd-btn i, .yd-demo__btn { transition: none; }
}