/* Bootstrap'in karşılamadığı ortak ayarlar. Bootstrap CSS'ten sonra yüklenir. */

:root{
  --bs-body-font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bs-font-monospace:'JetBrains Mono',ui-monospace,monospace;
  --bs-border-radius-sm:6px;
  --bs-border-radius:10px;
  --bs-border-radius-lg:16px;
  --bs-border-radius-xl:16px;
  --bs-border-radius-xxl:16px;
  --bs-border-radius-pill:10px;
  --hy-nav-h:65px;
  --hy-lesson-nav-h:58px;
}

html{
  scroll-padding-top:calc(var(--hy-nav-h) + 16px);
  scrollbar-color:var(--bs-primary) var(--bs-body-bg);
  scrollbar-width:auto;
}
::-webkit-scrollbar{width:20px;height:20px}
::-webkit-scrollbar-track{background:var(--bs-body-bg)}
::-webkit-scrollbar-thumb{
  background:var(--bs-primary);
  border:2px solid var(--bs-body-bg);
  border-radius:10px;
}
::-webkit-scrollbar-thumb:hover{background:var(--hy-accent-hover)}
body{-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
h1,h2,h3,.display-4,.display-6{letter-spacing:-.035em;text-wrap:balance}

.btn-primary{
  --bs-btn-bg:var(--bs-primary);
  --bs-btn-border-color:var(--bs-primary);
  --bs-btn-color:var(--hy-accent-on);
  --bs-btn-hover-bg:var(--hy-accent-hover);
  --bs-btn-hover-border-color:var(--hy-accent-hover);
  --bs-btn-hover-color:var(--hy-accent-on);
  --bs-btn-active-bg:var(--hy-accent-hover);
  --bs-btn-active-border-color:var(--hy-accent-hover);
  --bs-btn-active-color:var(--hy-accent-on);
  --bs-btn-disabled-bg:var(--bs-primary);
  --bs-btn-disabled-border-color:var(--bs-primary);
  --bs-btn-disabled-color:var(--hy-accent-on);
  --bs-btn-font-weight:600;
}
.btn-outline-primary{
  --bs-btn-color:var(--bs-primary-text-emphasis);
  --bs-btn-border-color:var(--bs-primary-border-subtle);
  --bs-btn-hover-bg:var(--bs-primary);
  --bs-btn-hover-border-color:var(--bs-primary);
  --bs-btn-hover-color:var(--hy-accent-on);
  --bs-btn-active-bg:var(--hy-accent-hover);
  --bs-btn-active-border-color:var(--hy-accent-hover);
  --bs-btn-active-color:var(--hy-accent-on);
  --bs-btn-disabled-color:var(--bs-primary-text-emphasis);
  --bs-btn-disabled-border-color:var(--bs-primary-border-subtle);
}
.btn-outline-secondary{
  --bs-btn-color:var(--bs-body-color);
  --bs-btn-border-color:var(--bs-border-color);
  --bs-btn-hover-bg:var(--bs-secondary-bg);
  --bs-btn-hover-border-color:var(--bs-border-color);
  --bs-btn-hover-color:var(--bs-body-color);
  --bs-btn-active-bg:var(--bs-secondary-bg);
  --bs-btn-active-border-color:var(--bs-border-color);
  --bs-btn-active-color:var(--bs-body-color);
  --bs-btn-disabled-color:var(--bs-body-color);
  --bs-btn-disabled-border-color:var(--bs-border-color);
}

/* Aktif liste öğesi (ör. oynayan ders) vurgu rengini izler; Bootstrap'te sabit mavi. */
.list-group{
  --bs-list-group-active-bg:var(--bs-primary);
  --bs-list-group-active-border-color:var(--bs-primary);
  --bs-list-group-active-color:var(--hy-accent-on);
}

.navbar.sticky-top{z-index:1030}
.navbar-blur{backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px)}
/* Cam (glassy) yüzey: yorum kartları ve "Tüm yorumlar" penceresi. Arkasındaki parıltı ([data-reviews]::before) bulanıklaşarak görünür. */
:root{--hy-glass-bg:linear-gradient(140deg,rgba(255,255,255,.78),rgba(255,255,255,.52));--hy-glass-border:rgba(255,255,255,.7);--hy-glass-edge:rgba(15,23,42,.08);--hy-glass-shadow:0 10px 30px -12px rgba(15,23,42,.18);--hy-glass-hover:rgba(15,23,42,.04)}
[data-bs-theme=dark]{--hy-glass-bg:linear-gradient(140deg,rgba(255,255,255,.08),rgba(255,255,255,.025));--hy-glass-border:rgba(255,255,255,.14);--hy-glass-edge:rgba(255,255,255,.06);--hy-glass-shadow:0 14px 40px -16px rgba(0,0,0,.6);--hy-glass-hover:rgba(255,255,255,.05)}
.hy-glass,.hy-site-dialog{background:var(--hy-spot,linear-gradient(transparent,transparent)),var(--hy-glass-bg);border:1px solid var(--hy-glass-edge);box-shadow:inset 0 1px 0 var(--hy-glass-border),var(--hy-glass-shadow);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}
/* Pencere: arkası net kalır (::backdrop yalnız hafif karartır), camın bulanıklığı ve vurgu parıltısı pencerenin içinde görünür. */
.hy-site-dialog{--hy-glass-bg:radial-gradient(60% 45% at 0% 0%,rgba(var(--bs-primary-rgb),.22),transparent 70%),radial-gradient(50% 40% at 100% 100%,rgba(var(--bs-primary-rgb),.14),transparent 70%),linear-gradient(140deg,rgba(var(--bs-body-bg-rgb),.62),rgba(var(--bs-body-bg-rgb),.4));border-color:var(--hy-glass-border);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%)}
.hy-glass .card-footer{border-top-color:var(--hy-glass-edge)}
.hy-site-dialog .border-bottom{border-bottom-color:var(--hy-glass-edge)!important}
[data-reviews]{position:relative;isolation:isolate}
/* İmleç spotlight'ı: kartlar ve site penceresi imlecin altında vurgu renginde hafifçe aydınlanır (site.js --hy-mx/--hy-my yazar).
   Pseudo-element yerine arka plan katmanı: içeriğin üstüne binmez, overflow gerekmez; --hy-spot-a kayıtlı olduğu için girip çıkarken yumuşak geçer. */
