/* =============================================================
 * wk.css — SAYFA 4: WORKSHOPS (928:271)
 * .scard, .in-cta-btn, .pd-sec-* pd.css'ten gelir (workshops'ta pd.css de yüklenir).
 * Disiplin: sabit hero sahnesi JS --pd-scale; akış bölümleri .in-container; 1280 altı responsive.
 * ============================================================= */

/* =============================================================
 * HERO (1280:821) — sabit 827×323 sahne
 * ============================================================= */
.wk-hero { padding-top: 78px; position: relative; }
.wk-hero__scene { position: relative; width: 827px; height: 323px;
  transform-origin: top left; transform: scale(var(--pd-scale, 1)); }
/* Sol metin (1280:820): Sharpen badge @48, Your Skills @122, desc @186 */
.wk-hero__badge { position: absolute; left: -1px; top: 48px; height: 72px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
  background: var(--in-lime); border-bottom: 3px solid var(--in-border);
  font-family: var(--in-head); font-weight: 700; font-size: 40px; line-height: 48px; letter-spacing: -0.6px; color: var(--in-heading); white-space: nowrap; }
.wk-hero__title { position: absolute; left: -1px; top: 122px; margin: 0;
  font-family: var(--in-head); font-weight: 700; font-size: 40px; line-height: 48px; letter-spacing: -0.6px; color: var(--in-heading); white-space: nowrap; }
.wk-hero__desc { position: absolute; left: -1px; top: 186px; width: 482px; margin: 0;
  font-family: var(--in-text); font-weight: 400; font-size: 18px; line-height: 30px; color: var(--in-body); }

/* Sağ illüstrasyon (1280:819 @440.63,0; 386×323) */
.wk-hero__ill { position: absolute; left: 440.63px; top: 0; width: 386px; height: 323px; }
/* Learn by Doing penceresi (928:939): 152×67, mor bar — scale anim */
.wk-hero__lbd { position: absolute; left: 0; top: 0; width: 152px; height: 67px;
  background: #fff; border: 1.5px solid var(--in-border); box-shadow: var(--in-shadow-sm); overflow: hidden;
  transform-origin: center; animation: wk-lbd 20s linear infinite; }
.wk-hero__lbd-bar { height: 30px; background: #8A38F5; border-bottom: 1px solid var(--in-border);
  display: flex; align-items: center; justify-content: flex-end; gap: 5px; padding-right: 10px; }
.wk-hero__lbd-bar i { width: 8px; height: 8px; border: 1px solid var(--in-border); display: block; }
.wk-hero__lbd-label { display: block; text-align: center; padding-top: 3px;
  font-family: var(--in-head); font-weight: 500; font-size: 16px; line-height: 28px; letter-spacing: -0.08px; color: var(--in-heading); }
/* Tasarım penceresi (928:890): 200×231, menü barı + zebra şekiller */
.wk-hero__win { position: absolute; left: 186.37px; top: 70px; width: 200px; height: 231px;
  background: #fff; border: 2px solid var(--in-border); overflow: hidden; }
.wk-hero__win-menu { position: absolute; left: -2px; top: -2px; width: 200px; height: 36px; display: block; }
.wk-hero__win-body { position: absolute; left: 8px; top: 30px; width: 179px; height: 179px; overflow: hidden; }
.wk-hero__zebra { position: absolute; left: -10px; top: 0; width: 188px; height: auto; display: block;
  transform-origin: top left; animation: wk-zebra 20s linear infinite; }
/* Gezegen+yörünge (928:801 @107.37,31): orbit ring 124.79×56.14 @(107.37,39.49);
   gezegen sphere 73.12×73.12 @(133.22,31) — planet döner (rotate). Solucan ALT'ta. */
.wk-hero__orbit { position: absolute; left: 107.37px; top: 39.49px; width: 124.79px; height: 56.14px; display: block; }
.wk-hero__planet { position: absolute; left: 133.22px; top: 31px; width: 73.12px; height: 73.12px; display: block;
  transform-origin: center; animation: wk-planet 20s linear infinite; }
/* Solucan (928:843): 196.9×45.3 @(107.3,277.7). SVG zaten doğru yönde — flip YOK. */
.wk-hero__worm { position: absolute; left: 107.3px; top: 277.7px; width: 196.9px; height: 45.3px; display: block;
  transform-origin: center; animation: wk-worm 20s linear infinite; }

@keyframes wk-lbd { 0%{transform:scale(1);} 19.965%{transform:scale(1.152);} 40%,100%{transform:scale(0.897);} }
@keyframes wk-zebra { 0%{transform:scale(1);} 40%,100%{transform:scale(1.33);} }
@keyframes wk-planet { 0%{transform:rotate(0);} 20%{transform:rotate(180deg);} 40%,100%{transform:rotate(360deg);} }
@keyframes wk-worm { 0%{transform:scale(1);} 20.13%,100%{transform:scale(1.142);} }
@media (prefers-reduced-motion: reduce){ .wk-hero__lbd,.wk-hero__zebra,.wk-hero__planet,.wk-hero__worm{ animation:none !important; } }

/* =============================================================
 * MARQUEE band (937:2722) — siyah 67px, 826 içerik; LEARN·PRACTICE·COLLABORATE (+ ikon)
 * ============================================================= */
.wk-band-sec { padding-top: 106px; }
/* KAYAN marquee (937:2306): track sürekli sola kayar; set N kez basılıp -100%/N ile dikişsiz döngü. */
.wk-band { background: var(--in-black); height: 67px; width: 826px; max-width: 100%; overflow: hidden;
  display: flex; align-items: center; }
.wk-band__track { --wk-band-repeat: 2; display: flex; align-items: center; width: max-content;
  animation: wk-band-scroll 22s linear infinite; will-change: transform; }
.wk-band__set { display: inline-flex; align-items: center; }
.wk-band__item { display: inline-flex; align-items: center; gap: 12px; padding: 0 60px;
  font-family: var(--in-head); font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -0.1px; color: #fff; white-space: nowrap; }
.wk-band__plus { color: var(--in-orange); font-size: 22px; font-weight: 400; line-height: 1; }
@keyframes wk-band-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% / var(--wk-band-repeat))); } }
@media (prefers-reduced-motion: reduce){ .wk-band__track { animation: none; } }

