@font-face{
  font-family:'Nunito';
  src:url('../assets/fonts/nunito/nunito-vf.woff2') format('woff2');
  font-weight:400 900;
  font-style:normal;
  font-display:swap;
}
*{box-sizing:border-box;}
html,body{margin:0;min-height:0;overflow:visible;background:#05070d;}
body{font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;}
#cizgi-calisma-app{
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  background:linear-gradient(135deg,#2c3e50 0%,#000 100%);
  color:white;
  border-radius:16px;
  overflow:visible;
  position:relative;
  min-height:0;
  width:100%;
}
#cc-wrap{
  width:100%;
  padding:8px 0 24px;
}
#cc-header{
  background:linear-gradient(145deg,#1e293b,#0f172a);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -2px rgba(0,0,0,.15);
  padding:16px 12px;
  border-radius:18px;
  text-align:center;
  width:min(100%,76rem);
  margin:0 auto 18px;
  transition:opacity .3s ease;
}
#cc-title{
  margin:0;
  color:#fff;
  font-size:1.5rem;
  font-weight:900;
  letter-spacing:.5px;
  line-height:2rem;
  text-shadow:0 2px 4px rgba(0,0,0,.55);
}
@media(min-width:768px){
  #cc-title{font-size:2.25rem;line-height:2.5rem;}
}
#cc-desc{
  margin:12px 0 0;
  color:#94a3b8;
  font-size:15px;
  font-weight:700;
}
#cc-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  justify-items:center;
  width:100%;
  max-width:600px;
  margin:16px auto 0;
}
@media(min-width:900px){
  #cc-grid{grid-template-columns:repeat(8,1fr);max-width:800px;}
}
.cc-btn{
  width:100%;
  aspect-ratio:1/1;
  max-width:52px;
  min-width:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-weight:900;
  font-size:19px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 5px rgba(0,0,0,.25);
  transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;
  user-select:none;
  text-shadow:0 1px 2px rgba(0,0,0,.32);
}
.cc-btn:hover{transform:translateY(-2px);filter:brightness(1.12);}
.cc-btn.active{transform:scale(1.10);box-shadow:0 0 16px rgba(255,255,255,.55);border-color:rgba(255,255,255,.85);z-index:10;}
.clr-1{background:linear-gradient(135deg,#ef4444,#b91c1c);}
.clr-2{background:linear-gradient(135deg,#f97316,#c2410c);}
.clr-3{background:linear-gradient(135deg,#eab308,#a16207);}
.clr-4{background:linear-gradient(135deg,#22c55e,#15803d);}
.clr-5{background:linear-gradient(135deg,#06b6d4,#0e7490);}
.clr-6{background:linear-gradient(135deg,#3b82f6,#1d4ed8);}
.clr-7{background:linear-gradient(135deg,#6366f1,#4338ca);}
.clr-8{background:linear-gradient(135deg,#a855f7,#7e22ce);}
.act-group{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px;}
.act-btn{
  border-radius:999px;
  padding:9px 18px;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid rgba(255,255,255,.22);
  background:#f8fafc;
  color:#0f172a;
  transition:all .2s;
  white-space:nowrap;
  box-shadow:0 4px 10px rgba(0,0,0,.16);
}
.act-btn:hover{background:#fff;transform:translateY(-1px);}
.play-batch-btn{background:linear-gradient(135deg,#f59e0b,#d97706);color:white;border:none;box-shadow:0 4px 10px rgba(217,119,6,.3);}
.play-batch-btn:hover{background:linear-gradient(135deg,#fbbf24,#b45309);}
.cc-fullscreen-btn{color:#6b21a8;}
#cc-video-container{
  width:min(100%,92rem);
  max-width:92rem;
  margin:0 auto;
  position:relative;
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
}
.video-card{
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 15px rgba(0,0,0,.4);
  position:relative;
}
.video-card iframe{width:100%;height:100%;border:0;display:block;aspect-ratio:16/9;}
.cc-yt-fullscreen-proxy{
  position:absolute;
  right:8px;
  bottom:8px;
  z-index:8;
  width:44px;
  height:44px;
  border:0;
  border-radius:10px;
  background:rgba(15,23,42,.02);
  color:rgba(255,255,255,.02);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  opacity:.18;
  transition:background .18s ease,color .18s ease,opacity .18s ease,transform .18s ease;
}
.video-card:hover .cc-yt-fullscreen-proxy,
.video-card:focus-within .cc-yt-fullscreen-proxy{background:rgba(15,23,42,.72);color:#fff;opacity:.86;}
.cc-yt-fullscreen-proxy:hover{transform:scale(1.04);}
.video-card:fullscreen,.video-card:-webkit-full-screen{width:100vw!important;height:100vh!important;border-radius:0!important;border:0!important;box-shadow:none!important;background:#000!important;}
.video-card:fullscreen iframe,.video-card:-webkit-full-screen iframe{width:100%!important;height:100%!important;aspect-ratio:unset!important;}
.video-card:fullscreen .cc-yt-fullscreen-proxy,.video-card:-webkit-full-screen .cc-yt-fullscreen-proxy{background:rgba(15,23,42,.72);color:#fff;opacity:.65;}
#cc-exit-btn{
  position:fixed;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  z-index:2147483647;
  background:linear-gradient(270deg,#ff0055,#ff00cc,#0099ff,#00ff99);
  background-size:300% 300%;
  animation:gradientShift 4s ease infinite;
  color:white;
  border:2px solid rgba(255,255,255,.9);
  padding:10px 24px;
  border-radius:50px;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
  box-shadow:0 5px 20px rgba(0,0,0,.6);
  display:none;
  align-items:center;
  gap:8px;
  transition:transform .2s ease,box-shadow .2s ease;
  white-space:nowrap;
}
#cc-exit-btn.visible{display:flex;}
#cc-exit-btn:hover{transform:translateX(-50%) scale(1.05);box-shadow:0 0 30px rgba(255,255,255,.4);}
@keyframes gradientShift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
#cizgi-calisma-app.fit-mode{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:9999;
  background:#000;
  padding:0;
  border-radius:0;
  overflow:hidden;
}
#cizgi-calisma-app.fit-mode #cc-wrap{padding:0;height:100%;}
#cizgi-calisma-app.fit-mode #cc-header{display:none;}
#cizgi-calisma-app.fit-mode #cc-video-container{width:100%;height:100%;max-width:none;padding:0;gap:0;}
#cizgi-calisma-app.fit-mode.view-batch #cc-video-container{display:grid;grid-template-columns:1fr 1fr!important;grid-template-rows:50vh 50vh!important;}
#cizgi-calisma-app.fit-mode.view-single #cc-video-container{grid-template-columns:1fr;grid-template-rows:100vh;}
#cizgi-calisma-app.fit-mode .video-card{border-radius:0;border:none;aspect-ratio:unset;height:100%;}
.mobile-hide{display:none;}
@media(min-width:640px){.mobile-hide{display:inline-flex;}}
@media(max-width:575.98px){
  #cc-wrap{padding:8px 0 16px;}
  #cc-header{padding:14px 10px;margin-bottom:12px;border-radius:16px;}
  #cc-title{font-size:1.5rem;line-height:2rem;}
  #cc-grid{gap:8px;margin-top:12px;}
  .cc-btn{max-width:48px;font-size:18px;border-radius:11px;}
  #cc-video-container{gap:8px;}
}

/* V118: Normal tekil video, Harf Animasyonları sayfasındaki gibi ortada ve kenar boşluklu görünür. */
#cizgi-calisma-app:not(.fit-mode) #cc-video-container.cc-single-normal{
  width:min(100%,72rem);
  max-width:72rem;
}


/* V120: Çizgi Çalışmaları üst seçim paneli kompaktlaştırıldı.
   Amaç: video alanı ilk ekranda daha erken görünsün; tam ekran/grup sistemi korunur. */
#cizgi-calisma-app:not(.fit-mode) #cc-header{
  padding:10px 12px;
  margin:0 auto 10px;
  border-radius:16px;
}
#cizgi-calisma-app:not(.fit-mode) #cc-title{
  font-size:1.35rem;
  line-height:1.55rem;
  letter-spacing:.35px;
}
#cizgi-calisma-app:not(.fit-mode) #cc-grid{
  margin:10px auto 0;
  gap:8px;
  max-width:560px;
}
#cizgi-calisma-app:not(.fit-mode) .cc-btn{
  max-width:44px;
  min-width:38px;
  border-radius:10px;
  font-size:17px;
}
#cizgi-calisma-app:not(.fit-mode) #cc-desc{
  margin:7px 0 0;
  font-size:13px;
  line-height:1.25;
}
#cizgi-calisma-app:not(.fit-mode) .act-group{
  margin-top:8px;
  gap:8px;
}
#cizgi-calisma-app:not(.fit-mode) .act-btn{
  padding:7px 14px;
  font-size:13px;
  line-height:1.1;
}

@media(min-width:900px){
  #cizgi-calisma-app:not(.fit-mode) #cc-header{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "cc-title cc-actions"
      "cc-grid cc-grid";
    align-items:center;
    column-gap:18px;
    row-gap:8px;
    padding:10px 16px 12px;
  }
  #cizgi-calisma-app:not(.fit-mode) #cc-title{
    grid-area:cc-title;
    text-align:left;
    font-size:1.7rem;
    line-height:1.95rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #cizgi-calisma-app:not(.fit-mode) #cc-grid{
    grid-area:cc-grid;
    margin:0 auto;
    grid-template-columns:repeat(8,42px);
    max-width:none;
    justify-content:center;
  }
  #cizgi-calisma-app:not(.fit-mode) .cc-btn{
    width:42px;
    height:42px;
    min-width:42px;
    max-width:42px;
    aspect-ratio:auto;
    font-size:17px;
  }
  #cizgi-calisma-app:not(.fit-mode) #cc-desc{
    display:none;
  }
  #cizgi-calisma-app:not(.fit-mode) .act-group{
    grid-area:cc-actions;
    margin:0;
    justify-content:flex-end;
    flex-wrap:nowrap;
  }
}

@media(min-width:1200px){
  #cizgi-calisma-app:not(.fit-mode) #cc-header{
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:"cc-title cc-grid cc-actions";
  }
  #cizgi-calisma-app:not(.fit-mode) #cc-grid{
    margin:0;
  }
}

@media(max-width:575.98px){
  #cizgi-calisma-app:not(.fit-mode) #cc-header{
    padding:10px 9px;
    margin-bottom:9px;
  }
  #cizgi-calisma-app:not(.fit-mode) #cc-title{
    font-size:1.25rem;
    line-height:1.45rem;
  }
  #cizgi-calisma-app:not(.fit-mode) #cc-grid{
    margin-top:9px;
  }
}

/* V121: Başlık panelin üst satırına alındı ve panel içeriği sayfada ortalandı. */
@media(min-width:900px){
  #cizgi-calisma-app:not(.fit-mode) #cc-header{
    display:grid;
    grid-template-columns:auto auto;
    grid-template-areas:
      "cc-title cc-title"
      "cc-grid cc-actions";
    justify-content:center;
    align-items:center;
    column-gap:18px;
    row-gap:8px;
    width:min(100%,80rem);
    padding:10px 16px 12px;
    margin-left:auto;
    margin-right:auto;
  }
  #cizgi-calisma-app:not(.fit-mode) #cc-title{
    grid-area:cc-title;
    text-align:center;
    justify-self:center;
    width:100%;
    max-width:100%;
    font-size:1.72rem;
    line-height:1.95rem;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
  #cizgi-calisma-app:not(.fit-mode) #cc-grid{
    grid-area:cc-grid;
    margin:0;
    grid-template-columns:repeat(8,42px);
    max-width:none;
    justify-content:center;
    justify-self:center;
  }
  #cizgi-calisma-app:not(.fit-mode) .act-group{
    grid-area:cc-actions;
    margin:0;
    justify-content:center;
    justify-self:center;
    flex-wrap:nowrap;
  }
}

@media(min-width:1200px){
  #cizgi-calisma-app:not(.fit-mode) #cc-header{
    grid-template-columns:auto auto;
    grid-template-areas:
      "cc-title cc-title"
      "cc-grid cc-actions";
  }
}


/* V122: 5. aşama gibi 6 videolu setlerde düğme sırası ortalı kalır. */
@media(min-width:900px){
  #cizgi-calisma-app[data-video-count="6"]:not(.fit-mode) #cc-grid{
    grid-template-columns:repeat(6,42px);
  }
}
#cizgi-calisma-app.fit-mode.view-batch-2 #cc-video-container{
  display:grid;
  grid-template-columns:repeat(2,1fr)!important;
  grid-template-rows:100vh!important;
}
#cizgi-calisma-app.fit-mode.view-batch-4 #cc-video-container{
  display:grid;
  grid-template-columns:repeat(2,1fr)!important;
  grid-template-rows:50vh 50vh!important;
}