@property --hy-spot-a{syntax:"<number>";inherits:false;initial-value:0}
:root{--hy-spot-max:.06;--hy-spot-size:320px}
[data-bs-theme=dark]{--hy-spot-max:.1}
[data-spotlight] :is(.card,.hy-site-dialog){--hy-spot:radial-gradient(var(--hy-spot-size) circle at var(--hy-mx,50%) var(--hy-my,50%),rgba(var(--bs-primary-rgb),calc(var(--hy-spot-a) * var(--hy-spot-max))),transparent 70%);background-image:var(--hy-spot);transition:--hy-spot-a .35s ease-out}
[data-spotlight] :is(.card,.hy-site-dialog).is-lit{--hy-spot-a:1}
[data-spotlight] :is(.hy-glass,.hy-site-dialog){background-image:var(--hy-spot),var(--hy-glass-bg)}
[data-spotlight] .card.hover-lift{transition:transform .25s,border-color .25s,--hy-spot-a .35s ease-out}
/* Sayfa spotlight'ı: imleci izleyen geniş, yumuşak parıltı. Opak bölümlerin altında kalmasın diye içeriğin üstünde, düz ve çok hafif saydamlıkla.
   mix-blend-mode kullanılmaz: cam (backdrop-filter) kartlarla üst üste binince Chrome karenin kenarında keskin bir şerit çiziyordu. Konum transform ile (site.js). */
