.attention-workshop{
  background:#fff;
}

.workshop-hero{
  min-height:590px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:60px;
  padding:72px max(32px,calc((100vw - 1156px)/2));
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 30%,#ead4ce 0,transparent 27%),
    linear-gradient(110deg,#fffaf7,#fbf0eb);
}

.workshop-hero-copy{
  max-width:590px;
}

.workshop-hero h1{
  margin:0;
  color:var(--wine);
  font:600 clamp(48px,6vw,78px)/.96 var(--serif);
  letter-spacing:-.045em;
}

.workshop-hero h1 em{
  font-weight:500;
}

.workshop-lead{
  max-width:560px;
  margin:25px 0;
  color:#624e50;
  font-size:17px;
  line-height:1.7;
}

.workshop-hero-actions{
  display:flex;
  align-items:center;
  gap:24px;
}

.workshop-text-link{
  color:var(--wine);
  font-size:13px;
  font-weight:700;
}

.workshop-small-note{
  margin-top:22px;
  color:#836b6d;
  font-size:11px;
}

.workshop-visual{
  display:grid;
  place-items:center;
}

.focus-board{
  position:relative;
  width:min(430px,34vw);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:1px solid #d5aeb1;
  border-radius:50%;
  background:
    radial-gradient(circle,#fff 0 25%,#f7e7e4 26% 49%,#ead2d1 50% 70%,#fff8f5 71%);
  box-shadow:0 30px 70px #6d071d18;
}

.focus-orbit{
  position:absolute;
  border:1px solid #9e5966;
  border-radius:50%;
  animation:workshopOrbit 4s ease-in-out infinite;
}

.orbit-one{
  width:44%;
  height:44%;
}

.orbit-two{
  width:66%;
  height:66%;
  animation-delay:.55s;
}

.orbit-three{
  width:88%;
  height:88%;
  animation-delay:1.1s;
}

.focus-centre{
  position:relative;
  z-index:2;
  width:128px;
  height:128px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  border-radius:50%;
  background:var(--wine);
  color:#fff;
  box-shadow:0 15px 40px #6d071d3b;
}

.focus-centre b{
  font:600 28px/1 var(--serif);
}

.focus-centre small{
  margin-top:7px;
  font-size:8px;
  font-weight:700;
  letter-spacing:.2em;
}

.focus-dot{
  position:absolute;
  z-index:3;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#b35e6e;
  box-shadow:0 0 0 7px #fff9;
  animation:workshopDot 2.5s ease-in-out infinite;
}

.focus-dot.dot-one{
  left:9%;
  top:47%;
}

.focus-dot.dot-two{
  right:18%;
  top:17%;
  animation-delay:.5s;
}

.focus-dot.dot-three{
  right:11%;
  bottom:33%;
  animation-delay:1s;
}

.focus-dot.dot-four{
  left:29%;
  bottom:10%;
  animation-delay:1.5s;
}

@keyframes workshopOrbit{
  0%,100%{
    opacity:.25;
    transform:scale(.88);
  }

  50%{
    opacity:.9;
    transform:scale(1);
  }
}

@keyframes workshopDot{
  0%,100%{
    opacity:.35;
    transform:scale(.72);
  }

  50%{
    opacity:1;
    transform:scale(1.18);
  }
}

.workshop-notice{
  max-width:1156px;
  display:grid;
  grid-template-columns:48px 1fr;
  gap:18px;
  align-items:start;
  margin:34px auto 0;
  padding:21px 24px;
  border:1px solid var(--line);
  background:#fffaf7;
}

.notice-symbol{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--wine);
  color:#fff;
  font-family:var(--serif);
  font-size:21px;
}

.workshop-notice strong{
  color:var(--wine);
}

.workshop-notice p{
  margin:5px 0 0;
  color:#665254;
  font-size:13px;
  line-height:1.6;
}

.workshop-exercises,
.workshop-process{
  max-width:1220px;
  margin:auto;
  padding:86px 32px;
}

.workshop-heading{
  max-width:680px;
  margin-bottom:36px;
}

.workshop-heading h2,
.workshop-parent-note h2{
  margin:0;
  color:var(--wine);
  font:600 38px/1.12 var(--serif);
}

.workshop-heading>p:last-child{
  margin:14px 0 0;
  color:#715d5f;
}

.workshop-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.exercise-card{
  position:relative;
  min-height:410px;
  display:flex;
  flex-direction:column;
  padding:30px;
  border:1px solid var(--line);
  background:#fff;
  transition:.22s;
}

.active-card:hover{
  border-color:#bd7b85;
  box-shadow:0 18px 40px #6d071d14;
  transform:translateY(-4px);
}

.upcoming-card{
  background:#fdf9f7;
}

.exercise-index{
  position:absolute;
  right:25px;
  top:18px;
  color:#dec8c5;
  font:600 46px/1 var(--serif);
}

.exercise-symbol{
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  margin-bottom:25px;
  border-radius:50%;
  background:#f7e8e6;
  color:var(--wine);
}

.target-symbol{
  position:relative;
  border:1px solid #c5828a;
}

.target-symbol:before,
.target-symbol:after{
  position:absolute;
  content:"";
  background:#a75764;
}

.target-symbol:before{
  width:38px;
  height:1px;
}

.target-symbol:after{
  width:1px;
  height:38px;
}

.target-symbol i{
  width:17px;
  height:17px;
  border:4px solid var(--wine);
  border-radius:50%;
  background:#fff;
  z-index:1;
}

.stop-symbol span{
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
}

.sequence-symbol{
  display:flex;
  gap:5px;
}

.sequence-symbol span{
  width:18px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:2px;
  background:var(--wine);
  color:#fff;
  font-size:9px;
}

.exercise-label{
  margin:0 0 7px;
  color:#a15e68;
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
}

.exercise-card h3{
  color:var(--wine);
  font-size:27px;
}

.exercise-card>p:not(.exercise-label){
  margin:13px 0 17px;
  color:#665254;
  font-size:13px;
  line-height:1.58;
}

.exercise-card ul{
  margin:0 0 25px;
  padding-left:18px;
  color:#745f61;
  font-size:12px;
}

.exercise-card li{
  margin:7px 0;
}

.exercise-card>b{
  margin-top:auto;
  color:var(--wine);
  font-size:12px;
}

.workshop-process{
  max-width:none;
  padding-left:max(32px,calc((100vw - 1156px)/2));
  padding-right:max(32px,calc((100vw - 1156px)/2));
  background:var(--cream);
}

.process-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}

