/* آموزش‌ها (public): built on magazine.css (same cards, tags and CTA), plus what video needs. */
.tu-kinds { display: inline-flex; gap: 4px; padding: 4px; border-radius: 99px; border: 1px solid var(--border); background: rgb(var(--fg-rgb) / .04); width: fit-content; }
.tu-kinds a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 99px; color: var(--text-muted); font-weight: 600; font-size: .9rem; transition: background .25s, color .25s; }
.tu-kinds a[aria-current] { background: var(--pill-bg); color: var(--pill-ink); }
.tu-kinds svg, .tu-play svg { width: 15px; height: 15px; fill: currentColor; }
.tu-kinds a:last-child svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

.tu-card .mg-card-img img { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.tu-card a:hover .mg-card-img img { transform: scale(1.04); }
.tu-play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgb(10 14 26 / .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgb(255 255 255 / .3); transition: transform .4s cubic-bezier(.34, 1.4, .5, 1), background .3s; }
.tu-play svg { width: 22px; height: 22px; margin-inline-start: -3px; transform: scaleX(-1); }
[dir=ltr] .tu-play svg { transform: none; margin-inline-start: 3px; }
.tu-card a:hover .tu-play { transform: scale(1.1); background: var(--accent-2); color: #0b1320; }
.tu-dur { position: absolute; bottom: 8px; inset-inline-end: 8px; padding: 2px 8px; border-radius: 8px; background: rgb(0 0 0 / .7); color: #fff; font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.tu-article { max-width: 820px; margin-inline: auto; display: grid; gap: 16px; }
.tu-crumbs { display: flex; gap: 8px; font-size: .84rem; color: var(--text-muted); } .tu-crumbs a { color: var(--text-muted); text-decoration: none; } .tu-crumbs a:hover { color: var(--text); }
.tu-ahead { display: grid; gap: 8px; }
.tu-kicker { width: fit-content; padding: 3px 12px; border-radius: 99px; background: var(--accent-2-soft); border: 1px solid var(--accent-2-border); color: var(--accent-2); font-size: .76rem; font-weight: 800; }
.tu-ahead h1 { margin: 0; font-size: clamp(1.5rem, 4.4vw, 2.3rem); line-height: 1.45; }
.tu-meta { margin: 0; display: flex; gap: 8px; color: var(--text-muted); font-size: .86rem; } .tu-meta i { font-style: normal; opacity: .6; }
.tu-cover { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 22px; border: 1px solid var(--border); }
.tu-video { margin: 4px 0 10px; border-radius: 18px; overflow: hidden; border: 1px solid var(--border); background: #000; }
.tu-video video { display: block; width: 100%; height: auto; max-height: 78vh; background: #000; }
.tu-video-lead { border-radius: 22px; box-shadow: 0 30px 70px -40px rgb(0 0 0 / .8); }
.tu-lead { margin: 0; font-size: clamp(1rem, 2.6vw, 1.12rem); line-height: 2; color: var(--text); }
.tu-content img { max-width: 100%; height: auto; border-radius: 16px; }
.tu-tags { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; border-top: 1px solid var(--border); }
.tu-tags a { padding: 6px 12px; border-radius: 99px; background: rgb(var(--fg-rgb) / .06); color: var(--text-muted); text-decoration: none; font-size: .84rem; } .tu-tags a:hover { color: var(--text); }
.tu-related { margin-top: 28px; } .tu-related h2 { font-size: 1.2rem; }

/* home: a carousel of tutorials, like the magazine row */
.tu-home .mag-card { border-radius: 22px; }
.tu-home .mag-thumb { aspect-ratio: 16 / 10; }
.tu-home .tu-play { width: 46px; height: 46px; }
.tu-home .mag-body { display: grid; gap: 4px; } .tu-home .mag-body b { color: var(--text); font-size: .95rem; line-height: 1.7; }
.tu-home .mag-body small { color: var(--accent-2); font-weight: 700; font-size: .74rem; }

@media (max-width: 640px) { .tu-kinds { width: 100%; } .tu-kinds a { flex: 1; justify-content: center; padding: 0 8px; } .tu-video, .tu-cover { border-radius: 14px; } }
@media (prefers-reduced-motion: reduce) { .tu-card .mg-card-img img, .tu-play { transition: none; } }