.hy-cursor-glow{position:fixed;top:0;left:0;z-index:1000;width:720px;height:720px;margin:-360px 0 0 -360px;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--bs-primary-rgb),.16),rgba(var(--bs-primary-rgb),.05) 45%,transparent);opacity:0;transition:opacity .4s ease-out;will-change:transform}
[data-bs-theme=dark] .hy-cursor-glow{background:radial-gradient(closest-side,rgba(var(--bs-primary-rgb),.18),rgba(var(--bs-primary-rgb),.07) 45%,transparent)}
.hy-cursor-glow.is-on{opacity:1}
[data-reviews]::before{content:"";position:absolute;inset:10% 0 0;z-index:-1;pointer-events:none;background:radial-gradient(40% 55% at 18% 60%,rgba(var(--bs-primary-rgb),.22),transparent 70%),radial-gradient(35% 50% at 82% 40%,rgba(var(--bs-primary-rgb),.14),transparent 70%)}
[data-theme-root]>.dropdown-menu{top:100%;right:0;left:auto}
/* Mobil üst menü: logo, ad ve düğmeler tek satırda kalır (logonun sağ boşluğu 375 px'te satırı kırıyordu); çok dar ekranda ad gizlenir. */
.hy-nav>.navbar-brand{margin-right:0}
@media (max-width:359.98px){.hy-brand-name{display:none}}
/* Mobilde sepet rozeti düğmenin köşesinde: düğme genişlemez, menü tek satırda kalır. */
@media (max-width:991.98px){
  .hy-cart-btn{position:relative}
  .hy-cart-btn>.badge{position:absolute;top:-.45rem;right:-.45rem;font-size:.65rem;padding:.25em .45em}
}

@media (min-width:992px){
  .navbar>.container.hy-nav{
    display:grid;
    /* Yan sütunlar içeriklerinden dar olamaz; dar ekranda orta menü ortadan biraz kayar ama üst üste binmez. */
    grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);
    column-gap:1rem;
    align-items:center;
  }
  .hy-nav>.navbar-brand{grid-column:1;justify-self:start;margin-right:0}
  .hy-nav>.hy-nav-center{grid-column:2;justify-self:center;flex-grow:0}
  .hy-nav>.hy-nav-tools{grid-column:3;justify-self:end}
  .navbar .nav-link{position:relative}
  .navbar .nav-link::after{
    content:"";
    position:absolute;
    left:var(--bs-navbar-nav-link-padding-x);
    right:var(--bs-navbar-nav-link-padding-x);
    bottom:calc(-1 * var(--bs-navbar-padding-y) - 1px);
    height:2px;
    background:var(--bs-primary);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .3s cubic-bezier(.22,.8,.24,1);
  }
  .navbar .nav-link.active::after{transform:scaleX(1)}
  .top-lg-nav{top:calc(var(--hy-nav-h) + 24px)}
}
/* Ayarlar sol menüsü: bulunulan bölüm sol vurgu çizgisi ve hafif zeminle işaretlenir (site.js). */
.hy-settings-nav .list-group-item.active{background:var(--bs-primary-bg-subtle);color:var(--bs-primary-text-emphasis);border-color:var(--bs-list-group-border-color);box-shadow:inset 3px 0 0 var(--bs-primary);font-weight:500}
.hy-settings-nav .list-group-item.active i{color:inherit!important}

.hover-lift{transition:transform .25s,border-color .25s}
.hover-lift:hover{transform:translateY(-2px);border-color:var(--bs-primary-border-subtle)!important}
.link-hover:hover{color:var(--bs-body-color)!important}
.min-w-0{min-width:0}

.hy-hero-thumb{display:block;position:relative;padding:0;height:auto;overflow:hidden}
.hy-hero-thumb-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.hy-hero-thumb-label{display:none}
.hy-hero-meter{position:absolute;left:0;right:0;bottom:0;height:3px;background:color-mix(in srgb, var(--bs-body-color) 18%, transparent);opacity:0;pointer-events:none}
.hy-hero-meter > span{display:block;height:100%;width:0;background:var(--bs-primary)}
.hy-hero-progress{height:4px;border-radius:999px;background:color-mix(in srgb, var(--bs-body-color) 18%, transparent);overflow:hidden}
.hy-hero-progress > span{display:block;height:100%;width:0;background:var(--bs-primary)}
[data-hero-thumb][aria-current] .hy-hero-meter{opacity:1}
@media (min-width:768px){
  .hy-hero-thumb{display:flex;align-items:center;gap:.5rem;height:100%;padding:.25rem;text-align:left}
  .hy-hero-thumb-img{width:56px;height:32px;aspect-ratio:auto;flex:0 0 auto;border-radius:var(--bs-border-radius-sm)}
  .hy-hero-thumb-label{display:block;min-width:0}
}

