/*
 * İlkokul Dijital A4 Player v1.29.11
 * Etkinlik sayfası telefon kumandası mini rehberi.
 * Player, WebRTC ve yazdırma akışından tamamen bağımsızdır.
 */

.ild-a4-material-remote-guide{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:74px minmax(0,1fr);
  grid-template-areas:
    "visual heading"
    "visual description"
    "visual steps";
  column-gap:15px;
  width:100%;
  max-width:760px;
  margin:16px 0 0;
  padding:16px 17px;
  overflow:hidden;
  text-align:left;
  border:1px solid rgba(69,112,226,.25);
  border-radius:18px;
  background:
    radial-gradient(circle at 7% 15%,rgba(21,180,238,.15),transparent 34%),
    radial-gradient(circle at 96% 88%,rgba(118,69,232,.12),transparent 38%),
    linear-gradient(135deg,#f6fcff 0%,#f8f7ff 55%,#fff 100%);
  box-shadow:0 12px 28px rgba(31,74,130,.10),inset 0 1px 0 rgba(255,255,255,.86);
  color:#153a61;
}

.ild-a4-material-remote-guide::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg,#10a9e9 0%,#376ee8 52%,#7a3fe0 100%);
}

.ild-a4-material-remote-guide::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:-55px;
  right:-45px;
  width:130px;
  height:130px;
  border:1px solid rgba(116,73,229,.12);
  border-radius:50%;
  box-shadow:0 0 0 20px rgba(44,143,235,.04),0 0 0 42px rgba(118,69,232,.025);
}