/* =============================================================
 * WHY / WHAT kartları (1280:809) — 2 kart (404×288), lime-yıldız checklist
 * ============================================================= */
/* Dekorasyon @y0 (34h), kartlar @y66 → dot-kart arası ~32px boşluk. */
.wk-info { padding-top: 96px; }
.wk-info__stage { position: relative; width: 100%; max-width: 827px; }
.wk-info__dot { position: absolute; display: block; z-index: 2; }
.wk-info__dot--tl { left: 0; top: -66px; width: 60px; height: 34px; }   /* 34 + 32 boşluk = kart üstünde */
.wk-info__dot--br { right: 0; bottom: -66px; width: 86px; height: 34px; }
.wk-info__grid { display: grid; grid-template-columns: repeat(2, 404px); gap: 19px; justify-content: start; }
.icard { width: 404px; min-height: 288px; background: var(--in-card-accent); border: 2px solid var(--in-border); overflow: hidden;
  transition: box-shadow .1s, transform .08s; }
/* HOVER (950:3069): 4px sert gölge + hafif kalkma */
.icard:hover { box-shadow: var(--in-shadow); transform: translate(-2px,-2px); }
.icard__head { height: 84px; background: var(--in-bg); border-bottom: 2px solid var(--in-border);
  display: flex; align-items: center; padding: 0 23px;
  font-family: var(--in-head); font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -0.1px; color: var(--in-heading); }
.icard__list { list-style: none; margin: 0; padding: 15px 0 0; }
.icard__list li { display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 21px; }
.icard__star { width: 24px; height: 24px; flex: 0 0 auto; display: block; }
.icard__list span { font-family: var(--in-text); font-weight: 400; font-size: 16px; line-height: 28px; color: var(--in-body); }

/* =============================================================
 * EXPLORE WORKSHOPS — başlık + filtreler + 8 kart grid (3 sütun) + pagination
 * ============================================================= */
.wk-explore { padding-top: 96px; }
.wk-explore__head { max-width: 827px; }
.wk-explore__title { font-family: var(--in-head); font-weight: 500; font-size: 24px; line-height: 32px; letter-spacing: -0.12px; color: var(--in-heading); margin: 0; }
.wk-explore__lead { font-family: var(--in-text); font-weight: 400; font-size: 16px; line-height: 28px; color: var(--in-body); margin: 12px 0 0; }
/* Filtreler (1055:3267) */
.wk-filters { display: flex; gap: 6px; margin-top: 32px; }
.wk-filter { background: none; border: 1px solid transparent; padding: 10px; cursor: pointer;
  font-family: var(--in-text); font-weight: 400; font-size: 16px; line-height: 28px; color: var(--in-black);
  transition: color .12s, background .12s, box-shadow .1s; }