[data-review-slide]{width:100%;flex:0 0 auto}
@media (min-width:768px){
  [data-review-slide]{width:33.333333%}
}

/* İlk bölüm (ekranın üstü) animasyonsuz görünür; aşağıdaki bölümler kaydırınca belirir. */
.js main > section:not(:first-of-type){
  opacity:0;
  transform:translateY(36px);
  transition:opacity .7s ease, transform .7s ease;
}
.js main > section.is-visible{
  opacity:1;
  transform:none;
}
.js main > section .placeholder-glow .placeholder{animation:none}
.js main > section.is-visible .placeholder-glow .placeholder{
  animation:placeholder-glow 2s ease-in-out infinite;
}

/* Kurs sayfası bölüm menüsü: üst çubuğun altına yapışır, aktif bölüm vurgu rengiyle altı çizili. */
.top-nav{top:var(--hy-nav-h)}
.nav-underline{
  --bs-nav-underline-border-width:2px;
  --bs-nav-link-color:var(--bs-secondary-color);
  --bs-nav-link-hover-color:var(--bs-body-color);
}
.nav-underline .nav-link.active{color:var(--bs-body-color);border-bottom-color:var(--bs-primary)}
/* Bölüm çubuğu: vurgu renginin açık tonu, sayfadan ayrışır; aktif bölüm vurgu renginde ve kalın çizgili. */
.hy-section-bar{
  --hy-section-bar-bg:color-mix(in srgb, var(--bs-primary) 9%, var(--bs-body-bg));
  background:var(--hy-section-bar-bg);
  border-bottom:1px solid color-mix(in srgb, var(--bs-primary) 30%, var(--bs-border-color));
}
.hy-section-bar .nav-underline{--bs-nav-underline-border-width:3px;--bs-nav-link-color:var(--bs-body-color)}
.hy-section-bar .nav-link{opacity:.8}
.hy-section-bar .nav-link:hover,.hy-section-bar .nav-link.active{opacity:1}
.hy-section-bar .nav-link.active{color:var(--bs-primary-text-emphasis);font-weight:600}
/* Menü taşıyorsa kenarda solma ve ok: kaydırılabildiğini gösterir. */
.hy-section-more{
  position:absolute;top:0;bottom:0;width:3rem;display:none;align-items:center;border:0;padding:0 .5rem;
  color:var(--bs-primary-text-emphasis);
}
.hy-section-more-end{right:0;justify-content:flex-end;background:linear-gradient(to right, transparent, var(--hy-section-bar-bg) 55%)}
.hy-section-more-start{left:0;justify-content:flex-start;background:linear-gradient(to left, transparent, var(--hy-section-bar-bg) 55%)}
.hy-section-bar.has-more-end .hy-section-more-end,.hy-section-bar.has-more-start .hy-section-more-start{display:flex}
.scrollbar-none{scrollbar-width:none}
.scrollbar-none::-webkit-scrollbar{display:none}
[data-section-nav] ~ *{scroll-margin-top:calc(var(--hy-nav-h) + 57px)}

.text-pre-line{white-space:pre-line}
/* Baş harf rozeti ve ikon kutusu ölçüleri */
.hy-avatar{width:32px;height:32px}
.hy-avatar-sm{width:24px;height:24px}
.hy-initials{width:28px;height:24px;letter-spacing:-.02em}
.hy-icon-tile{width:56px;height:56px}
/* Kurs başlığındaki Kategori / Teknolojiler satırları: etiketler alt alta hizalı başlar. */
.hy-meta-label{min-width:5.5rem}

