/* ============================================================================
   Study Mate — কোর্স সিস্টেম (প্রিমিয়াম ডিজাইন)
   ক) চলমান কোর্স স্লাইডার (শুধু ছবি)   খ) অনলাইন কোর্সসমূহ (ফিল্টারসহ কার্ড)   গ) কোর্স বিস্তারিত পেজ   ঘ) অ্যাডমিন (.ocm-*)
   শুধু সাইটের নিজস্ব ভেরিয়েবল (--forest, --gold, --maroon, --paper…) — ডার্ক মোড স্বয়ংক্রিয়।
   ========================================================================== */
/* ---------- বাটন (সবখানে ব্যবহৃত) ---------- */
.oc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:46px;padding:.65rem 1.1rem;border-radius:999px;font-weight:700;font-size:.95rem;border:1.5px solid var(--line);background:var(--white);color:var(--forest-text);text-align:center;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s,background .25s,border-color .25s;text-decoration:none;line-height:1.2}
.oc-btn:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 8px 20px rgba(6,34,24,.12)}
.oc-btn:active{transform:none}
.oc-btn:focus-visible{outline:3px solid var(--gold-bright);outline-offset:2px}
.oc-btn-primary{background:linear-gradient(135deg,#E2B55E,var(--gold) 55%,#A67526);border-color:transparent;color:#1d1405;box-shadow:var(--shadow-gold)}
.oc-btn-primary:hover{box-shadow:0 14px 30px rgba(185,138,62,.45);border-color:transparent}
.oc-btn-ghost{background:transparent}
.oc-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;pointer-events:none;box-shadow:none}
.oc-ph-title{padding:1rem 1.2rem;text-align:center;font-family:var(--font-display);font-size:1.15rem;line-height:1.4;color:#fff;background:radial-gradient(80% 90% at 85% 0%,rgba(217,168,78,.28),transparent 60%),linear-gradient(135deg,var(--forest-mid),var(--forest-deep))}
.oc-ph-title span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ocm-search{max-width:260px}
.oc-ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display);font-size:3rem;color:rgba(255,255,255,.55);background:linear-gradient(135deg,var(--forest-mid),var(--forest-deep))}

