/* ============================================================
   Texno Cinar - video-inner.html
   ============================================================ */

.video-body{
  --maxw:1440px;
  background:
    radial-gradient(circle at 93% 120px,rgba(46,158,88,.08),transparent 260px),
    radial-gradient(circle at 7% 880px,rgba(46,158,88,.06),transparent 320px),
    linear-gradient(180deg,#fbfdfc 0,#fff 42%,#fbfdfc 100%);
}
.video-body header.site-header .wrap.nav{max-width:1360px}
.video-main .wrap{
  max-width:none;
  padding-left:50px;
  padding-right:50px;
}
.video-body .rv{opacity:1;transform:none;transition:none}
.video-main{padding:30px 0 42px}
.video-wrap{position:relative}
.video-crumb{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:30px;
  margin-bottom:20px;
  color:#798495;
  font-size:13px;
  font-weight:600;
}
.video-crumb a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#667286;
}
.video-crumb a:hover,.video-crumb strong{color:#188a4b}
.video-crumb svg{width:15px;height:15px}
.video-layout{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:24px;
  align-items:start;
}

/* Sidebar */
.video-sidebar{
  display:grid;
  gap:20px;
}
.class-panel,
.reward-panel{
  border:1px solid #e4ece8;
  border-radius:18px;
  background:rgba(255,255,255,.94);
  box-shadow:0 18px 42px rgba(25,48,36,.07);
}
.class-panel{
  overflow:hidden;
  padding:22px 10px 14px;
}
.class-panel h2{
  padding:0 14px 16px;
  color:#071331;
  font-size:18px;
  font-weight:800;
}
.class-row{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto 18px;
  align-items:center;
  gap:12px;
  min-height:54px;
  margin:0;
  padding:8px 14px;
  border-radius:0;
  color:#1c2a3e;
  border-top:1px solid #edf2ef;
  transition:background .18s,color .18s,transform .18s;
}
.class-row:first-of-type{border-top:0}
.class-row:hover{
  color:#147c42;
  background:#f1faf5;
}
.class-row.active{
  color:#12834a;
  background:linear-gradient(90deg,#e5f6ec,#f8fcfa);
}
.class-row strong{
  overflow:hidden;
  font-size:13.5px;
  font-weight:700;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.class-row > svg{
  width:17px;
  height:17px;
  color:#6d7a89;
}
.class-row small{
  min-width:26px;
  padding:3px 7px;
  border-radius:999px;
  color:#188a4b;
  background:#e9f8ef;
  font-size:12px;
  font-weight:800;
  text-align:center;
}
.grade-book{
  position:relative;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  transform:rotate(-8deg);
  filter:drop-shadow(0 8px 9px rgba(31,51,42,.16));
}
.grade-book::before{
  content:"";
  position:absolute;
  inset:4px 6px 5px 7px;
  border-radius:5px 4px 6px 5px;
  background:linear-gradient(135deg,var(--book-a),var(--book-b));
  border:1px solid rgba(255,255,255,.48);
  box-shadow:
    inset 4px 0 rgba(255,255,255,.26),
    inset -5px 0 rgba(0,0,0,.08);
  transform:skewY(-7deg);
}
.grade-book::after{
  content:"";
  position:absolute;
  left:10px;
  right:8px;
  bottom:4px;
  height:5px;
  border-radius:0 0 4px 4px;
  background:linear-gradient(180deg,#fff,#dde4df);
  transform:skewX(-22deg);
}
.grade-book i{
  position:absolute;
  left:9px;
  top:5px;
  width:8px;
  height:28px;
  border-radius:4px;
  background:rgba(255,255,255,.22);
  z-index:2;
}
.grade-book b{
  position:relative;
  z-index:3;
  color:#fff;
  font-size:18px;
  font-weight:800;
  line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.grade-book.prep{--book-a:#8e58ef;--book-b:#6841c7}
.grade-book.g1{--book-a:#36bd67;--book-b:#168047}
.grade-book.g2{--book-a:#f58b19;--book-b:#d35312}
.grade-book.g3{--book-a:#25a6e7;--book-b:#1c70bf}
.grade-book.g4{--book-a:#f75a92;--book-b:#cf2c64}
.grade-book.g5{--book-a:#33bac2;--book-b:#168c97}
.grade-book.g6{--book-a:#f7b61e;--book-b:#e5780d}

.reward-panel{
  min-height:224px;
  overflow:hidden;
  padding:24px 24px 18px;
  background:
    radial-gradient(circle at 72% 52%,rgba(249,184,43,.22),transparent 86px),
    linear-gradient(135deg,#ffffff,#f6faf8);
}
.reward-panel h3{
  max-width:160px;
  color:#071331;
  font-size:17px;
  line-height:1.45;
  font-weight:800;
}
.reward-panel img{
  width:112px;
  height:112px;
  margin:12px auto 10px;
  border-radius:50%;
  object-fit:contain;
  filter:drop-shadow(0 15px 16px rgba(190,132,21,.15));
}
.reward-panel p{
  max-width:140px;
  margin:0;
  color:#4a586a;
  font-size:13px;
  line-height:1.55;
}

/* Hero */
.video-content{min-width:0}
.video-hero{
  display:grid;
  grid-template-columns:210px minmax(260px,1fr) minmax(420px,600px);
  gap:20px;
  align-items:center;
  min-height:148px;
  margin-bottom:18px;
}
.video-hero-art{
  position:relative;
  height:140px;
}
.video-hero-art::before{
  content:"";
  position:absolute;
  left:14px;
  top:0;
  width:132px;
  height:132px;
  border-radius:50%;
  background:#e9f5ef;
}
.video-hero-art img{
  position:absolute;
  left:0;
  bottom:-10px;
  width:210px;
  height:auto;
  max-width:none;
  filter:drop-shadow(0 18px 22px rgba(22,72,42,.14));
}
.video-hero-copy h1{
  color:#071331;
  font-size:clamp(38px,4vw,54px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:0;
}
.video-hero-copy h1 span{
  display:block;
  color:#128548;
}
.video-hero-copy p{
  max-width:500px;
  margin:12px 0 0;
  color:#5e6878;
  font-size:15.5px;
  line-height:1.7;
}
.video-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(138px,150px));
  justify-content:end;
  gap:14px;
}
.video-stats article{
  min-height:80px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:15px 16px;
  border:1px solid #e5ece9;
  border-radius:15px;
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 28px rgba(25,48,36,.055);
}
.stat-icon{
  grid-row:span 2;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  box-shadow:inset 0 -5px 8px rgba(0,0,0,.16),0 10px 16px rgba(25,48,36,.12);
}
.stat-icon svg{width:23px;height:23px}
.stat-icon.play{background:linear-gradient(145deg,#45c76b,#128549)}
.stat-icon.free{background:linear-gradient(145deg,#55b5ff,#2472ce)}
.video-stats b{
  color:#111a31;
  font-size:20px;
  font-weight:800;
  line-height:1.08;
}
.video-stats small{
  color:#697486;
  font-size:12.5px;
  line-height:1.2;
}

/* Course cards */
.course-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px;
}
.course-card{
  display:block;
  min-width:0;
  overflow:hidden;
  padding:14px 14px 13px;
  border:1px solid #e3ebe7;
  border-radius:15px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(25,48,36,.055);
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.course-card:hover{
  transform:translateY(-4px);
  border-color:#d5e8dd;
  box-shadow:0 20px 42px rgba(25,48,36,.09);
}
.book-scene{
  position:relative;
  height:clamp(150px,11.6vw,204px);
  display:grid;
  place-items:center;
  margin-bottom:10px;
  perspective:800px;
  border-radius:12px;
  background:
    radial-gradient(circle at 45% 85%,rgba(31,137,78,.14),transparent 74px),
    linear-gradient(180deg,#f8faf8,#f2f6f4);
}
.book-cover{
  position:relative;
  width:min(218px,84%);
  height:auto;
  aspect-ratio:1.16;
  overflow:hidden;
  border-radius:9px 12px 12px 8px;
  transform:rotateY(-13deg) rotateZ(-1.5deg);
  transform-style:preserve-3d;
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.18) 38%,rgba(255,255,255,0) 39%),
    linear-gradient(155deg,var(--cover-a),var(--cover-b));
  border:1px solid rgba(7,19,49,.1);
  box-shadow:14px 14px 24px rgba(31,60,45,.18),inset 8px 0 rgba(255,255,255,.23);
}
.book-cover::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:17px;
  background:linear-gradient(90deg,rgba(0,0,0,.24),rgba(255,255,255,.1));
}
.book-cover::after{
  content:"";
  position:absolute;
  left:16px;
  right:0;
  bottom:0;
  height:20px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(228,234,231,.92)),
    repeating-linear-gradient(0deg,transparent 0 3px,rgba(12,35,22,.1) 3px 4px);
  border-top:1px solid rgba(0,0,0,.08);
}
.book-title{
  position:absolute;
  z-index:3;
  left:25px;
  right:36px;
  top:15px;
  color:var(--title-color,#138549);
  font-size:clamp(17px,1.05vw,24px);
  font-weight:800;
  line-height:1.05;
  text-align:center;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
}
.book-title,
.book-grade{
  display:none;
}
.book-grade{
  position:absolute;
  z-index:4;
  right:12px;
  top:42px;
  width:clamp(34px,2.2vw,44px);
  height:clamp(34px,2.2vw,44px);
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(145deg,var(--badge-a),var(--badge-b));
  box-shadow:inset 0 -4px 7px rgba(0,0,0,.18),0 6px 10px rgba(31,60,45,.14);
  font-size:clamp(20px,1.35vw,28px);
  font-weight:800;
}
.book-cover img{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:6px;
  width:clamp(120px,8vw,168px);
  height:clamp(118px,7.6vw,160px);
  object-fit:contain;
  object-position:bottom center;
  transform:translateX(-50%);
  filter:drop-shadow(0 8px 9px rgba(23,44,35,.14));
}
.play-mark{
  position:absolute;
  z-index:5;
  left:50%;
  top:57%;
  width:clamp(42px,3vw,58px);
  height:clamp(42px,3vw,58px);
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%) scale(.86);
  border-radius:50%;
  color:#fff;
  background:linear-gradient(145deg,#41bc68,#147d45);
  box-shadow:inset 0 -5px 9px rgba(0,0,0,.18),0 8px 14px rgba(19,125,69,.28);
  border:4px solid rgba(255,255,255,.78);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s,transform .18s,box-shadow .18s;
}
.course-card:hover .play-mark,
.course-card:focus-within .play-mark{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}
.play-mark:focus-visible{
  outline:3px solid rgba(46,158,88,.35);
  outline-offset:3px;
}
.play-mark svg{width:25px;height:25px}
.book-scene.az{--cover-a:#fbfff1;--cover-b:#bde684;--badge-a:#9160df;--badge-b:#6144bc;--title-color:#158e63}
.book-scene.math{--cover-a:#fff4f8;--cover-b:#ffd0dd;--badge-a:#35b5ef;--badge-b:#1675bf;--title-color:#e33066}
.book-scene.world{--cover-a:#fbfff1;--cover-b:#b7e48a;--badge-a:#79c449;--badge-b:#3e912d;--title-color:#26873f}
.book-scene.art{--cover-a:#fff6ef;--cover-b:#fbd3a5;--badge-a:#f36a8d;--badge-b:#c93f66;--title-color:#e23458}
.book-scene.music{--cover-a:#fffbed;--cover-b:#cfe987;--badge-a:#79c449;--badge-b:#3e912d;--title-color:#0d874a}
.book-scene.tech{--cover-a:#eef9ff;--cover-b:#b7dff0;--badge-a:#4d76d0;--badge-b:#314f9c;--title-color:#2276ba}
.book-scene.english{--cover-a:#eefcff;--cover-b:#c7f1ef;--badge-a:#f08522;--badge-b:#d45613;--title-color:#198bb8}
.book-scene.economy{--cover-a:#eef7ff;--cover-b:#bcdff2;--badge-a:#4d76d0;--badge-b:#314f9c;--title-color:#314f9c}
.book-scene.sport{--cover-a:#eefcff;--cover-b:#bde7ee;--badge-a:#24a8d8;--badge-b:#1773b5;--title-color:#1389b4}
.book-scene.az,
.book-scene.math,
.book-scene.world,
.book-scene.art,
.book-scene.music,
.book-scene.tech,
.book-scene.english,
.book-scene.economy,
.book-scene.sport{
  --cover-a:#fbfff1;
  --cover-b:#bde684;
  --badge-a:#41bc68;
  --badge-b:#147d45;
  --title-color:#158e63;
}

.course-card h3{
  overflow:hidden;
  margin:0 0 5px;
  color:#111a31;
  font-size:14.2px;
  font-weight:800;
  line-height:1.32;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.subject{
  display:inline-flex;
  margin-bottom:10px;
  padding:2px 7px;
  border-radius:7px;
  color:#188a4b;
  background:#eff9f3;
  font-size:12px;
  font-weight:600;
}
.subject.blue{color:#2677c9;background:#edf5ff}
.subject.purple{color:#7250c8;background:#f3effd}
.video-empty{
  padding:36px 28px;
  border:1px dashed #bddbc8;
  border-radius:16px;
  background:linear-gradient(135deg,#f5fbf7,#fff);
  text-align:center;
}
.video-empty h2{
  color:#111a31;
  font-size:24px;
  font-weight:800;
}
.video-empty p{
  max-width:520px;
  margin:10px auto 0;
  color:#667286;
  font-size:15px;
  line-height:1.6;
}
/* YouTube banner */
.youtube-banner{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  margin-top:18px;
  padding:20px 24px;
  border:1px solid #e0ece6;
  border-radius:16px;
  background:linear-gradient(135deg,#f4faf7,#fff);
  box-shadow:0 18px 42px rgba(25,48,36,.07);
}
.youtube-cube{
  width:58px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:13px;
  color:#fff;
  background:linear-gradient(145deg,#ff3a2d,#d71917);
  box-shadow:inset 0 -7px 10px rgba(0,0,0,.18),0 12px 17px rgba(203,29,25,.2);
  transform:rotate(-7deg);
}
.youtube-cube svg{width:31px;height:31px}
.youtube-banner h2{
  color:#178247;
  font-size:18px;
  font-weight:800;
}
.youtube-banner p{
  margin:3px 0 0;
  color:#667286;
  font-size:14px;
}
.youtube-banner .btn{
  min-height:48px;
  border-color:#83cda2;
  color:#168247;
  background:#fff;
}

@media(max-width:1280px){
  .video-layout{grid-template-columns:250px minmax(0,1fr)}
  .video-hero{grid-template-columns:190px 1fr}
  .video-stats{grid-column:1/-1}
  .course-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:980px){
  .video-layout{grid-template-columns:1fr}
  .video-sidebar{
    grid-template-columns:1.2fr .8fr;
    align-items:stretch;
  }
  .class-panel{padding-bottom:10px}
  .class-row{min-height:52px}
  .video-hero{grid-template-columns:170px minmax(0,1fr)}
  .course-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:720px){
  .video-main{padding-top:18px}
  .video-main .wrap{padding-left:16px;padding-right:16px}
  .video-crumb{font-size:12px;flex-wrap:wrap}
  .video-sidebar{grid-template-columns:1fr}
  .video-hero{
    grid-template-columns:1fr;
    text-align:left;
    gap:8px;
  }
  .video-hero-art{
    height:188px;
    order:2;
  }
  .video-hero-art::before{
    left:50%;
    width:150px;
    height:150px;
    transform:translateX(-58%);
  }
  .video-hero-art img{
    left:50%;
    bottom:-8px;
    width:260px;
    transform:translateX(-52%);
  }
  .video-hero-copy{order:1}
  .video-hero-copy h1{font-size:36px}
  .video-stats{
    order:3;
    grid-template-columns:1fr 1fr;
  }
  .course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .youtube-banner{
    grid-template-columns:1fr;
    align-items:start;
  }
  .youtube-banner .btn{width:100%}
}
@media(max-width:480px){
  .video-hero-copy h1{font-size:32px}
  .video-stats{grid-template-columns:1fr}
  .course-grid{grid-template-columns:1fr}
  .book-scene{height:166px}
  .book-cover{width:170px;height:144px}
}

body.dark.video-body{
  background:#0f1713;
}
body.dark .class-panel,
body.dark .reward-panel,
body.dark .video-stats article,
body.dark .course-card,
body.dark .youtube-banner{
  border-color:var(--line);
  background:var(--panel);
}
body.dark .book-scene{
  background:linear-gradient(180deg,#17241d,#101a15);
}
body.dark .video-empty{
  border-color:var(--line);
  background:var(--panel);
}