.hy-fold > summary{list-style:none;cursor:pointer}
.hy-fold > summary::-webkit-details-marker{display:none}
.hy-fold-icon{transition:transform .2s}
/* Ders satırı: ikon ve süre sabit genişlikte; başlıklar alt alta hizalı kalır. */
.hy-lesson-meta{min-width:4.25rem;font-variant-numeric:tabular-nums}
.hy-fold[open] > summary .hy-fold-icon{transform:rotate(180deg)}
/* Ders listesi: içinde bulunulan bölüm sol kenarda tema rengiyle işaretlenir. */
.hy-lesson-fold[open] > summary{border-bottom:1px solid var(--bs-border-color)}
.hy-lesson-fold[data-current-section]{border-left:3px solid var(--bs-primary)}
/* Tamamlanan bölüm başlığı yeşil tonla ayrışır. */
.hy-section-done{background:var(--bs-success-bg-subtle)}

/* Önizleme şeridi: mobilde kaydırınca kartlar ortaya oturur; açılışta aktif kart ortalanır (site.js). */
@media (max-width:575.98px){
  .hy-strip{scroll-snap-type:x mandatory}
  .hy-strip > *{scroll-snap-align:center}
}

/* Ders gezinme düğmeleri: mobilde Önceki/Sonraki yan yana ve eşit, "Tamamlandı" altta tam genişlik. */
@media (max-width:575.98px){
  .hy-lesson-nav > .btn{flex:1 1 0;min-width:0}
  .hy-lesson-nav > .hy-lesson-nav-full{flex-basis:100%}
}

/* Ders listesi: geniş ekranda ekran yüksekliğinde sabit, dersler kendi içinde kayar; sol içerikten uzun olmaz. */
@media (min-width:992px){
  .hy-sidebar{position:sticky;top:var(--hy-lesson-nav-h);height:calc(100vh - var(--hy-lesson-nav-h))}
}