.process-grid article{
  border-left:1px solid #c78f94;
  padding-left:22px;
}

.process-grid span{
  color:#a35c66;
  font-size:11px;
  font-weight:700;
}

.process-grid h3{
  margin-top:8px;
  color:var(--wine);
  font-size:21px;
}

.process-grid p{
  color:#665254;
  font-size:13px;
}

.workshop-parent-note{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:80px;
  align-items:center;
  padding:64px max(32px,calc((100vw - 1156px)/2));
  background:var(--wine);
  color:#fff;
}

.workshop-parent-note h2{
  color:#fff;
}

.workshop-parent-note>p{
  margin:0;
  color:#f3dbd8;
  font-size:15px;
  line-height:1.7;
}

/* Exercise page */

.focus-exercise-body{
  min-height:100vh;
  background:
    radial-gradient(circle at 50% 25%,#fff 0,transparent 27%),
    #fbf4f0;
}

.exercise-header{
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px max(24px,calc((100vw - 1120px)/2));
  background:var(--wine);
  color:#fff;
}

.exercise-brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.exercise-brand img{
  width:130px;
  height:58px;
  object-fit:cover;
}

.exercise-brand>span{
  display:flex;
  flex-direction:column;
  padding-left:13px;
  border-left:1px solid #ffffff59;
}

.exercise-brand strong{
  font-family:var(--serif);
  font-size:18px;
}

.exercise-brand small{
  margin-top:3px;
  color:#edcdd0;
  font-size:8px;
  font-weight:700;
  letter-spacing:.16em;
}

.exercise-back{
  color:#f2d8da;
  font-size:11px;
  font-weight:700;
}

.focus-app{
  width:min(920px,calc(100% - 32px));
  margin:auto;
  padding:62px 0 80px;
}

.focus-screen{
  text-align:center;
}

.intro-screen{
  max-width:760px;
  margin:auto;
}

.focus-screen h1{
  margin:0;
  color:var(--wine);
  font:600 clamp(46px,7vw,76px)/1 var(--serif);
}

.focus-intro-text{
  max-width:670px;
  margin:23px auto;
  color:#624e50;
  font-size:16px;
  line-height:1.7;
}

.target-guide{
  max-width:500px;
  display:grid;
  grid-template-columns:90px 1fr;
  gap:22px;
  align-items:center;
  margin:30px auto;
  padding:20px;
  border:1px solid var(--line);
  background:#fff;
  text-align:left;
}

.guide-target{
  width:66px;
  height:66px;
  border-radius:50%;
  background:var(--wine);
  box-shadow:0 10px 24px #6d071d30;
}

.target-guide small{
  color:#a06069;
  font-size:9px;
  font-weight:700;
  letter-spacing:.1em;
}

.target-guide strong{
  display:block;
  margin-top:3px;
  color:var(--wine);
  font-family:var(--serif);
  font-size:22px;
}

.target-guide p{
  margin:5px 0 0;
  color:#705b5d;
  font-size:12px;
}

.age-options{
  max-width:660px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:32px auto 0;
  padding:0;
  border:0;
}

.age-options legend{
  width:100%;
  margin-bottom:13px;
  color:#755c5f;
  font-size:12px;
  font-weight:700;
}

.age-options label{
  cursor:pointer;
}

.age-options input{
  position:absolute;
  opacity:0;
}

.age-options span{
  min-height:85px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:13px;
  border:1px solid var(--line);
  background:#fff;
}

.age-options input:checked+span{
  border-color:var(--wine);
  box-shadow:inset 0 0 0 1px var(--wine);
}

.age-options b{
  color:var(--wine);
  font-size:13px;
}

.age-options small{
  margin-top:4px;
  color:#846e70;
  font-size:10px;
}

.focus-start-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin-top:29px;
}