/* V123: Mobil çizgi özel HTML paneli ve YouTube tam ekran örtü düğmesi. */
@media(max-width:575.98px){
  #cizgi-calisma-app:not(.fit-mode) #cc-header{
    padding:9px 8px!important;
    margin-bottom:8px!important;
  }
  #cizgi-calisma-app:not(.fit-mode) #cc-title{
    font-size:clamp(.92rem,4.45vw,1.06rem)!important;
    line-height:1.28!important;
    letter-spacing:.12px!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    max-width:100%!important;
    padding-top:.06em!important;
  }
  .cc-yt-fullscreen-proxy{
    right:9px!important;
    bottom:9px!important;
    width:42px!important;
    height:42px!important;
    border-radius:50%!important;
    background:rgba(15,23,42,.64)!important;
    color:#fff!important;
    opacity:.96!important;
    box-shadow:0 3px 10px rgba(0,0,0,.34)!important;
    border:1px solid rgba(255,255,255,.12)!important;
  }
  .cc-yt-fullscreen-proxy .ild-yt-fs-svg{
    width:25px!important;
    height:25px!important;
    display:block!important;
  }
}
.cc-yt-fullscreen-proxy .ild-yt-fs-svg{
  width:24px;
  height:24px;
  display:block;
}

/* =========================================================
   V152 - Çizgi Çalışmaları tüm aşamalar: Harf aracındaki gibi
   ebeveyn sayfa aydınlık/karanlık tema uyumu
   ========================================================= */