/* Tanıtım videosu: görsel üstünde oynat düğmesi; tıklanınca Video.js oynatıcısı (vurgu rengi ve yazı tipi temadan). */
.hy-preview{cursor:pointer}
.hy-preview-play{width:4.5rem;height:4.5rem;box-shadow:0 .5rem 2rem rgba(0,0,0,.45);transition:transform .2s}
.hy-preview:hover .hy-preview-play,.hy-preview:focus-visible .hy-preview-play{transform:translate(-50%,-50%) scale(1.08)}
.hy-preview[aria-busy="true"] .hy-preview-play{opacity:.7}
.hy-video{background:#000}
.hy-next-preview{z-index:5;background:rgba(0,0,0,.78)}
.hy-unmute{position:absolute;top:.75rem;left:.75rem;z-index:4}
.hy-consent{z-index:1090}
/* Tanıtım videosu penceresi: ekranın %95'i; video oranı korunarak sığabildiği en büyük boyutta ortalanır. */
.hy-video-dialog{width:95vw;height:95vh;max-width:none;max-height:none;padding:0;border:0;border-radius:var(--bs-border-radius-lg);background:#000;color:#fff;overflow:hidden}
.hy-video-dialog[open]{display:flex;align-items:center;justify-content:center}
.hy-video-dialog-actions{padding:1rem}
.hy-video-dialog::backdrop{background:rgba(0,0,0,.85)}
/* Altta bağlantı satırı için yer bırakılır (~5rem); video yine 16:9 ve sığabildiği en büyük boyutta. */
.hy-video-dialog-body{width:min(100%,calc((95vh - 5rem) * 16 / 9))}
.hy-video-dialog-close{position:absolute;top:.75rem;right:.75rem;z-index:10;width:2.5rem;height:2.5rem;display:inline-flex;align-items:center;justify-content:center}
.hy-dialog-open{overflow:hidden}
.hy-video-skin{
  display:block;width:100%;aspect-ratio:16/9;
  --media-accent-color:var(--bs-primary);
  --media-accent-text-color:var(--hy-accent-on);
  --media-font-family:var(--bs-body-font-family);
  --media-border-radius:0;
  --media-border-color:transparent;
}
/* Kaplama yalnız yerel <video>'yu yayar; Vimeo öğesi kendi inline-block boyutunda kalmasın, tam ekranda da alanı doldursun. */
.hy-video-skin vimeo-video{display:block;width:100%;height:100%;min-width:0;min-height:0}
.hy-video-skin:fullscreen,.hy-video:fullscreen .hy-video-skin{aspect-ratio:auto;width:100%;height:100%}

/* Stüdyo (yönetim paneli): yükleme ilerleme çubukları ince. */
.studio-progress{height:.375rem}
/* İçerik düzenleyici: sürükleme tutamakları, bırakma alanları, boş kategori ipucu. */
.studio-handle{cursor:grab;touch-action:none;padding:.125rem}
.studio-bulk-bar{position:sticky;top:4rem;z-index:1020}
.border-dashed{border-style:dashed!important}
.studio-extra-bulk>summary{cursor:pointer}
.studio-extra-bulk-list{max-height:16rem;overflow-y:auto}
.studio-extra-drop.is-dragover{border-color:var(--bs-primary)!important;background:var(--bs-primary-bg-subtle)}
.studio-dialog{width:min(56rem,95vw);height:min(44rem,90vh);padding:0;border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius-lg);background:var(--bs-body-bg);color:var(--bs-body-color)}
.studio-dialog::backdrop{background:rgba(0,0,0,.6)}
/* Kurs sayfası mobil satın alma çubuğu; görünürken sayfanın sonu çubuğun altında kalmaz. */
.hy-buy-bar{z-index:1025;padding-bottom:calc(.5rem + env(safe-area-inset-bottom))!important}
@media (max-width:991.98px){body.has-buy-bar{padding-bottom:4.5rem}}
/* Stüdyo menüsü: bağlantılar sade, geçerli bölüm vurgu renginde. */
.studio-nav-link{color:var(--bs-secondary-color);text-decoration:none;font-size:inherit}
.studio-nav-link:hover,.studio-nav-link.active{color:var(--bs-emphasis-color)}
.studio-nav-link.active{font-weight:500}
/* İstatistik: izleme oranı dağılımı çubukları. */
.studio-bar{height:.5rem;background:var(--bs-secondary-bg);border-radius:var(--bs-border-radius-pill);overflow:hidden}
.studio-bar>span{display:block;height:100%;background:var(--bs-primary)}
.studio-sortable-row.sortable-ghost{opacity:.4}
.studio-md-input{min-height:22rem;resize:vertical}
/* Ders ek bilgileri (Markdown'dan): videonun altında ve stüdyo önizlemesinde aynı görünür. */
.hy-prose{line-height:1.7;overflow-wrap:anywhere}
.hy-prose>:first-child{margin-top:0}
.hy-prose>:last-child{margin-bottom:0}
.hy-prose h1,.hy-prose h2,.hy-prose h3,.hy-prose h4{font-size:1.125rem;font-weight:600;margin:1.75rem 0 .75rem}
.hy-prose h3,.hy-prose h4{font-size:1rem}
.hy-prose p,.hy-prose ul,.hy-prose ol,.hy-prose blockquote,.hy-prose pre,.hy-prose table{margin-bottom:1rem}
.hy-prose li+li{margin-top:.375rem}
.hy-prose hr{margin:1.5rem 0}
.hy-prose code{font-size:.875em;background:var(--bs-tertiary-bg);padding:.1em .35em;border-radius:.25rem;color:var(--bs-emphasis-color)}
.hy-prose pre{background:var(--bs-tertiary-bg);padding:1rem;border-radius:var(--bs-border-radius)}
.hy-prose pre code{background:none;padding:0}
.hy-prose blockquote{border-left:3px solid var(--bs-border-color);padding-left:1rem;color:var(--bs-secondary-color)}
.hy-prose img{max-width:100%;height:auto}
.hy-prose table{width:100%;border-collapse:collapse}
.hy-prose th,.hy-prose td{border:1px solid var(--bs-border-color);padding:.375rem .5rem}
.studio-dropzone{border-style:dashed!important;transition:background-color .15s,border-color .15s}
.studio-dropzone.is-dragover{background:var(--bs-primary-bg-subtle);border-color:var(--bs-primary)!important}
.studio-section.is-dragover{outline:2px dashed var(--bs-primary);outline-offset:2px}
.studio-lesson.is-dragover{background:var(--bs-primary-bg-subtle)}
.studio-lesson:hover{z-index:3}
.studio-file-tip{position:relative}
.studio-file-tip::after{content:attr(data-file-name);position:absolute;left:0;top:calc(100% + .25rem);z-index:1080;max-width:min(36rem,80vw);padding:.25rem .5rem;border-radius:var(--bs-border-radius-sm);background:var(--bs-emphasis-color);color:var(--bs-body-bg);font-size:.75rem;font-weight:400;white-space:normal;overflow-wrap:anywhere;width:max-content;pointer-events:none;opacity:0;visibility:hidden}
.studio-lesson:hover .studio-file-tip::after{opacity:1;visibility:visible}
.studio-lessons{min-height:2.75rem}
.studio-empty-hint{display:none}
.studio-lessons:not(:has([data-lesson-id])) + .studio-empty-hint{display:block}
.sortable-ghost{opacity:.4}

/* Bildirimler (SweetAlert2 toast): tema renklerini ve vurgu rengini izler, yapışkan üst çubuğun altında açılır. */
.hy-toast-container.swal2-top-end{padding-top:var(--hy-toast-top, calc(var(--hy-nav-h) + .5rem))}
.hy-toast{
  --swal2-background:var(--bs-body-bg);
  --swal2-color:var(--bs-body-color);
  --swal2-toast-border:1px solid var(--bs-border-color);
  --swal2-border-radius:var(--bs-border-radius);
  --swal2-close-button-color:var(--bs-secondary-color);
  --swal2-timer-progress-bar-background:var(--bs-primary);
  font-family:var(--bs-body-font-family);
}
.hy-toast .swal2-title{font-size:.875rem;font-weight:500}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important}
  .js main > section{opacity:1;transform:none}
  .js main > section.is-visible .placeholder-glow .placeholder{animation:none}
}