.focus-start-actions button{
  border:0;
  cursor:pointer;
}

.focus-secondary-link{
  color:var(--wine);
  font-size:12px;
  font-weight:700;
}

.focus-disclaimer,
.result-note{
  max-width:650px;
  margin:26px auto 0;
  color:#8b7476;
  font-size:11px;
}

/* Game */

.focus-game-top{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:18px;
}

.focus-game-top span{
  padding:14px;
  border:1px solid var(--line);
  background:#fff;
  color:#957b7e;
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
}

.focus-game-top b{
  display:block;
  margin-top:5px;
  color:var(--wine);
  font-size:19px;
}

.stimulus-stage{
  min-height:440px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  border:1px solid #dfc9c5;
  background:
    radial-gradient(circle,#fff 0 20%,#fbefeb 65%,#f5e2dd);
}

.stimulus{
  width:120px;
  height:120px;
  transition:opacity .08s,transform .08s;
}

.shape-circle{
  border-radius:50%;
}

.shape-square{
  border-radius:7px;
}

.shape-triangle{
  width:0;
  height:0;
  border-left:67px solid transparent;
  border-right:67px solid transparent;
  border-bottom:120px solid;
  background:transparent!important;
}

.color-wine{
  background:var(--wine);
}

.color-rose{
  background:#ca7b84;
}

.color-blue{
  background:#7296aa;
}

.color-gold{
  background:#c49b58;
}

.shape-triangle.color-wine{
  border-bottom-color:var(--wine);
}

.shape-triangle.color-rose{
  border-bottom-color:#ca7b84;
}

.shape-triangle.color-blue{
  border-bottom-color:#7296aa;
}

.shape-triangle.color-gold{
  border-bottom-color:#c49b58;
}

.stimulus-stage p{
  min-height:20px;
  margin:35px 0 0;
  color:#8f7376;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
}

.response-button{
  width:100%;
  min-height:70px;
  margin-top:15px;
  border:0;
  border-radius:2px;
  background:var(--wine);
  color:#fff;
  font-size:15px;
  font-weight:700;
  letter-spacing:.08em;
  cursor:pointer;
}

.response-button:active{
  transform:scale(.995);
  background:var(--wine-deep);
}

.response-hint{
  color:#927b7d;
  font-size:10px;
}

/* Result */

.result-mark{
  width:150px;
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  margin:0 auto 29px;
  border-radius:50%;
  background:var(--wine);
  color:#fff;
  box-shadow:0 18px 45px #6d071d32;
}

.result-mark strong{
  font:600 47px/1 var(--serif);
}

.result-mark small{
  margin-top:5px;
  font-size:8px;
  font-weight:700;
  letter-spacing:.16em;
}

.result-screen h1{
  max-width:700px;
  margin:auto;
  font-size:48px;
}

.result-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:34px;
}

.result-grid article{
  padding:21px 13px;
  border:1px solid var(--line);
  background:#fff;
}

.result-grid small{
  color:#967b7e;
  font-size:8px;
  font-weight:700;
  letter-spacing:.08em;
}

.result-grid strong{
  display:block;
  margin-top:7px;
  color:var(--wine);
  font-size:25px;
}

.result-comment{
  max-width:690px;
  margin:25px auto 0;
  padding:18px 22px;
  border-left:3px solid var(--wine);
  background:#fff;
  color:#624e50;
  font-size:13px;
  line-height:1.6;
  text-align:left;
}

.result-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:27px;
}

.result-actions button{
  border:0;
  cursor:pointer;
}