.ild-a4-material-remote-guide-visual{
  grid-area:visual;
  position:relative;
  display:grid;
  place-items:center;
  align-self:start;
  width:68px;
  height:76px;
  border:1px solid rgba(39,132,230,.20);
  border-radius:18px;
  background:linear-gradient(145deg,#fff 0%,#eaf7ff 48%,#eeeaff 100%);
  box-shadow:0 9px 21px rgba(36,107,177,.13);
}

.ild-a4-material-remote-guide-visual svg{
  width:47px;
  height:56px;
  overflow:visible;
  fill:none;
  stroke:#196fd3;
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ild-a4-material-remote-guide-visual .is-signal{stroke:#7145dc}
.ild-a4-material-remote-guide-visual .is-signal-dot{fill:#7145dc;stroke:none}
.ild-a4-material-remote-guide-visual>i{
  position:absolute;
  top:9px;
  right:8px;
  width:9px;
  height:9px;
  border:2px solid #fff;
  border-radius:50%;
  background:#15b66f;
  box-shadow:0 0 0 4px rgba(21,182,111,.13);
  animation:ildA4RemoteGuideSignal 2.8s ease-in-out infinite;
}

.ild-a4-material-remote-guide-copy{grid-area:heading;min-width:0}
.ild-a4-material-remote-guide-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0 0 5px;
  color:#6542cd;
  font-size:11px;
  line-height:1.2;
  font-weight:950;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.ild-a4-material-remote-guide-kicker>i{
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#15b66f;
  box-shadow:0 0 0 4px rgba(21,182,111,.11);
}
.ild-a4-material-remote-guide h2{
  max-width:none;
  margin:0;
  color:#102f52;
  font-size:17px;
  line-height:1.22;
  font-weight:950;
  letter-spacing:-.01em;
}
.ild-a4-material-remote-guide-description{
  grid-area:description;
  margin:5px 0 11px;
  color:#536c85;
  font-size:13.5px;
  line-height:1.45;
  font-weight:750;
}
.ild-a4-material-remote-guide-steps{
  grid-area:steps;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:none;
}
.ild-a4-material-remote-guide-steps li{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  min-height:38px;
  margin:0;
  padding:7px 8px;
  border:1px solid rgba(79,119,195,.16);
  border-radius:11px;
  background:rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}
.ild-a4-material-remote-guide-steps li>span{
  display:grid;
  place-items:center;
  width:23px;
  height:23px;
  flex:0 0 23px;
  border-radius:8px;
  background:linear-gradient(145deg,#159fe5,#544fe0);
  color:#fff;
  font-size:11px;
  line-height:1;
  font-weight:950;
  box-shadow:0 5px 11px rgba(44,105,216,.19);
}
.ild-a4-material-remote-guide-steps strong{
  min-width:0;
  color:#234462;
  font-size:11.5px;
  line-height:1.25;
  font-weight:900;
  overflow-wrap:normal;
  word-break:normal;
}

html[data-bs-theme="dark"] .ild-a4-material-remote-guide,
body.dark-mode .ild-a4-material-remote-guide,
body.theme-dark .ild-a4-material-remote-guide{
  border-color:rgba(111,158,239,.34);
  background:
    radial-gradient(circle at 7% 15%,rgba(17,162,222,.13),transparent 34%),
    radial-gradient(circle at 96% 88%,rgba(126,81,229,.13),transparent 38%),
    linear-gradient(135deg,#15263b 0%,#17233a 58%,#121d30 100%);
  box-shadow:0 12px 28px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-bs-theme="dark"] .ild-a4-material-remote-guide-visual,
body.dark-mode .ild-a4-material-remote-guide-visual,
body.theme-dark .ild-a4-material-remote-guide-visual{
  border-color:#385777;
  background:linear-gradient(145deg,#1a3451,#192740 58%,#26264a);
}
html[data-bs-theme="dark"] .ild-a4-material-remote-guide h2,
body.dark-mode .ild-a4-material-remote-guide h2,
body.theme-dark .ild-a4-material-remote-guide h2{color:#f3f8ff}
html[data-bs-theme="dark"] .ild-a4-material-remote-guide-description,
body.dark-mode .ild-a4-material-remote-guide-description,
body.theme-dark .ild-a4-material-remote-guide-description{color:#b7c8d9}
html[data-bs-theme="dark"] .ild-a4-material-remote-guide-kicker,
body.dark-mode .ild-a4-material-remote-guide-kicker,
body.theme-dark .ild-a4-material-remote-guide-kicker{color:#b49aff}
html[data-bs-theme="dark"] .ild-a4-material-remote-guide-steps li,
body.dark-mode .ild-a4-material-remote-guide-steps li,
body.theme-dark .ild-a4-material-remote-guide-steps li{
  border-color:#324a65;
  background:rgba(23,43,67,.86);
}
html[data-bs-theme="dark"] .ild-a4-material-remote-guide-steps strong,
body.dark-mode .ild-a4-material-remote-guide-steps strong,
body.theme-dark .ild-a4-material-remote-guide-steps strong{color:#dce9f7}

@keyframes ildA4RemoteGuideSignal{
  0%,100%{transform:scale(1);box-shadow:0 0 0 4px rgba(21,182,111,.13)}
  50%{transform:scale(1.08);box-shadow:0 0 0 7px rgba(21,182,111,.035)}
}

@media(max-width:860px){
  .ild-a4-material-remote-guide{margin-right:auto;margin-left:auto;text-align:left}
}

@media(max-width:560px){
  .ild-a4-material-remote-guide{
    grid-template-columns:54px minmax(0,1fr);
    grid-template-areas:
      "visual heading"
      "description description"
      "steps steps";
    column-gap:11px;
    row-gap:9px;
    margin-top:14px;
    padding:14px 13px 14px 15px;
    border-radius:16px;
  }
  .ild-a4-material-remote-guide-visual{
    width:52px;
    height:60px;
    border-radius:15px;
  }
  .ild-a4-material-remote-guide-visual svg{width:37px;height:46px}
  .ild-a4-material-remote-guide-visual>i{top:6px;right:5px;width:8px;height:8px}
  .ild-a4-material-remote-guide-kicker{
    margin-bottom:4px;
    font-size:9.8px;
    letter-spacing:.035em;
  }
  .ild-a4-material-remote-guide-kicker>span{display:none}
  .ild-a4-material-remote-guide h2{font-size:16px;line-height:1.2}
  .ild-a4-material-remote-guide-description{margin:0;font-size:12.7px;line-height:1.42}
  .ild-a4-material-remote-guide-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .ild-a4-material-remote-guide-steps li{min-height:34px;padding:6px 8px}
  .ild-a4-material-remote-guide-steps li:last-child{grid-column:1/-1}
  .ild-a4-material-remote-guide-steps strong{font-size:11.8px;line-height:1.25}
}

@media(prefers-reduced-motion:reduce){
  .ild-a4-material-remote-guide-visual>i{animation:none}
}

@media print{
  .ild-a4-material-remote-guide{display:none!important}
}

/* v1.29.21 — Masaüstü/geniş tablette kumanda rehberini yardımcı özellik şeridine dönüştürür.
   İşlev ve üç adım korunur; görsel ağırlık azaltılır. <=560px mevcut mobil düzen aynen kalır. */
@media(min-width:561px){
  .ild-a4-material-remote-guide{
    grid-template-columns:50px minmax(0,1fr);
    grid-template-areas:
      "visual heading"
      "visual description"
      "steps steps";
    column-gap:12px;
    row-gap:2px;
    margin-top:14px;
    padding:12px 14px 11px 15px;
    border-color:#d5e2ec;
    border-radius:15px;
    background:linear-gradient(112deg,#f7fbfe 0%,#fafbfe 58%,#fbf9ff 100%);
    box-shadow:0 6px 16px rgba(38,76,111,.065),inset 0 1px 0 rgba(255,255,255,.82);
  }
  .ild-a4-material-remote-guide::before{
    width:3px;
    background:linear-gradient(180deg,#3aa7df 0%,#557fe1 54%,#8468d3 100%);
    opacity:.9;
  }
  .ild-a4-material-remote-guide::after{display:none}

  .ild-a4-material-remote-guide-visual{
    align-self:center;
    width:46px;
    height:50px;
    border-color:#cfe0ed;
    border-radius:13px;
    background:#fff;
    box-shadow:0 3px 9px rgba(42,91,132,.075);
  }
  .ild-a4-material-remote-guide-visual svg{
    width:31px;
    height:38px;
    stroke:#2c77b9;
    stroke-width:2.45;
  }
  .ild-a4-material-remote-guide-visual .is-signal{stroke:#745acb}
  .ild-a4-material-remote-guide-visual .is-signal-dot{fill:#745acb;stroke:none}
  .ild-a4-material-remote-guide-visual>i{
    top:5px;
    right:5px;
    width:7px;
    height:7px;
    border-width:1.5px;
    box-shadow:0 0 0 3px rgba(21,182,111,.10);
  }

  .ild-a4-material-remote-guide-copy{
    align-self:end;
  }
  .ild-a4-material-remote-guide-kicker{
    gap:6px;
    margin:0 0 2px;
    color:#526f89;
    font-size:10.2px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.015em;
    text-transform:none;
  }
  .ild-a4-material-remote-guide-kicker>i{
    width:6px;
    height:6px;
    flex-basis:6px;
    box-shadow:0 0 0 3px rgba(21,182,111,.09);
  }
  .ild-a4-material-remote-guide-kicker>span{
    display:inline-flex;
    align-items:center;
    min-height:20px;
    padding:2px 7px;
    border:1px solid #d9e4ed;
    border-radius:999px;
    background:#f2f6f9;
    color:#68798a;
    font-size:9.5px;
    font-weight:850;
    letter-spacing:0;
  }
  .ild-a4-material-remote-guide h2{
    color:#183b59;
    font-size:15.8px;
    line-height:1.2;
    font-weight:950;
    letter-spacing:-.008em;
  }
  .ild-a4-material-remote-guide-description{
    align-self:start;
    margin:1px 0 5px;
    color:#64788b;
    font-size:12.2px;
    line-height:1.35;
    font-weight:720;
  }

  .ild-a4-material-remote-guide-steps{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    margin-top:4px;
    padding-top:9px;
    border-top:1px solid #e1e9ef;
  }
  .ild-a4-material-remote-guide-steps li{
    min-height:25px;
    gap:7px;
    padding:0 11px 0 0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .ild-a4-material-remote-guide-steps li+li{
    padding-left:11px;
    border-left:1px solid #e1e9ef;
  }
  .ild-a4-material-remote-guide-steps li>span{
    width:21px;
    height:21px;
    flex-basis:21px;
    border:1px solid #c9dbe8;
    border-radius:7px;
    background:#edf5fb;
    color:#2c72aa;
    font-size:10px;
    box-shadow:none;
  }
  .ild-a4-material-remote-guide-steps strong{
    color:#415a70;
    font-size:10.9px;
    line-height:1.22;
    font-weight:850;
  }

  html[data-bs-theme="dark"] .ild-a4-material-remote-guide,
  body.dark-mode .ild-a4-material-remote-guide,
  body.theme-dark .ild-a4-material-remote-guide{
    border-color:#31475b;
    background:linear-gradient(112deg,#152535 0%,#172536 58%,#1b2034 100%);
    box-shadow:0 6px 16px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.025);
  }
  html[data-bs-theme="dark"] .ild-a4-material-remote-guide-visual,
  body.dark-mode .ild-a4-material-remote-guide-visual,
  body.theme-dark .ild-a4-material-remote-guide-visual{
    border-color:#36536a;
    background:#182c40;
    box-shadow:none;
  }
  html[data-bs-theme="dark"] .ild-a4-material-remote-guide-kicker,
  body.dark-mode .ild-a4-material-remote-guide-kicker,
  body.theme-dark .ild-a4-material-remote-guide-kicker{color:#adc0d0}
  html[data-bs-theme="dark"] .ild-a4-material-remote-guide-kicker>span,
  body.dark-mode .ild-a4-material-remote-guide-kicker>span,
  body.theme-dark .ild-a4-material-remote-guide-kicker>span{
    border-color:#334b5f;
    background:#1b3043;
    color:#afc0cf;
  }
  html[data-bs-theme="dark"] .ild-a4-material-remote-guide h2,
  body.dark-mode .ild-a4-material-remote-guide h2,
  body.theme-dark .ild-a4-material-remote-guide h2{color:#edf6fd}
  html[data-bs-theme="dark"] .ild-a4-material-remote-guide-description,
  body.dark-mode .ild-a4-material-remote-guide-description,
  body.theme-dark .ild-a4-material-remote-guide-description{color:#aec0cf}
  html[data-bs-theme="dark"] .ild-a4-material-remote-guide-steps,
  body.dark-mode .ild-a4-material-remote-guide-steps,
  body.theme-dark .ild-a4-material-remote-guide-steps{border-top-color:#2e4559}
  html[data-bs-theme="dark"] .ild-a4-material-remote-guide-steps li,
  body.dark-mode .ild-a4-material-remote-guide-steps li,
  body.theme-dark .ild-a4-material-remote-guide-steps li{background:transparent;border-color:transparent}
  html[data-bs-theme="dark"] .ild-a4-material-remote-guide-steps li+li,
  body.dark-mode .ild-a4-material-remote-guide-steps li+li,
  body.theme-dark .ild-a4-material-remote-guide-steps li+li{border-left-color:#2e4559}
  html[data-bs-theme="dark"] .ild-a4-material-remote-guide-steps li>span,
  body.dark-mode .ild-a4-material-remote-guide-steps li>span,
  body.theme-dark .ild-a4-material-remote-guide-steps li>span{
    border-color:#36566f;
    background:#1c3950;
    color:#9ed1f1;
  }
  html[data-bs-theme="dark"] .ild-a4-material-remote-guide-steps strong,
  body.dark-mode .ild-a4-material-remote-guide-steps strong,
  body.theme-dark .ild-a4-material-remote-guide-steps strong{color:#cfdeea}
}