/* Puan verme: 5 yıldız sağdan sola dizilir; üzerine gelinen ve seçilen yıldızla solundakiler dolar. */
.hy-star-input{display:inline-flex;flex-direction:row-reverse;gap:.125rem}
.hy-star-input label{color:var(--bs-tertiary-color);text-decoration:none}
.hy-star-input .btn-check:checked~label,.hy-star-input label:hover,.hy-star-input label:hover~label{color:var(--bs-warning)}
.hy-star-input .btn-check:focus-visible+label{outline:2px solid var(--bs-primary);outline-offset:2px;border-radius:.25rem}
.hy-stars{font-size:.875rem;letter-spacing:.05em}
.hy-site-dialog{width:min(48rem,95vw);max-height:90vh;padding:0;border-radius:var(--bs-border-radius-lg);color:var(--bs-body-color)}
.hy-site-dialog[open]{display:flex;flex-direction:column}
.hy-site-dialog>div{display:flex;flex-direction:column;min-height:0}
.hy-site-dialog::backdrop{background:rgba(0,0,0,.3)}
.hy-site-dialog-scroll{max-height:calc(90vh - 6rem);min-height:0}
.hy-review-link{margin-inline:calc(-1 * var(--bs-gutter-x, 1rem));padding-inline:var(--bs-gutter-x, 1rem);border-radius:var(--bs-border-radius)}
.hy-review-link:hover{background:var(--hy-glass-hover)}
.hy-review-open{cursor:pointer}
.hy-review-open:focus-visible{outline:2px solid var(--bs-primary);outline-offset:2px}
.hy-review-picked{background:rgba(var(--bs-primary-rgb),.14)!important;transition:background .6s ease-out}
.hy-review-link:hover .badge{color:var(--bs-primary-text-emphasis)!important;border-color:var(--bs-primary-border-subtle)!important}