.wk-filter:hover { color: #A8C230; font-weight: 700; }
.wk-filter.is-selected { background: var(--in-lime); border-color: var(--in-black); box-shadow: var(--in-shadow-sm); font-weight: 700; }
/* Kart grid: 3 sütun × 270px, 9px aralık (left 0/279/558, top 0/230/460) */
.wk-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 270px); gap: 12px; justify-content: start; }
/* Pagination (1057:3338): sol ok + 5 kare (ilk seçili lime) + sağ ok */
.wk-pager { display: flex; align-items: center; gap: 8px; margin-top: 40px; }
.wk-pager__dots { display: flex; align-items: center; gap: 8px; }
.wk-pager__arrow[disabled] { opacity: .35; cursor: default; }
.wk-pager__arrow { background: none; border: 0; cursor: pointer; font-size: 22px; line-height: 1; color: var(--in-heading); padding: 0 8px; }
.wk-pager__dot { width: 30px; height: 30px; background: #E3DDD2; display: block; cursor: pointer; transition: background .12s, box-shadow .1s; }
.wk-pager__dot:hover { background: #E8FA8F; }
.wk-pager__dot.is-selected { background: var(--in-lime); border: 1px solid var(--in-border); box-shadow: var(--in-shadow-sm); }

/* =============================================================
 * CTA (937:2723) — sabit 827×156 sahne
 * ============================================================= */
.wk-cta { padding-top: 90px; padding-bottom: 96px; }
.wk-cta__stage { position: relative; width: 827px; max-width: 100%; height: 156px; }
.wk-cta__title { position: absolute; left: -1px; top: -5px; margin: 0; font-family: var(--in-head); font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -0.1px; color: var(--in-heading); }
.wk-cta__text { position: absolute; left: 0; top: 25px; width: 436px; margin: 0; font-family: var(--in-text); font-weight: 400; font-size: 16px; line-height: 28px; color: var(--in-body); }
.wk-cta__hl { position: absolute; left: 0; top: 53px; height: 32px; display: inline-flex; align-items: center; padding: 0 8px;
  background: var(--in-lime); border-bottom: 2px solid var(--in-border);
  font-family: var(--in-text); font-weight: 400; font-size: 16px; line-height: 28px; color: var(--in-heading); white-space: nowrap; }
.wk-cta__btn { position: absolute; left: 0; top: 99px; }
/* CTA illüstrasyon (937:2767 @551,3; 217×127). Gezegen 127×127 @(595.9,3), yörünge 216.8×97.5 @(551,17.74).
   Konum CTA frame(827) sağ tarafına göre. */
.wk-cta__ill { position: absolute; left: 551px; top: 3px; width: 217px; height: 127px; }
.wk-cta__orbit { position: absolute; left: 0; top: 14.74px; width: 216.79px; height: 97.54px; display: block; }
.wk-cta__planet { position: absolute; left: 44.9px; top: 0; width: 127.03px; height: 127.03px; display: block;
  transform-origin: center; animation: wk-planet 20s linear infinite; }

/* =============================================================
 * WORKSHOP MODAL (1376:3657) — browser-stili pencere (926×644)
 * ============================================================= */
.wk-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.wk-modal[hidden] { display: none; }
.wk-modal__overlay { position: absolute; inset: 0; background: rgba(10,10,10,0.5); }
.wk-modal__window { position: relative; width: 926px; max-width: 100%; max-height: calc(100vh - 48px);
  filter: drop-shadow(2px 2px 0 #000); display: flex; flex-direction: column; }
.wk-modal__tab { display: block; width: 100%; height: auto; margin-bottom: -1px; }   /* üstteki sekme şekli */
/* Sarı tarayıcı çubuğu */
.wk-modal__bar { position: relative; height: 47px; background: var(--in-yellow);
  border: 2px solid var(--in-border); border-top: 0; display: flex; align-items: center; gap: 22px; padding: 0 15px; }
.wk-modal__nav { width: 8px; height: 13px; display: block; flex: 0 0 auto; }
.wk-modal__url { flex: 1 1 auto; height: 31px; background: #fff; border: 2px solid var(--in-border);
  display: flex; align-items: center; padding: 0 9px; margin-left: 26px;
  font-family: var(--in-text); font-weight: 500; font-size: 12px; line-height: 18px; color: var(--in-body);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-modal__close { position: absolute; right: 23px; top: -37px; width: 32px; height: 32px; background: #fff;
  border: 2px solid var(--in-border); box-shadow: var(--in-shadow-sm); cursor: pointer; display: grid; place-items: center; z-index: 3; }
.wk-modal__close img { width: 12px; height: 12px; display: block; }
/* İçerik */
.wk-modal__body { background: var(--in-bg); border: 2px solid var(--in-border); border-top: 0;
  padding: 37px 44px; overflow-y: auto; }
.wk-modal__title { margin: 0; font-family: var(--in-head); font-weight: 500; font-size: 24px; line-height: 32px; letter-spacing: -0.12px; color: var(--in-heading); }
.wk-modal__tags { display: flex; gap: 12px; margin-top: 12px; }
.wk-modal__tag { height: 24px; display: inline-flex; align-items: center; padding: 0 8px; background: #EFEBDD;
  font-family: var(--in-head); font-weight: 500; font-size: 14px; line-height: 28px; letter-spacing: -0.07px; color: var(--in-heading); }
.wk-modal__intro { margin: 22px 0 0; font-family: var(--in-text); font-weight: 400; font-size: 14px; line-height: 22px; color: var(--in-body); }
.wk-modal__ex-title { margin: 32px 0 0; font-family: var(--in-head); font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -0.1px; color: var(--in-heading); }
.wk-modal__sec { margin-top: 20px; }
.wk-modal__lbl { display: block; font-family: var(--in-head); font-weight: 500; font-size: 14px; line-height: 28px; letter-spacing: -0.07px; color: var(--in-heading); }
.wk-modal__sec p { margin: 2px 0 0; font-family: var(--in-text); font-weight: 400; font-size: 14px; line-height: 22px; color: var(--in-body); }
.wk-modal__items { list-style: none; margin: 12px 0 0; padding: 0; }
.wk-modal__items li { display: flex; align-items: center; gap: 16px; height: 29px; }
.wk-modal__items i { width: 15px; height: 15px; flex: 0 0 auto; background: #fff; border: 1px solid var(--in-border); box-shadow: var(--in-shadow-sm); display: block; }
.wk-modal__items span { font-family: var(--in-text); font-weight: 400; font-size: 14px; line-height: 22px; color: var(--in-black); }

/* =============================================================
 * RESPONSIVE — 1280 altı (Sayfa-3 disiplini: tek 1000px kırılımı, her şey ORTALI, taşma yok)
 * ============================================================= */
@media (max-width: 1000px){
  /* HERO: 827 sabit sahne ORTALANIR sonra origin-center ölçeklenir; .wk-hero overflow:hidden clip. */
  .wk-hero { padding-top: 40px; overflow: hidden; }
  .wk-hero__scene { left: 50%; transform-origin: top center; transform: translateX(-50%) scale(var(--pd-scale, 1)); }

  /* MARQUEE: içerik genişliğinde kalır (zaten max-width:100%) */
  .wk-band-sec { padding-top: 70px; }

  /* WHY/WHAT kartları: tek sütun, ORTALI; sabit 404 → akışkan */
  .wk-info { padding-top: 70px; }
  .wk-info__stage { display: flex; flex-direction: column; align-items: center; }
  .wk-info__dot { display: none; }
  .wk-info__grid { grid-template-columns: 1fr; justify-items: center; gap: 20px; width: 100%; max-width: 404px; }
  .icard { width: 100%; max-width: 404px; }

  /* EXPLORE: başlık ortalı; filtreler ortalı; kart grid daralır+ORTALI */
  .wk-explore { padding-top: 70px; }
  .wk-explore__head { max-width: 100%; text-align: center; margin-inline: auto; }
  .wk-filters { justify-content: center; flex-wrap: wrap; }
  .wk-grid { grid-template-columns: repeat(2, 270px); justify-content: center; }
  .wk-pager { justify-content: center; }

  /* CTA: mutlak konumları çöz, dikey ORTALI; gezegen altta ortada */
  .wk-cta { padding-top: 60px; padding-bottom: 70px; }
  .wk-cta__stage { position: static; width: auto; max-width: 520px; height: auto; margin-inline: auto; text-align: center;
    display: flex; flex-direction: column; align-items: center; }
  .wk-cta__title, .wk-cta__text, .wk-cta__hl, .wk-cta__btn { position: static; left: auto; top: auto; width: auto; }
  .wk-cta__text { margin-top: 14px; }
  .wk-cta__hl { margin-top: 12px; }
  .wk-cta__btn { margin-top: 22px; }
  .wk-cta__ill { position: relative; left: auto; top: auto; margin: 28px auto 0; width: 217px; height: 127px; }
}
@media (max-width: 620px){
  .wk-grid { grid-template-columns: 270px; }
  .wk-cta__ill { transform: scale(.85); }
}
/* MODAL responsive: dar ekranda pencere daralır, içerik kaydırılır */
@media (max-width: 700px){
  .wk-modal { padding: 12px; }
  .wk-modal__body { padding: 24px 20px; }
  .wk-modal__bar { gap: 12px; padding: 0 10px; }
  .wk-modal__url { margin-left: 8px; font-size: 11px; }
}