/* =====================================================================
   CLICKSAMBO VIDEO SECTION (Single + Playlist), from the "ClickSambo Video Sections" design.
   Markup: Pages/Shared/_VideoSection.cshtml (data: Data/ViewModel/SiteVideos.cs).
   Playback: the "YouTube Videos - Lazy Load and Playlist Player" block in assets/js/main.js.
   Every rule is scoped to .youtubeVideosSect.csv, so the older .youtubeVideosSect rules in layout.css
   ("Our Videos and Music") are left as they are.
   ===================================================================== */
.youtubeVideosSect.csv{--csv-navy:#1C2841;--csv-orange:#F94C10;--csv-orange-d:#D93D08;--csv-cream:#FFF1E9;--csv-cream-2:#FDF6F1;--csv-white:#fff;--csv-line:#F0E2D8;--csv-muted:#51607A;--csv-muted-2:#7C8AA3;--csv-screen:#0E1626;--csv-font:"Nunito",-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--csv-cream);color:var(--csv-navy);font-family:var(--csv-font);font-size:16px;line-height:1.7;padding-block:clamp(40px,4vw,52px);margin:0;container-type:inline-size;container-name:csv}
.youtubeVideosSect.csv *{box-sizing:border-box}
/* Vertical padding: 52px on desktop down to 40px on phones (design: 82px everywhere). */
/* Homepage: site container width (same as layout.css .container: 1366px, 95% on narrower screens). */
.youtubeVideosSect.csv .container{width:1366px;max-width:95%;margin:0 auto;padding-left:0;padding-right:0}
/* Product/vertical pages: same wrap as their other sections (max 1120px, 24px side padding). */
.youtubeVideosSect.csv.csv--page .container{width:auto;max-width:1120px;padding-left:24px;padding-right:24px}
/* Heading centred in every variant, like the other section titles, and the description runs the full container width
   (the design had the playlist variant left-aligned and the head capped at 62ch). */
.youtubeVideosSect.csv .sectionHead{max-width:none;margin:0 auto 36px;text-align:center;display:flex;flex-direction:column;align-items:center}
.youtubeVideosSect.csv .sectionHead h2{margin:0;font-weight:800;letter-spacing:-.015em;font-size:clamp(26px,3vw,36px);line-height:1.2;color:var(--csv-navy);text-wrap:balance}
.youtubeVideosSect.csv .sectionHead p{margin:10px 0 0;max-width:none;color:var(--csv-muted);font-size:16px}
.youtubeVideosSect.csv--single .sectionHead{margin:0 auto 32px;text-align:center;display:flex;flex-direction:column;align-items:center}
.youtubeVideosSect.csv--single .sectionHead p{margin-top:12px}
/* CTA buttons: 46px, the height of the header buttons (design: 14px padding, ~57px). */
.youtubeVideosSect.csv .csvCta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.youtubeVideosSect.csv .csvBtn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--csv-orange);color:#fff;text-decoration:none;font-weight:700;height:46px;padding:0 22px;line-height:1;border-radius:10px;font-size:16px;border:1.6px solid var(--csv-orange);transition:background .15s,transform .15s}
.youtubeVideosSect.csv .csvBtn:hover{background:var(--csv-orange-d);border-color:var(--csv-orange-d);transform:translateY(-1px)}
.youtubeVideosSect.csv .csvBtn.ghost{background:transparent;border-color:var(--csv-navy);color:var(--csv-navy)}
.youtubeVideosSect.csv .csvBtn.ghost:hover{background:var(--csv-navy);color:#fff}

/* yerleşim */
.youtubeVideosSect.csv--single .youtubeVideosContainer{display:block;max-width:960px;margin:0 auto;padding:0}
.youtubeVideosSect.csv--single .youtubeMainPlayer{display:block;margin:0;padding:0}
.youtubeVideosSect.csv--single .youtubeMainPlayerInfo{margin-top:20px}
.youtubeVideosSect.csv--playlist .youtubeVideosContainer{display:grid;grid-template-columns:minmax(0,1fr) 330px;grid-template-areas:"v l" "i .";gap:20px;align-items:start;max-width:none;margin:0;padding:0}
.youtubeVideosSect.csv--playlist .youtubeMainPlayer{display:contents}
.youtubeVideosSect.csv--playlist .youtubeVideoItem{grid-area:v;min-width:0}
.youtubeVideosSect.csv--playlist .youtubeMainPlayerInfo{grid-area:i;min-width:0}
.youtubeVideosSect.csv--playlist .youtubePlaylist{grid-area:l;align-self:stretch;height:0;min-height:100%}
/* az videolu listeler (≤4): kutu içerik kadar uzar, altta boşluk kalmaz */
.youtubeVideosSect.csv--short .youtubePlaylist{align-self:start;height:auto;min-height:0}
/* yerleşim, ekran genişliğine değil bölümün kendi genişliğine göre değişir */
@container csv (max-width:820px){
  .youtubeVideosSect.csv--playlist .youtubeVideosContainer{grid-template-columns:1fr;grid-template-areas:"v" "i" "l"}
  .youtubeVideosSect.csv--playlist .youtubePlaylist{height:auto;min-height:0}
  .youtubeVideosSect.csv--playlist .youtubePlaylist{max-height:420px}
}

/* oynatıcı */
.youtubeVideosSect.csv .youtubeVideoItem{position:relative;display:block;margin:0;padding:0;border-radius:16px;overflow:hidden;background:var(--csv-screen);box-shadow:0 24px 56px rgba(28,40,65,.22);cursor:pointer}
.youtubeVideosSect.csv .youtubeVideoThumb{position:relative;width:100%;max-width:100%;aspect-ratio:16/9;height:auto;padding:0;margin:0;overflow:hidden;background:radial-gradient(520px 300px at 85% 0%,rgba(249,76,16,.22),transparent 60%),radial-gradient(420px 260px at 0% 100%,rgba(34,181,115,.14),transparent 60%),var(--csv-screen)}
.youtubeVideosSect.csv .youtubeVideoThumb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0;border-radius:0}
/* The design's fake control bar (play / track / time / fullscreen) is removed; the gradient only darkens the top for the caption. */
.youtubeVideosSect.csv .youtubeVideoThumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(5,9,15,.7),rgba(5,9,15,0) 32%);pointer-events:none}
.youtubeVideosSect.csv .youtubeVideoThumb.playing::after{display:none}
.youtubeVideosSect.csv .csvCap{position:absolute;left:0;right:0;top:0;z-index:2;padding:18px 22px;pointer-events:none}
.youtubeVideosSect.csv .csvKicker{display:block;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#ff7a45}
.youtubeVideosSect.csv .csvName{display:block;font-weight:800;font-size:clamp(16px,2.1vw,22px);line-height:1.25;color:#fff;margin-top:4px;text-wrap:balance}
.youtubeVideosSect.csv .youtubePlayBtn{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;background:var(--csv-orange);display:grid;place-items:center;box-shadow:0 14px 34px rgba(249,76,16,.45);transition:transform .2s ease,background .2s ease;margin:0;opacity:1}
.youtubeVideosSect.csv .youtubePlayBtn svg{width:60px;height:42px;margin-left:3px}
.youtubeVideosSect.csv .youtubePlayBtn svg path:first-child{fill:transparent}
.youtubeVideosSect.csv .youtubePlayBtn svg path:last-child{fill:#fff}
.youtubeVideosSect.csv .youtubePlayBtn::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(249,76,16,.5);animation:csvRing 2.2s ease-out infinite}
.youtubeVideosSect.csv .youtubeVideoItem:hover .youtubePlayBtn{transform:translate(-50%,-50%) scale(1.07);background:var(--csv-orange-d)}
@keyframes csvRing{from{transform:scale(.85);opacity:1}to{transform:scale(1.35);opacity:0}}
.youtubeVideosSect.csv .youtubeIframeWrapper{position:absolute;inset:0}
.youtubeVideosSect.csv .youtubeIframeWrapper iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.youtubeVideosSect.csv .youtubeOpenBtn{position:absolute;right:12px;top:12px;z-index:3;width:38px;height:38px;border-radius:10px;background:rgba(5,9,15,.7);color:#fff;display:grid;place-items:center;text-decoration:none}
.youtubeVideosSect.csv .youtubeOpenBtn:hover{background:var(--csv-orange)}

/* video bilgisi (playlist) */
.youtubeVideosSect.csv .youtubeMainPlayerInfo{margin:0;padding:0;background:none;border:0}
.youtubeVideosSect.csv .youtubeTitleRow{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.youtubeVideosSect.csv .youtubeVideoTitle{margin:0;flex:1 1 280px;min-width:0;font-weight:800;font-size:clamp(18px,1.6vw,20px);line-height:1.3;color:var(--csv-navy);letter-spacing:-.01em}
.youtubeVideosSect.csv .youtubePlayControls{display:flex;gap:8px;flex:none}
.youtubeVideosSect.csv .youtubeControlBtn{display:none;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:10px;border:1.6px solid var(--csv-navy);background:transparent;color:var(--csv-navy);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.youtubeVideosSect.csv .youtubeControlBtn:hover{background:var(--csv-navy);color:#fff}
.youtubeVideosSect.csv .youtubeControlBtn svg{width:16px;height:16px}
.youtubeVideosSect.csv .youtubeVideoDescription{margin:6px 0 0;color:var(--csv-muted);font-size:16px;max-width:64ch}
.youtubeVideosSect.csv .youtubeActionBar{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding:0;border:0}
.youtubeVideosSect.csv .youtubeActionBtn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 13px;border-radius:10px;border:1.6px solid var(--csv-line);background:var(--csv-white);color:var(--csv-navy);font:inherit;font-size:14px;white-space:nowrap;font-weight:700;text-decoration:none;cursor:pointer;transition:border-color .15s,background .15s}
.youtubeVideosSect.csv .youtubeActionBtn:hover{border-color:var(--csv-navy)}
.youtubeVideosSect.csv .youtubeActionBtn svg{width:18px;height:18px;flex:none}
.youtubeVideosSect.csv .youtubeActionBtn.liked{border-color:var(--csv-orange);color:var(--csv-orange-d)}
.youtubeVideosSect.csv .youtubeActionBtnSubscribe{background:var(--csv-navy);border-color:var(--csv-navy);color:#fff}
.youtubeVideosSect.csv .youtubeActionBtnSubscribe:hover{background:#2A3A5C;border-color:#2A3A5C}
@container csv (max-width:560px){.youtubeVideosSect.csv .youtubeActionBtn{height:38px;padding:0 11px;font-size:13.5px}}
.youtubeVideosSect.csv .youtubeActionBtnPrimary{background:var(--csv-orange);border-color:var(--csv-orange);color:#fff}
.youtubeVideosSect.csv .youtubeActionBtnPrimary:hover{background:var(--csv-orange-d);border-color:var(--csv-orange-d)}

/* oynatma listesi */
.youtubeVideosSect.csv .youtubePlaylist{display:flex;flex-direction:column;gap:2px;background:var(--csv-cream-2);border:1px solid var(--csv-line);border-radius:20px;overflow-x:hidden;overflow-y:auto;min-width:0;max-height:none;padding:0 6px 6px;margin:0}
.youtubeVideosSect.csv .csvPlHead{flex:none;position:sticky;top:0;z-index:2;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 10px;margin:0 -6px 4px;padding-inline:16px;background:var(--csv-cream-2);border-bottom:1px solid var(--csv-line)}
.youtubeVideosSect.csv .csvPlHead b{font-weight:800;font-size:16px}
.youtubeVideosSect.csv .csvPlHead small{color:var(--csv-muted-2);font-weight:700;font-size:13px}
.youtubeVideosSect.csv .youtubePlaylistItem{flex:none;display:grid;grid-template-columns:20px 92px 1fr;gap:10px;align-items:center;padding:7px;border-radius:11px;border:1px solid transparent;background:transparent;cursor:pointer;margin:0;transition:background .15s,border-color .15s}
.youtubeVideosSect.csv .youtubePlaylistItem:hover{background:var(--csv-white)}
.youtubeVideosSect.csv .youtubePlaylistItem.active{background:var(--csv-white);border-color:var(--csv-line);box-shadow:0 12px 40px rgba(28,40,65,.06)}
.youtubeVideosSect.csv .youtubePlaylistNumber{font-size:12px;font-weight:800;color:var(--csv-muted-2);text-align:center;font-variant-numeric:tabular-nums}
.youtubeVideosSect.csv .youtubePlaylistItem.active .youtubePlaylistNumber{color:var(--csv-orange)}
.youtubeVideosSect.csv .youtubePlaylistThumb{position:relative;aspect-ratio:16/9;max-width:100%;width:100%;border-radius:7px;overflow:hidden;background:radial-gradient(160px 90px at 85% 0%,rgba(249,76,16,.3),transparent 60%),var(--csv-screen)}
.youtubeVideosSect.csv .youtubePlaylistThumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.youtubeVideosSect.csv .youtubePlaylistOverlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,9,15,.25);opacity:0;transition:opacity .15s}
.youtubeVideosSect.csv .youtubePlaylistOverlay svg{width:26px;height:18px}
.youtubeVideosSect.csv .youtubePlaylistOverlay svg path:first-child{fill:var(--csv-orange)}
.youtubeVideosSect.csv .youtubePlaylistItem:hover .youtubePlaylistOverlay,.youtubeVideosSect.csv .youtubePlaylistItem.active .youtubePlaylistOverlay{opacity:1}
.youtubeVideosSect.csv .csvLen{position:absolute;right:4px;bottom:4px;font-size:11px;font-weight:800;color:#fff;background:rgba(5,9,15,.75);padding:0 5px;border-radius:5px;font-variant-numeric:tabular-nums;line-height:1.5}
.youtubeVideosSect.csv .youtubePlaylistInfo{min-width:0}
.youtubeVideosSect.csv .youtubePlaylistInfo h4{margin:0;font-weight:800;font-size:15px;line-height:1.3;color:var(--csv-navy);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.youtubeVideosSect.csv .youtubePlaylistItem.active .youtubePlaylistInfo h4{color:var(--csv-orange-d)}
.youtubeVideosSect.csv .youtubePlaylistInfo p{display:none}
@container csv (max-width:560px){
  .youtubeVideosSect.csv .youtubePlayBtn{width:62px;height:62px}
  .youtubeVideosSect.csv .youtubePlayBtn svg{width:48px;height:34px}
  .youtubeVideosSect.csv .csvCap{padding:14px 16px}
  .youtubeVideosSect.csv .youtubePlaylistItem{grid-template-columns:18px 84px 1fr}
}
.youtubeVideosSect.csv :focus-visible{outline:2px solid var(--csv-orange);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.youtubeVideosSect.csv *{transition:none!important;animation:none!important}}


/* ---- Site guards (not part of the design file) ----------------------------------------------
   layout.css sets *{font-family:Mulish} and styles the older "Our Videos and Music" section with
   unscoped .youtube* rules (same class names, main.js depends on them). The rules below undo every
   property of those rules that the design CSS above does not set itself, so the section renders as
   in the design on every page. */
.youtubeVideosSect.csv *{font-family:inherit}
.youtubeVideosSect.csv .youtubeMainPlayer{flex:none;max-width:none}
.youtubeVideosSect.csv .youtubeVideoItem{transition:none}
.youtubeVideosSect.csv .youtubeMainPlayer .youtubeVideoItem .youtubeVideoThumb>img{transform:none;transition:none}
.youtubeVideosSect.csv .youtubePlayBtn svg{filter:none}
.youtubeVideosSect.csv .youtubeIframeWrapper iframe{z-index:auto}
.youtubeVideosSect.csv .youtubeOpenBtn{box-shadow:none;transform:none;opacity:1;animation:none;transition:none}
.youtubeVideosSect.csv .youtubeTitleRow{margin:0}
.youtubeVideosSect.csv .youtubeVideoDescription{line-height:inherit}
.youtubeVideosSect.csv .youtubeControlBtn{box-shadow:none;transform:none;transition:none}
.youtubeVideosSect.csv .youtubeControlBtn span,.youtubeVideosSect.csv .youtubeActionBtn span{display:inline}
.youtubeVideosSect.csv .youtubeActionBtn{box-shadow:none;transform:none}
.youtubeVideosSect.csv .youtubeActionBtn.liked svg{fill:none;stroke:currentColor}
.youtubeVideosSect.csv .youtubePlaylist{scrollbar-gutter:auto;overscroll-behavior:auto}
.youtubeVideosSect.csv .youtubePlaylistItem{position:static;overflow:visible;box-shadow:none;transform:none}
.youtubeVideosSect.csv .youtubePlaylistThumb{height:auto}
.youtubeVideosSect.csv .youtubePlaylistOverlay{transform:none;width:auto;height:auto}
.youtubeVideosSect.csv .youtubePlaylistNumber{min-width:0;padding:0}
.youtubeVideosSect.csv .youtubePlaylistInfo{padding:0}

/* Mobile type scale (≤600px), a step smaller than the design and in line with the homepage sections on phones
   (section ledes 14px, titles 22–24px). */
@media (max-width:600px){
  .youtubeVideosSect.csv{padding-block:32px}
  .youtubeVideosSect.csv .sectionHead h2{font-size:22px}
  .youtubeVideosSect.csv .sectionHead p{font-size:14px;line-height:1.6}
  .youtubeVideosSect.csv .csvBtn{font-size:14px;height:40px;padding:0 18px}
  .youtubeVideosSect.csv .csvCta{margin-top:20px}
  .youtubeVideosSect.csv .sectionHead,.youtubeVideosSect.csv--single .sectionHead{margin-bottom:24px}
  .youtubeVideosSect.csv .csvKicker{font-size:11px}
  .youtubeVideosSect.csv .csvName{font-size:14px}
  .youtubeVideosSect.csv .youtubeVideoTitle{font-size:16px}
  .youtubeVideosSect.csv .youtubeVideoDescription{font-size:14px;line-height:1.6}
  .youtubeVideosSect.csv .youtubeActionBtn{font-size:13px}
  .youtubeVideosSect.csv .csvPlHead b{font-size:15px}
  .youtubeVideosSect.csv .csvPlHead small{font-size:12px}
  .youtubeVideosSect.csv .youtubePlaylistInfo h4{font-size:14px}
}

/* Stacked layout (section ≤820px wide): the playlist scrolls inside a 420px box. The design meant this
   (@container rule above) but its later base rule `max-height:none` overrode it, so long lists ran 1000px+. */
@container csv (max-width:820px){
  .youtubeVideosSect.csv.csv--playlist .youtubePlaylist{max-height:420px}
}

/* Single video: 20px between the player and its title, as in the playlist grid. The design's
   `.csv--single .youtubeMainPlayerInfo{margin-top:20px}` was overridden by its later `margin:0` rule. */
.youtubeVideosSect.csv.csv--single .youtubeMainPlayerInfo{margin-top:20px}
/* Single video fills the container like the page's other sections (design: max 960px, centred). */
.youtubeVideosSect.csv.csv--single .youtubeVideosContainer{max-width:none}