/* ---------- ক) চলমান কোর্স স্লাইডার — শুধু ছবি ---------- */
.oc-section{background:linear-gradient(165deg,var(--forest) 0%,var(--forest-deep) 100%);color:var(--on-dark);position:relative;overflow:hidden;padding:clamp(30px,5vw,60px) 0 clamp(26px,4vw,48px)}
.oc-section::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 55% at 88% 0%,rgba(217,168,78,.22),transparent 70%),radial-gradient(40% 40% at 0% 100%,rgba(110,27,44,.35),transparent 70%);pointer-events:none}
.oc-section .container{position:relative}
.oc-head{max-width:760px;margin:0 auto 1.6rem;text-align:center}
.oc-kicker{display:inline-block;font-family:var(--font-label);letter-spacing:.16em;text-transform:uppercase;font-size:var(--fs-xs);color:var(--gold-bright);background:rgba(255,255,255,.08);border:1px solid rgba(217,168,78,.45);padding:.4rem 1rem;border-radius:999px;margin-bottom:.85rem;backdrop-filter:blur(6px)}
.oc-head h2{font-family:var(--font-display);font-size:var(--fs-h2);margin:0 0 .45rem;color:#fff}
.oc-head p{margin:0;color:rgba(255,255,255,.82)}
.oc-slider{position:relative;--cw:min(88vw,560px);--gap:1.1rem}
.ocx-slider{--cw:min(76vw,320px);--gap:1rem}
.oc-track{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;padding:.6rem .2rem 1.4rem;scrollbar-width:none;outline:none;box-sizing:border-box}
.oc-track::-webkit-scrollbar{display:none}
.oc-track:focus-visible{box-shadow:0 0 0 3px var(--gold-bright);border-radius:var(--radius-md)}
.oc-card{flex:0 0 var(--cw);scroll-snap-align:center;border-radius:22px;overflow:hidden;position:relative;aspect-ratio:16/9;background:var(--forest-mid);box-shadow:0 18px 44px rgba(0,0,0,.38),0 0 0 1px rgba(217,168,78,.3);opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s var(--ease),box-shadow .35s}
/* কার্ড কম হলে মাঝখানে; বেশি হলে স্ক্রল (auto-margin ট্রিক: ওভারফ্লোতে বাঁ দিক কাটে না) */
.oc-track>.oc-card:first-child,.oc-track>.ocx-card:first-child{margin-left:auto}
.oc-track>.oc-card:last-child,.oc-track>.ocx-card:last-child{margin-right:auto}
.oc-track>.ocx-card{flex:0 0 var(--cw);scroll-snap-align:center}
@media(max-width:719px){
  /* মোবাইল: ক্যারোসেল স্ক্রিনের পুরো প্রস্থে (full-bleed); দুই পাশে সমান প্যাডিং → কার্ডের কেন্দ্র = স্ক্রিনের কেন্দ্র */
  .oc-slider{width:100vw;margin-left:calc(50% - 50vw);--sp:calc((100% - var(--cw)) / 2)}
  .oc-track{padding-left:var(--sp);padding-right:var(--sp);scroll-padding-left:var(--sp);scroll-padding-right:var(--sp)}
}
@media(min-width:720px){.oc-card,.oc-track>.ocx-card{flex:0 0 calc((100% - var(--gap)) / 2);scroll-snap-align:start}}
@media(min-width:1000px){.oc-card,.oc-track>.ocx-card{flex:0 0 calc((100% - 2 * var(--gap)) / 3)}}
.oc-card.oc-in{opacity:1;transform:none}
.oc-card:hover,.oc-card:focus-within{box-shadow:0 24px 56px rgba(0,0,0,.5),0 0 0 2px var(--gold-bright)}
.oc-media{position:absolute;inset:0;display:block;overflow:hidden}
.oc-media img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.oc-card:hover .oc-media img,.oc-card:focus-within .oc-media img{transform:scale(1.045)}
.oc-media::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(255,255,255,.1),transparent 30%,transparent 70%,rgba(0,0,0,.22));pointer-events:none}
.oc-ribbon{position:absolute;left:12px;top:12px;z-index:4;font-size:.78rem;font-weight:700;padding:.3rem .75rem;border-radius:999px;background:rgba(6,34,24,.78);color:#fff;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25)}
.oc-ribbon.s-closed{background:rgba(110,27,44,.9)}
.oc-ribbon.s-upcoming{background:rgba(185,138,62,.92);color:#1d1405}
.oc-nav{position:absolute;bottom:calc(1.4rem + 14px);z-index:4;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-size:1.15rem;line-height:1;display:grid;place-items:center;padding:0 0 2px;cursor:pointer;transition:background .25s,transform .25s}
.oc-nav:hover{background:rgba(0,0,0,.5);transform:scale(1.08)}
.oc-nav:focus-visible{outline:3px solid var(--gold-bright)}
.oc-nav[hidden]{display:none}
.oc-prev{left:14px}.oc-next{right:14px}
@media(max-width:719px){.oc-prev{left:calc((100vw - var(--cw)) / 2 + 14px)}.oc-next{right:calc((100vw - var(--cw)) / 2 + 14px)}}
.oc-ctrl[hidden]{display:none}
.oc-ctrl{position:absolute;left:0;right:0;bottom:calc(1.4rem + 10px);z-index:4;display:flex;justify-content:center;pointer-events:none}
.oc-dots{display:flex;gap:6px;align-items:center;pointer-events:auto}
.oc-dot{width:6px;height:6px;border-radius:999px;border:0;padding:0;background:rgba(255,255,255,.55);transition:width .3s var(--ease),background .3s}
.oc-dot[aria-current="true"]{width:16px;background:#fff}
.oc-dot:focus-visible{outline:3px solid var(--gold-bright);outline-offset:2px}
.oc-pp{display:none!important;width:26px;height:26px;border-radius:50%;border:0;border-left:1px solid rgba(255,255,255,.3);border-radius:0;padding:0 0 0 .6rem;width:auto;height:auto;background:none;color:#fff;font-size:.75rem;line-height:1}
.oc-pp:hover{color:var(--gold-bright)}
.oc-pp[hidden],.oc-dots[hidden]{display:none}
.oc-skel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.1rem}
.oc-skel[hidden]{display:none}
.oc-skel>div{aspect-ratio:16/9;border-radius:22px;background:linear-gradient(100deg,rgba(255,255,255,.07) 30%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.07) 70%) 0 0/200% 100%;animation:ocShim 1.3s linear infinite}
@keyframes ocShim{to{background-position:-200% 0}}
.oc-error{text-align:center;color:rgba(255,255,255,.85)}
.oc-error[hidden],.oc-slider[hidden],.oc-section[hidden]{display:none!important}

/* ---------- খ) অনলাইন কোর্সসমূহ (ক্যাটালগ) ---------- */
.ocx-section{padding:clamp(40px,6vw,76px) 0;background:linear-gradient(180deg,var(--paper-alt),var(--paper));position:relative}
.ocx-section[hidden]{display:none!important}
.ocx-head{text-align:center;max-width:720px;margin:0 auto 1.4rem}
.ocx-kicker{display:inline-block;font-family:var(--font-label);letter-spacing:.16em;text-transform:uppercase;font-size:var(--fs-xs);color:var(--gold);margin-bottom:.5rem}
.ocx-head h2{font-size:var(--fs-h2);color:var(--forest-text);margin:0 0 .4rem}
.ocx-head h2::after{content:"";display:block;width:64px;height:4px;border-radius:4px;margin:.7rem auto 0;background:linear-gradient(90deg,var(--gold-bright),var(--maroon))}
.ocx-head p{color:var(--ink-soft);margin:.6rem 0 0}
.ocx-chips{display:flex;gap:.55rem;overflow-x:auto;padding:.3rem 16px 1rem;margin:0 0 .4rem;scrollbar-width:none;justify-content:flex-start;box-sizing:border-box}
.ocx-chips>.ocx-chip:first-child{margin-left:auto}.ocx-chips>.ocx-chip:last-child{margin-right:auto}
@media(max-width:719px){.ocx-chips{width:100vw;margin-left:calc(50% - 50vw)}}
.ocx-chips::-webkit-scrollbar{display:none}
@media(min-width:760px){.ocx-chips{flex-wrap:wrap;justify-content:center;overflow:visible;padding-inline:0}.ocx-chips>.ocx-chip:first-child,.ocx-chips>.ocx-chip:last-child{margin-inline:0}}
.ocx-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;border:1.5px solid var(--line);background:var(--white);color:var(--ink);border-radius:999px;padding:.55rem 1.05rem;font-weight:700;font-size:.92rem;transition:all .25s var(--ease)}
.ocx-chip b{font-size:.75rem;background:var(--forest-soft);color:var(--forest-text);border-radius:999px;padding:.05rem .5rem}
.ocx-chip:hover{border-color:var(--gold);transform:translateY(-1px)}
.ocx-chip[aria-pressed="true"]{background:linear-gradient(145deg,var(--forest-mid),var(--forest));color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(6,34,24,.25)}
.ocx-chip[aria-pressed="true"] b{background:rgba(255,255,255,.22);color:#fff}
.ocx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:1.3rem}
.ocx-card{background:var(--white);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;transition:transform .5s var(--ease),opacity .5s ease,box-shadow .4s;opacity:0;transform:translateY(18px)}
.ocx-card.oc-in{opacity:1;transform:none}
.ocx-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card);border-color:rgba(185,138,62,.55)}
.ocx-media{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,var(--forest-mid),var(--forest-deep))}
.ocx-media img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ocx-card:hover .ocx-media img{transform:scale(1.05)}
.ocx-body{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.ocx-level{align-self:flex-start;font-size:.78rem;font-weight:700;color:var(--forest-text);background:var(--forest-soft);padding:.22rem .7rem;border-radius:999px}
.ocx-title{font-family:var(--font-display);font-size:1.12rem;line-height:1.35;color:var(--forest-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.ocx-title a:hover{color:var(--maroon-text)}
.ocx-price{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;margin-top:auto}
.ocx-price .now{font-size:1.4rem;font-weight:800;color:var(--forest-text);font-family:var(--font-body)}
.ocx-price .was{text-decoration:line-through;color:var(--ink-soft);font-size:.95rem}
.ocx-price .off{font-size:.75rem;font-weight:800;color:#fff;background:var(--ok);border-radius:999px;padding:.15rem .55rem}
.ocx-actions{display:grid;grid-template-columns:1fr 1.15fr;gap:.55rem}
.ocx-more{text-align:center;margin-top:1.8rem}
.ocx-more .oc-btn{min-width:240px}
.ocx-empty{text-align:center;color:var(--ink-soft);padding:2rem 0}
.ocx-skel[hidden]{display:none}
.ocx-sk{aspect-ratio:4/3;box-shadow:none;opacity:1;transform:none;background:linear-gradient(100deg,var(--paper-alt) 30%,var(--paper) 50%,var(--paper-alt) 70%) 0 0/200% 100%;animation:ocShim 1.3s linear infinite}


/* ক্যাটাগরি ট্যাব + মসৃণ ট্রানজিশন + কমপ্যাক্ট লেআউট */
.ocx-stage{position:relative}
.ocx-stage.is-anim{overflow:hidden;transition:height .38s var(--ease)}
.ocx-grid,.ocx-track{transition:opacity .19s ease,transform .19s ease,scroll-behavior 0s}
.ocx-grid.ocx-out,.ocx-track.ocx-out{opacity:0;transform:translateY(-6px)}
.ocx-grid:focus{outline:none}
.ocx-chip{position:relative;scroll-margin-inline:1rem}
.ocx-chip:focus-visible{outline:3px solid var(--gold-bright);outline-offset:2px}
.ocx-chips{scroll-behavior:auto;overscroll-behavior-x:contain}
@media(prefers-reduced-motion:reduce){.ocx-stage.is-anim,.ocx-grid,.ocx-track{transition:none}.ocx-grid.ocx-out,.ocx-track.ocx-out{transform:none}}

/* ---------- গ) কোর্স বিস্তারিত পেজ ---------- */
.ocd-wrap{max-width:1120px;margin:0 auto;padding:1.4rem 20px 3.5rem}
.ocd-back{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--forest-text);margin-bottom:.9rem;padding:.35rem .2rem}
.ocd-back:hover{color:var(--maroon-text)}
.ocd-h1{font-size:clamp(1.45rem,3.2vw,2.2rem);color:var(--forest-text);margin:0 0 .35rem}
.ocd-h1::after{content:"";display:block;width:70px;height:4px;border-radius:4px;margin-top:.6rem;background:linear-gradient(90deg,var(--gold-bright),var(--maroon))}
.ocd-sub{color:var(--ink-soft);margin:.7rem 0 1rem}
.ocd-grid{display:grid;gap:1.2rem;margin-top:1.1rem;grid-template-columns:minmax(0,1fr);grid-template-areas:"banner" "side" "tabs"}
@media(min-width:920px){.ocd-grid{grid-template-columns:minmax(0,1.75fr) minmax(310px,.95fr);grid-template-areas:"banner side" "tabs side";align-items:start;gap:1.4rem}.ocd-side{position:sticky;top:96px}}
.ocd-banner{grid-area:banner;position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,var(--forest-mid),var(--forest-deep));box-shadow:var(--shadow-card);border:1px solid rgba(185,138,62,.35)}
.ocd-banner img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}
.oc-badge{position:absolute;z-index:3;left:14px;top:14px;display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;padding:.32rem .8rem;border-radius:999px;background:rgba(6,34,24,.8);color:#fff;backdrop-filter:blur(6px)}
.oc-badge.s-ongoing::before{content:"";width:8px;height:8px;border-radius:50%;background:#59e08f;box-shadow:0 0 0 0 rgba(89,224,143,.7);animation:ocPulse 1.8s infinite}
.oc-badge.s-closed{background:rgba(110,27,44,.92)}
.oc-badge.s-upcoming{background:rgba(185,138,62,.95);color:#1d1405}
@keyframes ocPulse{70%{box-shadow:0 0 0 9px rgba(89,224,143,0)}100%{box-shadow:0 0 0 0 rgba(89,224,143,0)}}
.ocd-side{grid-area:side}
.ocd-card{background:var(--white);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-soft)}
.ocd-box{padding:1.3rem 1.25rem}
.ocd-pricerow{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:.4rem}
.ocd-price{font-family:var(--font-body);font-size:2rem;font-weight:800;color:var(--forest-text);line-height:1.1}
.ocd-was{text-decoration:line-through;color:var(--ink-soft);font-size:1.05rem}
.ocd-off{font-size:.78rem;font-weight:800;color:#fff;background:var(--ok);border-radius:999px;padding:.2rem .65rem}
.ocd-note{font-size:.82rem;color:var(--ink-soft);margin:.5rem 0}
.ocd-cta{display:grid;gap:.6rem;margin:.9rem 0}
.ocd-cta .oc-btn-primary{min-height:52px;font-size:1.05rem}
.ocd-stat{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-top:1px dashed var(--line);font-size:.92rem}
.ocd-stat b{color:var(--ink-soft);font-weight:600}.ocd-stat span{font-weight:700;text-align:right}
.ocd-stat[hidden]{display:none}
.ocd-msg{padding:.65rem .85rem;border-radius:12px;font-size:.9rem;margin:.5rem 0;background:var(--forest-soft);color:var(--forest-text)}
.ocd-msg.bad{background:#f7e3e6;color:var(--danger-text)}.ocd-msg.warn{background:var(--gold-soft);color:#6b4a12}
.ocd-countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin:.6rem 0;text-align:center}
.ocd-countdown[hidden]{display:none}
.ocd-countdown>div{background:linear-gradient(160deg,var(--forest-mid),var(--forest-deep));color:#fff;border-radius:12px;padding:.5rem .2rem}
.ocd-countdown span{display:block;font-weight:800;font-size:1.2rem}.ocd-countdown small{font-size:.68rem;opacity:.8}
.ocd-tabsbox{grid-area:tabs;overflow:hidden;min-width:0}
.ocd-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-bottom:1px solid var(--line);background:var(--paper)}
.ocd-tab{background:none;border:0;padding:1rem .8rem;font-weight:800;font-size:.98rem;color:var(--ink-soft);position:relative;display:flex;align-items:center;justify-content:center;gap:.45rem}
.ocd-tab em{font-style:normal;font-size:.72rem;background:var(--gold-soft);color:#6b4a12;border-radius:999px;padding:.05rem .5rem}
.ocd-tab[aria-selected="true"]{color:var(--forest-text);background:var(--white)}
.ocd-tab[aria-selected="true"]::after{content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--gold-bright),var(--maroon))}
.ocd-tab:focus-visible{outline:3px solid var(--gold-bright);outline-offset:-3px}
.ocd-panel{padding:1.3rem 1.25rem}
.ocd-panel[hidden]{display:none}
.ocd-panel h2{font-size:1.2rem;color:var(--forest-text);margin:1.3rem 0 .6rem}.ocd-panel h2:first-child{margin-top:0}
.ocd-desc{white-space:pre-line;color:var(--ink);line-height:1.8}
.ocd-list{display:grid;gap:.5rem}
.ocd-list li{position:relative;padding-left:1.8rem}
.ocd-list li::before{content:"✓";position:absolute;left:0;top:0;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--forest-soft);color:var(--ok-text);font-size:.8rem;display:grid;place-items:center;font-weight:800}
.ocd-instr{display:flex;gap:.9rem;align-items:flex-start}
.ocd-instr .av{flex:0 0 52px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.3rem;color:#fff;background:linear-gradient(135deg,var(--forest-mid),var(--maroon))}
.ocd-faq details{border:1px solid var(--line);border-radius:14px;padding:.75rem 1rem;margin-bottom:.55rem;background:var(--paper)}
.ocd-faq summary{cursor:pointer;font-weight:700}.ocd-faq p{margin:.6rem 0 0;color:var(--ink-soft)}
/* ডেমো ক্লাস তালিকা (বিষয়ভিত্তিক) */
.ocd-dchips{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.7rem;scrollbar-width:none}
.ocd-dchips::-webkit-scrollbar{display:none}
.ocd-dchip{flex:0 0 auto;border:1.5px solid var(--line);background:var(--white);border-radius:999px;padding:.4rem .9rem;font-weight:700;font-size:.85rem;color:var(--ink)}
.ocd-dchip[aria-pressed="true"]{background:var(--forest);color:#fff;border-color:var(--forest)}
.ocd-demos{display:grid;gap:.75rem}
.ocd-demo{display:flex;align-items:flex-start;gap:.9rem;width:100%;text-align:left;border:1px solid var(--line);background:var(--paper);border-radius:18px;padding:.6rem;color:var(--ink);transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.ocd-demo:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:var(--shadow-soft)}
.ocd-demo:focus-visible{outline:3px solid var(--gold-bright);outline-offset:2px}
.ocd-thumb{position:relative;flex:0 0 clamp(128px,38%,240px);aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,var(--forest-mid),var(--forest-deep));box-shadow:0 4px 12px rgba(6,34,24,.2)}
.ocd-thumb img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.ocd-thumb .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;color:rgba(255,255,255,.8);background:radial-gradient(90% 90% at 85% 0%,rgba(217,168,78,.3),transparent 60%),linear-gradient(135deg,var(--forest-mid),var(--forest-deep))}
.ocd-thumb .ph i{font-style:normal;font-size:1.4rem}.ocd-thumb .ph small{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.ocd-thumb .pl{position:absolute;z-index:2;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.28));transition:background .25s}
.ocd-thumb .pl b{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;color:#fff;background:rgba(110,27,44,.92);border:1.5px solid rgba(255,255,255,.7);box-shadow:0 4px 12px rgba(0,0,0,.35);padding-left:2px;transition:transform .25s var(--ease),background .25s}
.ocd-demo:hover .pl b{transform:scale(1.12);background:var(--maroon)}
.ocd-thumb .no{position:absolute;z-index:3;left:6px;top:6px;min-width:22px;height:22px;padding:0 .4rem;border-radius:999px;display:grid;place-items:center;font-size:.72rem;font-weight:800;color:#1d1405;background:rgba(255,255,255,.92)}
.ocd-demo .tx{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;padding:.1rem .2rem .1rem 0}
.ocd-demo .tt{font-weight:800;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ocd-demo .sj{font-size:.72rem;font-weight:800;color:var(--maroon-text);background:var(--gold-soft);border-radius:999px;padding:.12rem .6rem}
.ocd-demo .ch{font-size:.8rem;color:var(--ink-soft);line-height:1.35;overflow-wrap:anywhere}
@media(min-width:720px){.ocd-demo{padding:.7rem;gap:1.1rem}.ocd-thumb{flex-basis:clamp(190px,34%,260px)}.ocd-demo .tt{font-size:1.05rem}}
.ocd-demomore{margin-top:.9rem;text-align:center}
.ocd-empty{text-align:center;padding:3rem 1rem}
.ocd-skeleton{aspect-ratio:16/9;border-radius:24px;background:linear-gradient(100deg,var(--paper-alt) 30%,var(--paper) 50%,var(--paper-alt) 70%) 0 0/200% 100%;animation:ocShim 1.3s linear infinite}
.dark-mode .ocx-section{background:linear-gradient(180deg,#0e1b15,#0a130e)}
.dark-mode .ocd-demo,.dark-mode .ocd-faq details,.dark-mode .ocd-tabs{background:rgba(255,255,255,.04)}
@media(prefers-reduced-motion:reduce){.oc-card,.ocx-card{opacity:1;transform:none}.oc-badge.s-ongoing::before{animation:none}}

/* ================= অ্যাডমিন: চলমান কোর্স ম্যানেজমেন্ট (.ocm-*) ================= */
.ocm-wrap{max-width:1100px}
.ocm-h{font-family:var(--font-display);margin:0 0 .3rem}
.ocm-help{color:var(--ink-soft);margin:0 0 1rem;font-size:var(--fs-small)}
.ocm-msg{padding:.65rem .9rem;border-radius:var(--radius-md);margin:.6rem 0;font-size:var(--fs-small)}
.ocm-msg.ok{background:var(--forest-soft);color:var(--forest-text)}.ocm-msg.bad{background:#fbe9ec;color:#7a1625}.dark-mode .ocm-msg.bad{background:#3a1820;color:#f4b3bd}
.ocm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem;margin:.6rem 0 1rem}
.ocm-stat{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);padding:.7rem .8rem;display:flex;flex-direction:column;box-shadow:var(--shadow-soft)}
.ocm-stat b{font-size:1.5rem;color:var(--forest-text)}.ocm-stat span{font-size:var(--fs-xs);color:var(--ink-soft)}
.ocm-box{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);padding:1rem;margin:.8rem 0}
.ocm-box summary{cursor:pointer;font-weight:700}
.ocm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.8rem;margin:.8rem 0}
.ocm-grid1{display:grid;grid-template-columns:1fr;gap:.8rem;margin:.8rem 0}
.ocm-f{display:flex;flex-direction:column;gap:.25rem;font-size:var(--fs-small);font-weight:600}
.ocm-f small{font-weight:400;color:var(--ink-soft);font-size:var(--fs-xs)}
.ocm-in{font:inherit;padding:.55rem .65rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);width:100%;box-sizing:border-box}
.ocm-in[type="checkbox"]{width:22px;height:22px}
.ocm-in:focus-visible,.ocm-btn:focus-visible,.ocm-tab:focus-visible,.ocm-sel:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.ocm-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;align-items:center;margin:1rem 0 .6rem}
.ocm-tabs{display:flex;gap:.3rem;flex-wrap:wrap}
.ocm-tab{border:1px solid var(--line);background:var(--white);padding:.45rem .9rem;border-radius:999px;cursor:pointer;font:inherit;font-weight:600;color:var(--ink)}
.ocm-tab[aria-selected="true"]{background:var(--forest);color:#fff;border-color:var(--forest)}
.ocm-btn{border:1px solid var(--line);background:var(--white);color:var(--ink);padding:.45rem .8rem;border-radius:var(--radius-sm);cursor:pointer;font:inherit;font-size:var(--fs-small);font-weight:600;min-height:38px}
.ocm-btn:hover{background:var(--forest-soft)}.ocm-btn:disabled{opacity:.6;cursor:wait}
.ocm-primary{background:var(--forest);color:#fff;border-color:var(--forest)}.ocm-primary:hover{background:var(--forest-mid)}
.ocm-danger{color:var(--danger-text);border-color:var(--danger-text)}.ocm-dis{opacity:.35;pointer-events:none}
.ocm-row{display:grid;grid-template-columns:96px 1fr;gap:.8rem;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);padding:.7rem;margin-bottom:.6rem}
@media(min-width:900px){.ocm-row{grid-template-columns:96px 1fr auto;align-items:center}}
.ocm-th{width:96px;height:54px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--forest-mid),var(--forest-deep));overflow:hidden}.ocm-th img{width:100%;height:100%;object-fit:cover;display:block}
.ocm-main{min-width:0}.ocm-main b{display:block}.ocm-sub{font-size:var(--fs-xs);color:var(--ink-soft)}
.ocm-badges{display:flex;flex-wrap:wrap;gap:.3rem;margin:.3rem 0}
.ocm-b{font-size:var(--fs-xs);padding:.15rem .5rem;border-radius:999px;background:var(--paper-alt);font-weight:700}
.ocm-b.ok{background:var(--forest-soft);color:var(--forest-text)}.ocm-b.off{background:#eee;color:#555}.dark-mode .ocm-b.off{background:#2b2b2b;color:#bbb}
.ocm-b.gold{background:var(--gold-soft);color:#7a5a12}.ocm-b.warn{background:#fff3cd;color:#7a5a12}.ocm-b.st-closed{background:#fbe9ec;color:#7a1625}.ocm-b.st-upcoming{background:var(--gold-soft)}
.ocm-acts{display:flex;flex-wrap:wrap;gap:.3rem;grid-column:1/-1}
@media(min-width:900px){.ocm-acts{grid-column:auto;max-width:430px;justify-content:flex-end}}
.ocm-sel{font:inherit;font-size:var(--fs-small);padding:.4rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink)}
.ocm-empty{text-align:center;color:var(--ink-soft);padding:2rem 1rem;background:var(--white);border:1px dashed var(--line);border-radius:var(--radius-md)}
.ocm-actions{display:flex;gap:.6rem;margin-top:1rem}
.ocm-form h3{margin:0 0 .4rem;font-family:var(--font-display)}

/* ====== ব্যাখ্যা: লেখকের (author) display নিয়ম HTML-এর hidden অ্যাট্রিবিউটকে হারিয়ে দিত (স্কেলিটন/ডট দেখা যেত) — তাই জোর করে লুকাই ====== */
.oc-section [hidden],.oc-section[hidden],.ocd-wrap [hidden],.ocm-wrap [hidden]{display:none !important}

/* ====== হোমপেজ: চলমান কোর্স সবার উপরে, তার নিচে হিরো (শিরোনাম/CTA/পরিসংখ্যান) — হিরোর ডান কলাম এখন নেই ====== */
body[data-page="home"] .hero .container{grid-template-columns:1fr}
body[data-page="home"] .hero .container > div{max-width:820px}
.oc-section:not([hidden]) + .hero{background:var(--forest-deep);padding-top:34px;border-top:1px solid rgba(255,255,255,.08)}

/* ডেমো ক্লাস এডিটর (অ্যাডমিন) */
.ocm-demos{display:grid;gap:.5rem;margin:.4rem 0}
.ocm-drow{display:grid;grid-template-columns:1.1fr 1.3fr 1.2fr 1.6fr auto;gap:.4rem;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:.45rem}
@media(max-width:820px){.ocm-drow{grid-template-columns:1fr 1fr}.ocm-drow .ocm-dact{grid-column:1/-1}}
.ocm-drow .ocm-in{width:100%;min-width:0}
.ocm-dact{display:flex;gap:.25rem;justify-content:flex-end}
.ocm-dcount{font-size:.85rem;color:var(--ink-soft)}
.ocm-bulk{width:100%}

/* অনলাইন কোর্সসমূহ ক্যারোসেল: কন্ট্রোল কার্ডের নিচে (বাটন ঢাকে না) */
.ocx-section{overflow-x:clip}
.ocx-slider .oc-ctrl{position:static;transform:none;left:auto;right:auto;bottom:auto;display:flex;justify-content:center;align-items:center;gap:.9rem;margin-top:.2rem;pointer-events:auto}
.ocx-slider .oc-nav{position:static;width:38px;height:38px;border:1.5px solid var(--forest);background:var(--white);color:var(--forest-text);font-size:1.3rem;backdrop-filter:none;box-shadow:var(--shadow-soft)}
.ocx-slider .oc-nav:hover{background:var(--forest);color:#fff;transform:scale(1.06)}
.ocx-slider .oc-dot{background:rgba(6,34,24,.25)}
.ocx-slider .oc-dot[aria-current="true"]{background:linear-gradient(90deg,var(--gold-bright),var(--gold))}
.ocx-slider .oc-nav[hidden],.ocx-slider .oc-dots[hidden]{display:none}
.oc-track>.ocx-empty{flex:1 0 100%}
.ocx-slider .oc-track{padding-bottom:1rem}

/* ============================================================================
   হোমপেজের দুটি ক্যারোসেল — Premium Center-focus (Coverflow): "চলমান কোর্স" (হেডার ব্যানার, .ocs-cf) + "অনলাইন কোর্সসমূহ" (.ocx-cf)
   শুধু .ocx-cf স্কোপে (JS হোমপেজে এই ক্লাস বসায়) — courses.html-এর গ্রিড ও অন্য পেজ অপরিবর্তিত। রঙ/ফন্ট সাইটের বিদ্যমান ভেরিয়েবল; ডার্ক মোড স্বয়ংক্রিয়।
   নিয়ম: পাতলা বর্ডার, নরম ছায়া, কোনো গ্লো/মোটা রিং/অতিরিক্ত 3D নয়।
   ========================================================================== */
.ocx-cf { --cw: clamp(262px, 76vw, 336px); --dx: calc(var(--cw) * .88); --sc: .88; --cf-ms: 5600ms; --cf-ease: cubic-bezier(.25, .8, .25, 1); }
@media (min-width: 720px) { .ocx-cf { --cw: clamp(300px, 38vw, 356px); } }
@media (min-width: 1000px) { .ocx-cf { --cw: 356px; } }
.ocs-cf { --cw: clamp(272px, 80vw, 540px); --dx: calc(var(--cw) * .9); --sc: .88; width: 100vw; margin-left: calc(50% - 50vw); }
@media (min-width: 720px) { .ocs-cf { --cw: clamp(420px, 60vw, 560px); } }
@media (min-width: 1000px) { .ocs-cf { --cw: 580px; } }

/* স্টেজ: সব কার্ড এক গ্রিড-ঘরে; অবস্থান শুধু transform-এ (লেআউট লাফ নেই) */
.ocx-cf .oc-track { display: grid; place-items: start center; overflow: hidden; scroll-snap-type: none; scroll-behavior: auto; gap: 0; padding: 1.1rem 0 1.5rem; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.ocx-cf .oc-track > [data-pos] { grid-area: 1 / 1; flex: none; width: var(--cw); margin: 0; scroll-snap-align: none; opacity: 1; will-change: transform, opacity;
  transition: transform .85s var(--cf-ease), opacity .6s ease, filter .6s ease, box-shadow .6s ease; }
.ocx-cf .oc-track > [data-pos="c"] { transform: none; z-index: 3; }
.ocx-cf .oc-track > [data-pos="l"] { transform: translateX(calc(var(--dx) * -1)) scale(var(--sc)); z-index: 2; opacity: .9; filter: saturate(.9); cursor: pointer; }
.ocx-cf .oc-track > [data-pos="r"] { transform: translateX(var(--dx)) scale(var(--sc)); z-index: 2; opacity: .9; filter: saturate(.9); cursor: pointer; }
.ocx-cf .oc-track > [data-pos="xl"] { transform: translateX(calc(var(--dx) * -1.8)) scale(.78); z-index: 1; opacity: 0; pointer-events: none; }
.ocx-cf .oc-track > [data-pos="xr"] { transform: translateX(calc(var(--dx) * 1.8)) scale(.78); z-index: 1; opacity: 0; pointer-events: none; }
.ocx-cf .oc-track > .ocx-empty { grid-area: 1 / 1; }

/* ---------- অনলাইন কোর্সসমূহ — কার্ড: পাতলা বর্ডার, নরম ছায়া, পরিষ্কার হায়ারার্কি ---------- */
.ocx-cf .ocx-card { border: 1px solid rgba(6, 34, 24, .09); border-radius: 20px; background: var(--white); box-shadow: 0 1px 2px rgba(6, 34, 24, .04), 0 12px 26px -20px rgba(6, 34, 24, .28); }
.ocx-cf .ocx-card[data-pos="c"] { border-color: rgba(185, 138, 62, .34); box-shadow: 0 2px 4px rgba(6, 34, 24, .05), 0 22px 40px -26px rgba(6, 34, 24, .34); }
.ocx-cf .ocx-card[data-pos="l"], .ocx-cf .ocx-card[data-pos="r"] { box-shadow: 0 8px 20px -18px rgba(6, 34, 24, .22); }
.dark-mode .ocx-cf .ocx-card { border-color: rgba(255, 255, 255, .09); box-shadow: 0 12px 26px -18px rgba(0, 0, 0, .55); }
.dark-mode .ocx-cf .ocx-card[data-pos="c"] { border-color: rgba(217, 168, 78, .36); }
.ocx-cf .ocx-card:hover { box-shadow: none; }
.ocx-cf .ocx-card[data-pos="c"]:hover { box-shadow: 0 2px 4px rgba(6, 34, 24, .05), 0 26px 44px -26px rgba(6, 34, 24, .38); }
.ocx-cf .ocx-card:hover .ocx-media img { transform: none; } .ocx-cf .ocx-card[data-pos="c"]:hover .ocx-media img { transform: scale(1.03); }
.ocx-cf .ocx-card[data-pos="l"] .ocx-actions, .ocx-cf .ocx-card[data-pos="r"] .ocx-actions { pointer-events: none; }
.ocx-cf .ocx-body { padding: 1.05rem 1.2rem 1.2rem; gap: .5rem; }
.ocx-cf .ocx-level { font-size: .72rem; font-weight: 700; letter-spacing: .03em; color: var(--forest-text); background: rgba(23, 75, 60, .07); padding: .2rem .65rem; }
.dark-mode .ocx-cf .ocx-level { background: rgba(255, 255, 255, .08); }
.ocx-cf .ocx-title { font-size: 1.02rem; line-height: 1.42; min-height: 2.84em; font-weight: 600; letter-spacing: -.005em; }
.ocx-cf .ocx-price { gap: .5rem; align-items: baseline; margin-top: .35rem; }
.ocx-cf .ocx-price .now { font-size: 1.32rem; font-weight: 800; letter-spacing: -.01em; }
.ocx-cf .ocx-price .was { font-size: .84rem; opacity: .8; }
.ocx-cf .ocx-price .off { font-size: .68rem; font-weight: 700; padding: .14rem .5rem; }
.ocx-cf .ocx-actions { gap: .5rem; margin-top: .55rem; padding-top: .85rem; border-top: 1px solid var(--line); }
.ocx-cf .ocx-actions .oc-btn { min-height: 42px; padding-block: .45rem; font-size: .9rem; border-width: 1px; }
.ocx-cf .ocx-actions .oc-btn:hover { transform: none; box-shadow: none; border-color: var(--gold); }
.ocx-cf .ocx-actions .oc-btn-primary { box-shadow: 0 6px 14px -9px rgba(166, 117, 38, .75); }
.ocx-cf .ocx-actions .oc-btn-primary:hover { box-shadow: 0 8px 16px -9px rgba(166, 117, 38, .8); }

/* ---------- হেডার "চলমান কোর্স" ব্যানার ---------- */
.ocs-cf .oc-card { border-radius: 22px; box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 16px 32px -20px rgba(0, 0, 0, .55); outline: 1px solid rgba(255, 255, 255, .12); outline-offset: -1px; }
.ocs-cf .oc-card[data-pos="c"] { outline-color: rgba(217, 168, 78, .5); box-shadow: 0 2px 4px rgba(0, 0, 0, .22), 0 24px 40px -24px rgba(0, 0, 0, .6); }
.ocs-cf .oc-card[data-pos="l"], .ocs-cf .oc-card[data-pos="r"] { filter: saturate(.88) brightness(.86); box-shadow: 0 10px 22px -18px rgba(0, 0, 0, .5); }
.ocs-cf .oc-card:hover, .ocs-cf .oc-card:focus-within { box-shadow: 0 2px 4px rgba(0, 0, 0, .22), 0 24px 40px -24px rgba(0, 0, 0, .6); }
.ocs-cf .oc-card:hover .oc-media img, .ocs-cf .oc-card:focus-within .oc-media img { transform: none; } .ocs-cf .oc-card[data-pos="c"]:hover .oc-media img { transform: scale(1.025); }
.ocs-cf .oc-track { padding-top: .6rem; }
/* কন্ট্রোল-সারি: ← সেগমেন্টেড প্রগ্রেস → (ব্যানারের নিচে) */
.ocs-cf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: .9rem; padding-inline: max(1rem, calc((100vw - 1180px) / 2)); box-sizing: border-box; }
.ocs-cf .oc-track { grid-column: 1 / -1; margin-inline: calc(-1 * max(1rem, calc((100vw - 1180px) / 2))); }
.ocs-cf .oc-prev { grid-column: 1; grid-row: 2; } .ocs-cf .oc-next { grid-column: 3; grid-row: 2; } .ocs-cf .oc-ctrl { grid-column: 2; grid-row: 2; }
.ocs-cf .oc-nav { position: static; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .07); backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 1.25rem; }
.ocs-cf .oc-nav:hover { background: rgba(255, 255, 255, .16); transform: none; }
.ocs-cf .oc-ctrl { position: static; transform: none; display: flex; justify-content: center; margin: 0; pointer-events: auto; }
.ocx-cf.ocs-cf .oc-dot, .ocx-cf.ocs-cf .oc-dot[aria-current="true"] { background-color: rgba(255, 255, 255, .32); }   /* গাঢ় ব্যাকগ্রাউন্ডে দৃশ্যমান সেগমেন্ট */
.ocs-cf .oc-pp { display: none !important; }

/* ---------- সেগমেন্টেড প্রগ্রেস-ইন্ডিকেটর (দুটোতেই) ---------- */
.ocx-cf .oc-ctrl { gap: 1rem; margin-top: 0; }
.ocx-cf .oc-dots { gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; max-width: min(78vw, 480px); }
.ocx-cf .oc-dot { position: relative; overflow: hidden; box-sizing: content-box; width: 22px; height: 4px; padding: 0; border: 0; border-block: 9px solid transparent; background-clip: padding-box; border-radius: 999px; background-color: rgba(6, 34, 24, .16); transition: width .55s var(--cf-ease), background-color .3s; cursor: pointer; }
.dark-mode .ocx-section .ocx-cf .oc-dot { background-color: rgba(255, 255, 255, .22); }
.ocx-cf .oc-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--gold-bright), var(--gold)); transform: scaleX(0); transform-origin: left center; }
.ocx-cf .oc-dot[aria-current="true"] { width: 56px; }
.ocx-cf .oc-dot[aria-current="true"]::after { transform: scaleX(1); }                    /* অটো-স্লাইড বন্ধ/কমানো-মোশনে: স্থির সোনালি */
.ocx-cf .oc-dot.is-run[aria-current="true"]::after { transform: scaleX(0); animation: ocxFill var(--cf-ms) linear forwards; }   /* বামে → ডানে প্রকৃত ফিল; ফিল শেষ = পরের স্লাইড */
.ocx-cf.is-paused .oc-dot.is-run::after { animation-play-state: paused; }              /* হোভার/টাচ/অদৃশ্য ট্যাব → টাইমারসহ থামে */
@keyframes ocxFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* নেভিগেশন-বোতাম (অনলাইন কোর্স): পাতলা বর্ডার */
.ocx-slider.ocx-cf .oc-nav { width: 38px; height: 38px; border: 1px solid var(--line); box-shadow: none; }
.ocx-slider.ocx-cf .oc-nav:hover { background: var(--forest); border-color: var(--forest); color: #fff; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ocx-cf .oc-track > [data-pos], .ocx-cf .oc-dot { transition: none !important; }
  .ocx-cf .oc-dot.is-run[aria-current="true"]::after { animation: none; transform: scaleX(1); }
}
@media (max-width: 719px) { .ocx-cf .oc-dots { max-width: calc(100vw - 150px); gap: 5px; } .ocx-cf .oc-dot { width: 15px; } .ocx-cf .oc-dot[aria-current="true"] { width: 38px; } }
/* ডার্ক-মোডে সাইট-জুড়ে ছবি .92 opacity পায় (style.css) — কোর্স কার্ডে তাতে পেছনের প্লেসহোল্ডার লেখা ছবির ওপর ফুটে উঠত; এই দুই ক্যারোসেলে ছবি সম্পূর্ণ অস্বচ্ছ */
html.dark-mode .ocx-cf .ocx-media img, html.dark-mode .ocx-cf .oc-media img { opacity: 1; }