@media(max-width:850px){
  .workshop-hero{
    grid-template-columns:1fr;
    min-height:auto;
    padding:55px 22px;
  }

  .workshop-visual{
    margin-top:12px;
  }

  .focus-board{
    width:min(330px,86vw);
  }

  .focus-centre{
    width:100px;
    height:100px;
  }

  .focus-centre b{
    font-size:23px;
  }

  .workshop-notice{
    margin:25px 22px 0;
  }

  .workshop-exercises,
  .workshop-process{
    padding:60px 22px;
  }

  .workshop-grid,
  .process-grid{
    grid-template-columns:1fr;
  }

  .exercise-card{
    min-height:0;
  }

  .workshop-parent-note{
    grid-template-columns:1fr;
    gap:20px;
    padding:52px 22px;
  }

  .exercise-header{
    min-height:72px;
    padding:7px 15px;
  }

  .exercise-brand img{
    width:105px;
    height:48px;
  }

  .exercise-brand>span{
    display:none;
  }

  .focus-app{
    padding:43px 0 60px;
  }

  .focus-screen h1{
    font-size:45px;
  }

  .age-options{
    grid-template-columns:1fr;
  }

  .focus-start-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .stimulus-stage{
    min-height:350px;
  }

  .focus-game-top{
    gap:5px;
  }

  .focus-game-top span{
    padding:10px 4px;
  }

  .result-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .result-screen h1{
    font-size:35px;
  }

  .result-actions{
    flex-direction:column;
  }
}

/* Dürtünü Beklet */

.inhibition-guide{
  max-width:610px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:31px auto;
}

.inhibition-guide article{
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:22px;
  border:1px solid var(--line);
  background:#fff;
}

.inhibition-guide small{
  margin-top:16px;
  color:#987d80;
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
}

.inhibition-guide strong{
  margin-top:5px;
  color:var(--wine);
  font-family:var(--serif);
  font-size:21px;
}

.go-shape,
.inhibition-stimulus.go{
  border-radius:50%;
  background:#5f966f;
  box-shadow:0 12px 30px #5f966f32;
}

.stop-shape,
.inhibition-stimulus.stop{
  background:var(--wine);
  clip-path:polygon(
    30% 0,
    70% 0,
    100% 30%,
    100% 70%,
    70% 100%,
    30% 100%,
    0 70%,
    0 30%
  );
  box-shadow:0 12px 30px #6d071d30;
}

.go-shape,
.stop-shape{
  width:74px;
  height:74px;
}

.inhibition-stimulus{
  width:135px;
  height:135px;
  transition:opacity .08s,transform .08s;
}

/* Sırayı Hatırla */

.sequence-preview{
  max-width:500px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:30px auto;
}

.sequence-preview span{
  min-height:72px;
  display:grid;
  place-items:center;
  border:1px solid #c68d93;
  background:#fff;
  color:var(--wine);
  font:600 24px var(--serif);
}

.sequence-preview span:nth-child(2){
  background:#f5e4e2;
}

.sequence-preview span:nth-child(3){
  background:#ead0ce;
}

.sequence-preview span:nth-child(4){
  background:var(--wine);
  color:#fff;
}

.sequence-stage{
  min-height:480px;
  padding:28px;
  border:1px solid #dfc9c5;
  background:
    radial-gradient(circle,#fff 0 25%,#fbefeb 68%,#f5e2dd);
}

.sequence-stage>p{
  min-height:24px;
  margin:0 0 27px;
  color:var(--wine);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
}

.sequence-board{
  max-width:610px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:auto;
}

.sequence-board button{
  min-height:145px;
  border:1px solid #cba1a3;
  border-radius:4px;
  background:#fff;
  color:#8b6a6e;
  font:600 28px var(--serif);
  cursor:default;
  transition:
    background .12s,
    color .12s,
    transform .12s,
    box-shadow .12s;
}

.sequence-board.is-active button{
  cursor:pointer;
}

.sequence-board button.is-lit{
  border-color:var(--wine);
  background:var(--wine);
  color:#fff;
  transform:scale(1.045);
  box-shadow:0 15px 35px #6d071d2e;
}

.sequence-board button.is-selected{
  background:#d59ba2;
  color:#fff;
  transform:scale(.97);
}

.sequence-board button.is-correct{
  border-color:#6d9a75;
  background:#dcebdd;
  color:#396744;
}

.sequence-board button.is-wrong{
  border-color:#b86a75;
  background:#f3d9dc;
  color:#8b2638;
}

@media(max-width:850px){
  .inhibition-guide{
    grid-template-columns:1fr 1fr;
  }

  .inhibition-guide article{
    min-height:155px;
    padding:17px 10px;
  }

  .inhibition-guide strong{
    font-size:17px;
  }

  .sequence-stage{
    min-height:410px;
    padding:20px 12px;
  }

  .sequence-board{
    gap:8px;
  }

  .sequence-board button{
    min-height:100px;
    font-size:22px;
  }
}