/* Atölye (/atolye/) — serbest deneme alanı çatısı (D102). v2 tasarım dili (docs/urun/TASARIM_SISTEMI.md). Renk yalnız dolgu/şerit; metin v2 mürekkebi (AA).
   Dokunma hedefleri ≥ 44 px. Vitrin görseli Blender'dan (server/tools/blender/hero.py). */
[id] { scroll-margin-top: 16px; }
.at-govde { padding-block: var(--v2-space-5); display: grid; gap: var(--v2-space-3); }
.at-govde h2 { margin: 0; font-size: var(--v2-text-2xl); }
.at-giris { margin: 0; color: var(--v2-ink-2); max-width: 70ch; }

/* Sahneli atölye kartları (2026-10-27 sahip: Oyunlar kartlarıyla aynı tarz; ikon yok). Kartın tamamı bağlantı.
   16:9 yüzen ada sahnesi assets/atolye/kart/<alan>.webp (Higgsfield, KAYNAKLAR §11.3 #32; yoksa alan degradesi); sol üstte cam başlık, sağ üstte ok. */
.at-govde--ilk { padding-top: var(--v2-space-6); gap: var(--v2-space-4); }
.at-govde--ilk h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; }
.at-kartlar { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--v2-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .at-kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.at-kart { --ra: #6E7BFF; --rb: #3B3FD8; --rr: 70, 80, 230; min-width: 0; }
.at-kart[data-alan="python"] { --ra: #38BDF8; --rb: #3B6CFF; --rr: 56, 140, 255; }
.at-kart[data-alan="yz"] { --ra: #FF7EB6; --rb: #C25CFF; --rr: 236, 90, 200; }
.at-kart[data-alan="devre"] { --ra: #FFD24A; --rb: #FF9A1F; --rr: 255, 170, 40; }
.at-kart[data-alan="oyun"] { --ra: #34D9B0; --rb: #14B8C8; --rr: 20, 190, 170; }
.at-kart__bag {
  position: relative; isolation: isolate; overflow: hidden; display: block; aspect-ratio: 16 / 9; border-radius: 30px; color: var(--v2-ink); text-decoration: none;
  border: var(--v2-stroke-soft) solid var(--v2-ink); background: linear-gradient(150deg, rgba(var(--rr), .35), rgba(var(--rr), .12));
  transition: transform .3s ease, box-shadow .3s ease;
}
.at-kart__bag::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--at-arka, none) center / cover no-repeat; transition: transform .7s ease; }
.at-kart[data-alan="robot"] .at-kart__bag { --at-arka: url("../../assets/atolye/kart/robot.webp?v=4"); }
.at-kart[data-alan="python"] .at-kart__bag { --at-arka: url("../../assets/atolye/kart/python.webp?v=4"); }
.at-kart[data-alan="yz"] .at-kart__bag { --at-arka: url("../../assets/atolye/kart/yz.webp?v=4"); }
.at-kart[data-alan="devre"] .at-kart__bag { --at-arka: url("../../assets/atolye/kart/devre.webp?v=4"); }
.at-kart[data-alan="oyun"] .at-kart__bag { --at-arka: url("../../assets/atolye/kart/oyun.webp?v=4"); }
.at-kartlar .at-kart__ad {
  position: absolute; top: 18px; left: 22px; max-width: calc(100% - 110px); margin: 0; padding: 8px 16px 9px; border-radius: 18px;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.12; color: var(--v2-ink); background: rgba(255, 255, 255, .86);
  box-shadow: 0 10px 24px -14px rgba(40, 30, 110, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.at-kart__git {
  position: absolute; top: 18px; right: 18px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
  color: var(--v2-ink); background: rgba(255, 255, 255, .86); box-shadow: 0 10px 22px -12px rgba(40, 30, 110, .7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .25s ease;
}
.at-kart__git .v2-icon { width: 24px; height: 24px; }
.at-kart__bag:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(var(--rr), .9); }
.at-kart__bag:hover::before { transform: scale(1.05); }
.at-kart__bag:hover .at-kart__git { transform: translateX(3px); }
.at-kart__bag:focus-visible { outline: 3px solid var(--v2-focus); outline-offset: 4px; }
@media (max-width: 699.98px) {
  .at-kartlar .at-kart__ad { top: 14px; left: 16px; max-width: calc(100% - 84px); }
  .at-kart__git { top: 14px; right: 14px; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .at-kart__bag, .at-kart__bag::before, .at-kart__git { transition: none; } .at-kart__bag:hover, .at-kart__bag:hover::before, .at-kart__bag:hover .at-kart__git { transform: none; } }

.at-adimlar { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--v2-space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.at-adimlar li { display: flex; gap: 12px; padding: var(--v2-space-3); border: var(--v2-stroke-soft) solid var(--v2-ink); border-radius: var(--v2-radius); background: var(--v2-surface); }
.at-adimlar h3 { margin: 0 0 4px; font-size: var(--v2-text-md); }
.at-adimlar p { margin: 0; color: var(--v2-ink-2); font-size: var(--v2-text-sm); }
.at-no { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: var(--v2-stroke) solid var(--v2-ink); background: var(--v2-yellow); font-weight: var(--v2-weight-heavy); }
.at-not { margin: 0; display: flex; gap: 8px; align-items: flex-start; color: var(--v2-ink-2); font-size: var(--v2-text-sm); max-width: 75ch; }
.at-not .v2-icon { flex: none; width: 22px; height: 22px; }

/* ---------- D169: Atölye tek bakışta — başlık + "Nasıl çalışılır?" bilgi kutucuğu, 5 kart tek ekranda ----------
   Adım kartları ve kayıt notu bilgi kutucuğunda (shared/styles/v3/atolye-tek.css .at-bilgi). Kart boyutu Oyunlar/Dersler kartlarıyla
   aynı kalır (2026-10-28 sahip: "kartların boyutlarını eski haline getir"): 3 + 2 küçük dizilim geri alındı. */
.at-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.at-ust .at-bilgi__kart { width: min(36rem, calc(100vw - 32px)); }
.at-bilgi__kart .at-adimlar { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0; }
.at-bilgi__kart .at-adimlar li { padding: 10px 12px; }

/* Stüdyo görselleri (2026-10-28 sahip örneği): başlık solda büyük ve yalın; eski görseller assets/yedek/kart-ada-2026-10-27/. */
.at-kartlar .at-kart__ad {
  top: 50%; left: 30px; transform: translateY(-50%); max-width: 46%; padding: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; font-size: clamp(1.7rem, 3.2vw, 2.7rem); line-height: 1.04; letter-spacing: -.025em; color: #0F0E1A;
}
.at-kart__bag { border-color: rgba(91, 72, 200, .16); }
@media (max-width: 699.98px) { .at-kartlar .at-kart__ad { left: 18px; max-width: 52%; } }
.at-kartlar .at-kart__bag { container-type: inline-size; }
.at-kartlar .at-kart__ad { font-size: clamp(1.15rem, 7.4cqi, 2.7rem); overflow-wrap: normal; word-break: keep-all; hyphens: none; max-width: 48%; }
/* Kart boyu Oyunlar/Dersler kartlarıyla aynı (2026-10-28 sahip: "oyunlar ve dersler boyutları ile aynı olsun"):
   onlar 16:9 görsel + alt bilgi satırı ≈ 628 × 444; Atölye kartında alt satır yok, oran aynı tutulur (görsel kapak, ortalı). */
@media (min-width: 700px) { .at-kartlar .at-kart__bag { aspect-ratio: 628 / 444; } }