:root{
  --cc-app-bg:#eaf8ff;
  --cc-panel-bg:linear-gradient(135deg,#f8fcff 0%,#e6f8ff 52%,#d7f1ff 100%);
  --cc-panel-border:rgba(14,165,233,.24);
  --cc-panel-shadow:0 12px 28px rgba(15,23,42,.10);
  --cc-title:#0b2f4a;
  --cc-muted:#315d78;
  --cc-video-shadow:0 10px 24px rgba(15,23,42,.16);
  --cc-video-border:rgba(14,165,233,.12);
}
html[data-bs-theme="dark"],
html.ild-special-dark,
body.ild-special-dark{
  --cc-app-bg:#020611;
  --cc-panel-bg:linear-gradient(145deg,#101b2d 0%,#0a1323 58%,#050914 100%);
  --cc-panel-border:rgba(87,206,255,.20);
  --cc-panel-shadow:0 14px 34px rgba(0,0,0,.34);
  --cc-title:#ffffff;
  --cc-muted:#9fb2c8;
  --cc-video-shadow:0 10px 28px rgba(0,0,0,.38);
  --cc-video-border:rgba(87,206,255,.10);
}
html,body{
  background:var(--cc-app-bg)!important;
  color:var(--cc-title)!important;
}
#cizgi-calisma-app:not(.fit-mode){
  background:var(--cc-app-bg)!important;
  color:var(--cc-title)!important;
  border-radius:0!important;
  box-shadow:none!important;
}
#cizgi-calisma-app:not(.fit-mode) #cc-wrap{
  background:var(--cc-app-bg)!important;
  padding-top:0!important;
}
#cizgi-calisma-app:not(.fit-mode) #cc-header{
  background:var(--cc-panel-bg)!important;
  border:1px solid var(--cc-panel-border)!important;
  box-shadow:var(--cc-panel-shadow)!important;
}
#cizgi-calisma-app:not(.fit-mode) #cc-title{
  color:var(--cc-title)!important;
  text-shadow:0 2px 4px rgba(0,0,0,.16)!important;
}
html[data-bs-theme="dark"] #cizgi-calisma-app:not(.fit-mode) #cc-title,
html.ild-special-dark #cizgi-calisma-app:not(.fit-mode) #cc-title,
body.ild-special-dark #cizgi-calisma-app:not(.fit-mode) #cc-title{
  text-shadow:0 2px 4px rgba(0,0,0,.55)!important;
}
#cizgi-calisma-app:not(.fit-mode) #cc-desc{
  color:var(--cc-muted)!important;
}
#cizgi-calisma-app:not(.fit-mode) .video-card{
  box-shadow:var(--cc-video-shadow)!important;
  border-color:var(--cc-video-border)!important;
}
#cizgi-calisma-app.fit-mode,
#cizgi-calisma-app.fit-mode #cc-wrap{
  background:#000!important;
}
@media(max-width:575.98px){
  #cizgi-calisma-app:not(.fit-mode) #cc-header{
    width:calc(100% - 12px)!important;
  }
}