/* ILD V112: Bu özel HTML tek başına çalışacak şekilde dış Tailwind/Google font bağımlılığı kaldırıldı. */
  @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;}
  .w-full{width:100%;}
  .max-w-5xl{max-width:64rem;}
  .max-w-6xl{max-width:72rem;}
  .mx-auto{margin-left:auto;margin-right:auto;}
  .rounded-2xl{border-radius:1rem;}
  .text-center{text-align:center;}
  .flex{display:flex;}
  .inline-flex{display:inline-flex;}
  .hidden{display:none!important;}
  .flex-col{flex-direction:column;}
  .flex-wrap{flex-wrap:wrap;}
  .items-center{align-items:center;}
  .justify-center{justify-content:center;}
  .gap-2{gap:.5rem;}
  .gap-3{gap:.75rem;}
  .gap-4{gap:1rem;}
  .grid{display:grid;}
  .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}
  .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mt-1{margin-top:.25rem;}
  .mb-0{margin-bottom:0;}
  .text-sm{font-size:.875rem;line-height:1.25rem;}
  .text-2xl{font-size:1.5rem;line-height:2rem;}
  .font-medium{font-weight:500;}
  .font-extrabold{font-weight:800;}
  .tracking-wide{letter-spacing:.025em;}
  .opacity-80{opacity:.8;}
  .transition-all{transition-property:all;}
  .duration-500{transition-duration:.5s;}
  .text-purple-800{color:#6b21a8!important;}
  @media(min-width:640px){.sm\:inline-flex{display:inline-flex!important;}}
  @media(min-width:768px){
    .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
    .md\:gap-3{gap:.75rem;}
    .md\:text-4xl{font-size:2.25rem;line-height:2.5rem;}
    .md\:text-base{font-size:1rem;line-height:1.5rem;}
    .md\:block{display:block!important;}
  }

  html,body{
    margin:0;
    min-height:0;
    overflow:visible;
    background:#05070d;
  }

  body { margin:0; }

  #ha-app{
    font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
    background:linear-gradient(135deg,#2c3e50 0%,#000 100%);
    color:#fff;min-height:0;overflow:visible;
  }
  #ha-wrap{ width:100%; display:flex; flex-direction:column; align-items:center; padding:10px 0 24px; }


  /* V111: iframe içi kaydırma yerine ana sayfa kaydırması kullanılır. */
  #header-panel{ width:min(100%, 76rem) !important; }
  #video-container{ width:min(100%, 92rem) !important; }

  #header-panel{
    background:linear-gradient(145deg,#1e293b,#0f172a) !important;
    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:1rem;margin-bottom:1rem;
  }
  h1{ color:#fff !important; text-shadow:0 2px 4px rgba(0,0,0,.5); }
  p{ color:#94a3b8 !important; }

  .group-main-btn{
    transition:all .2s ease;
    border:1px solid rgba(255,255,255,.2);
    color:#fff !important;
    font-weight:800;
    padding:.55rem 1rem;
    border-radius:.6rem;
    box-shadow:0 2px 5px rgba(0,0,0,.2);
    text-shadow:0 1px 2px rgba(0,0,0,.3);
    cursor:pointer;
  }
  .group-main-btn:hover{ transform:translateY(-3px); filter:brightness(1.12); z-index:10; }
  .group-main-btn.active{ transform:scale(1.06); border-color:#fff; box-shadow:0 0 18px rgba(255,255,255,.55); z-index:20; }

  .letter-btn{
    transition:all .2s ease;
    border:1px solid rgba(255,255,255,.2);
    color:#fff !important;
    font-weight:900;
    display:flex; align-items:center; justify-content:center;
    width:2.2rem; height:2.2rem;
    border-radius:.55rem;
    box-shadow:0 2px 5px rgba(0,0,0,.2);
    cursor:pointer;
  }
  .letter-btn:hover{ transform:translateY(-3px); filter:brightness(1.12); z-index:10; }
  .letter-btn.active{ transform:scale(1.18); border-color:#fff; box-shadow:0 0 14px rgba(255,255,255,.75); z-index:20; }

  .c-grp-0{ background:linear-gradient(135deg,#ef4444,#b91c1c); }
  .c-grp-1{ background:linear-gradient(135deg,#3b82f6,#1d4ed8); }
  .c-grp-2{ background:linear-gradient(135deg,#22c55e,#15803d); }
  .c-grp-3{ background:linear-gradient(135deg,#a855f7,#7e22ce); }
  .c-grp-4{ background:linear-gradient(135deg,#f97316,#c2410c); }

  .action-btn{
    background:#f8fafc !important;
    color:#0f172a !important;
    font-weight:900;
    font-size:.95rem;
    padding:.55rem 1.2rem;
    border-radius:.6rem;
    transition:all .2s;
    border:1px solid #e2e8f0;
    display:inline-flex;
    align-items:center; gap:8px;
    cursor:pointer;
    white-space:nowrap;
  }
  .action-btn:hover{ background:#fff !important; transform:translateY(-1px); box-shadow:0 4px 6px -1px rgba(0,0,0,.12); }

  .video-card{
    position:relative;
    transition:all .35s cubic-bezier(.4,0,.2,1);
    background:#000;
    border:1px solid rgba(255,255,255,.1);
    overflow:hidden;
    box-shadow:0 4px 6px -1px rgba(0,0,0,.3);
    border-radius:.7rem;
  }
  iframe{ width:100%; height:100%; border:0; display:block; aspect-ratio:16/9; }

  .ha-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 .ha-yt-fullscreen-proxy,
  .video-card:focus-within .ha-yt-fullscreen-proxy{
    background:rgba(15,23,42,.72);
    color:#fff;
    opacity:.86;
  }
  .ha-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 .ha-yt-fullscreen-proxy,
  .video-card:-webkit-full-screen .ha-yt-fullscreen-proxy{
    background:rgba(15,23,42,.72);
    color:#fff;
    opacity:.65;
  }

  /* Fit mode (boşluksuz) */
  .fit-mode-container{
    position:fixed; inset:0;
    z-index:9999; background:#000;
    padding:0 !important; margin:0 !important;
    gap:0 !important;
  }
  .fit-mode-card{
    border-radius:0 !important;
    border:none !important;
    background:#000 !important;
    box-shadow:none !important;
    width:100% !important;
    height:100% !important;
  }
  .fit-mode-card iframe{
    width:100% !important;
    height:100% !important;
    border-radius:0 !important;
    aspect-ratio:unset !important;
  }
  .fit-mode-hide{ display:none !important; }

  #exit-fit-btn{
    position:fixed; bottom:15px; left:50%;
    transform:translateX(-50%);
    z-index:10000;
    background:rgba(220,38,38,.9);
    border:2px solid rgba(255,255,255,.55);
    color:#fff;
    padding:8px 20px;
    border-radius:999px;
    font-weight:900;
    font-size:.9rem;
    cursor:pointer;
    display:none;
    opacity:0;
    transition:opacity .3s ease;
  }
  #exit-fit-btn.visible{ display:flex; opacity:1; }

  /* ===== MODAL (Modern / Renkli / Animasyonlu) ===== */
  #ha-modal-backdrop{
    position:fixed; inset:0; z-index:20000;
    background: radial-gradient(1200px 600px at 20% 10%, rgba(168,85,247,.35), transparent 60%),
                radial-gradient(1000px 700px at 80% 30%, rgba(34,197,94,.25), transparent 55%),
                radial-gradient(900px 600px at 50% 90%, rgba(59,130,246,.25), transparent 55%),
                rgba(0,0,0,.55);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  #ha-modal-backdrop.visible{
    display:flex;
    animation: haFadeIn .18s ease-out both;
  }

  @keyframes haFadeIn{
    from{ opacity:0; }
    to{ opacity:1; }
  }

  #ha-modal{
    width:min(640px, 92vw);
    border-radius: 22px;
    padding: 18px 18px 16px;
    position:relative;
    overflow:hidden;

    background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.22);

    box-shadow:
      0 30px 90px rgba(0,0,0,.65),
      0 0 0 1px rgba(255,255,255,.08) inset;

    transform: translateY(10px) scale(.985);
    animation: haPop .22s cubic-bezier(.2,.9,.2,1) both;
  }

  @keyframes haPop{
    from{ transform: translateY(16px) scale(.97); opacity:.0; }
    to{ transform: translateY(0) scale(1); opacity:1; }
  }

  #ha-modal::before{
    content:"";
    position:absolute; inset:-2px;
    background: conic-gradient(from 180deg,
      rgba(239,68,68,.75),
      rgba(59,130,246,.75),
      rgba(34,197,94,.70),
      rgba(168,85,247,.75),
      rgba(249,115,22,.75),
      rgba(239,68,68,.75)
    );
    filter: blur(14px);
    opacity:.35;
    animation: haSpin 6s linear infinite;
    pointer-events:none;
  }
  @keyframes haSpin{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
  }

  #ha-modal .ha-modal-inner{
    position:relative;
    border-radius: 18px;
    padding: 18px;
    background: linear-gradient(145deg, rgba(15,23,42,.78), rgba(30,41,59,.78));
    border:1px solid rgba(255,255,255,.12);
  }

  .ha-modal-icon{
    width:54px; height:54px;
    border-radius: 16px;
    display:flex; align-items:center; justify-content:center;
    margin: 0 auto 10px;
    background: linear-gradient(135deg, rgba(59,130,246,.35), rgba(168,85,247,.35));
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 14px 30px rgba(0,0,0,.35);
  }

  .ha-modal-title{
    text-align:center;
    font-weight: 900;
    letter-spacing:.2px;
    font-size: 1.35rem;
    line-height: 1.2;
    color:#fff;
    margin: 0 0 8px;
  }

  #ha-modal-text{
    text-align:center;
    font-size: 1.05rem;
    line-height: 1.5;
    color: rgba(226,232,240,.95);
    margin: 0;
  }

  .ha-modal-actions{
    display:flex;
    justify-content:center;
    margin-top: 14px;
  }

  #ha-modal-close.action-btn{
    background: linear-gradient(135deg, rgba(59,130,246,1), rgba(168,85,247,1)) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.35);
    padding: .65rem 1.3rem;
    border-radius: 999px;
    font-size: 1rem;
  }
  #ha-modal-close.action-btn:hover{
    transform: translateY(-1px);
    filter: brightness(1.07);
  }

/* V123: Mobilde YouTube tam ekran ikonunun üstüne çalışan örtü düğmesi. */
@media(max-width:575.98px){
  .ha-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;
  }
  .ha-yt-fullscreen-proxy .ild-yt-fs-svg{
    width:25px!important;
    height:25px!important;
    display:block!important;
  }
}
.ha-yt-fullscreen-proxy .ild-yt-fs-svg{
  width:24px;
  height:24px;
  display:block;
}


/* =========================================================
   V136 - WP tek sayfa kullanımına uygun tam yayılım / tema uyumu
   - Gereksiz koyu dış çerçeve kaldırıldı.
   - Üst panel sıkılaştırıldı.
   - Açık/koyu tema ebeveyn sayfadan okunur.
   ========================================================= */
:root{
  --ha-app-bg:#eaf8ff;
  --ha-panel-bg:linear-gradient(135deg,#f8fcff 0%,#e6f8ff 52%,#d7f1ff 100%);
  --ha-panel-border:rgba(14,165,233,.24);
  --ha-panel-shadow:0 12px 28px rgba(15,23,42,.10);
  --ha-title:#0b2f4a;
  --ha-muted:#315d78;
  --ha-video-shadow:0 10px 24px rgba(15,23,42,.16);
}
html[data-bs-theme="dark"],
html.ild-special-dark,
body.ild-special-dark{
  --ha-app-bg:#020611;
  --ha-panel-bg:linear-gradient(145deg,#101b2d 0%,#0a1323 58%,#050914 100%);
  --ha-panel-border:rgba(87,206,255,.20);
  --ha-panel-shadow:0 14px 34px rgba(0,0,0,.34);
  --ha-title:#ffffff;
  --ha-muted:#9fb2c8;
  --ha-video-shadow:0 10px 28px rgba(0,0,0,.38);
}
html,body{
  background:var(--ha-app-bg)!important;
}
#ha-app{
  background:var(--ha-app-bg)!important;
  color:var(--ha-title)!important;
  min-height:0!important;
}
#ha-wrap{
  width:100%!important;
  padding:0 0 18px!important;
  background:var(--ha-app-bg)!important;
}
#header-panel{
  width:min(100%,64rem)!important;
  max-width:64rem!important;
  padding:14px 16px 13px!important;
  margin:0 auto 12px!important;
  border-radius:18px!important;
  background:var(--ha-panel-bg)!important;
  border:1px solid var(--ha-panel-border)!important;
  box-shadow:var(--ha-panel-shadow)!important;
}
#header-panel > .flex{
  gap:10px!important;
}
#header-panel h1{
  color:var(--ha-title)!important;
  font-size:clamp(1.75rem,2.6vw,2.55rem)!important;
  line-height:1.05!important;
  letter-spacing:.03em!important;
  margin:0!important;
}
#header-panel p{
  color:var(--ha-muted)!important;
  margin:.1rem 0 0!important;
  font-size:.92rem!important;
  line-height:1.25!important;
}
.group-main-btn{
  padding:.46rem .86rem!important;
  border-radius:.62rem!important;
  font-size:.93rem!important;
  line-height:1.05!important;
}
.letter-btn{
  width:2.05rem!important;
  height:2.05rem!important;
  border-radius:.52rem!important;
  font-size:.93rem!important;
  line-height:1!important;
}
.action-btn{
  padding:.48rem 1.08rem!important;
  border-radius:.62rem!important;
  font-size:.9rem!important;
  line-height:1.05!important;
}
#video-container{
  width:min(100%,86rem)!important;
  max-width:86rem!important;
}
.video-card{
  box-shadow:var(--ha-video-shadow)!important;
  border-color:rgba(14,165,233,.10)!important;
}
html[data-bs-theme="dark"] .video-card,
html.ild-special-dark .video-card,
body.ild-special-dark .video-card{
  border-color:rgba(87,206,255,.09)!important;
}

@media(max-width:700px){
  #header-panel{
    width:calc(100% - 12px)!important;
    padding:12px 10px 11px!important;
    border-radius:16px!important;
    margin-bottom:10px!important;
  }
  #header-panel h1{
    font-size:clamp(1.22rem,6vw,1.7rem)!important;
    white-space:nowrap!important;
    letter-spacing:.02em!important;
  }
  #header-panel > .flex{gap:8px!important;}
  .group-main-btn{padding:.42rem .66rem!important;font-size:.82rem!important;}
  .letter-btn{width:1.95rem!important;height:1.95rem!important;font-size:.86rem!important;}
  .action-btn{padding:.46rem .9rem!important;font-size:.84rem!important;}
  #video-container{width:calc(100% - 12px)!important;}
}


/* =========================================================
   V138 - Harf aracı: tam ekran boşluk fix + paylaş butonu
   ========================================================= */
html.ha-fit-active,
html.ha-fit-active body,
body.ha-fit-active{
  width:100vw!important;
  height:100vh!important;
  max-width:100vw!important;
  max-height:100vh!important;
  overflow:hidden!important;
  background:#000!important;
}
#video-container.fit-mode-container{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  max-width:100vw!important;
  height:100vh!important;
  max-height:100vh!important;
  margin:0!important;
  padding:0!important;
  gap:0!important;
  background:#000!important;
  overflow:hidden!important;
  z-index:9999!important;
}
#video-container.fit-mode-container .video-card{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  min-width:0!important;
}
#video-container.fit-mode-container iframe{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  aspect-ratio:unset!important;
}
.ha-action-row{
  gap:14px!important;
  align-items:center!important;
  flex-wrap:wrap!important;
}
.ha-action-row .action-btn{
  min-width:168px!important;
  justify-content:center!important;
}
.ha-share-btn{
  background:linear-gradient(135deg,#25d366 0%,#16a34a 48%,#0f8a3b 100%)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.24)!important;
  box-shadow:0 7px 17px rgba(22,163,74,.24), inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.ha-share-btn:hover{
  background:linear-gradient(135deg,#2fea78 0%,#18b957 48%,#0f8a3b 100%)!important;
  color:#fff!important;
}
.ha-wa-icon{
  width:20px;
  height:20px;
  display:block;
  flex:0 0 20px;
}
.ha-yt-top-guard,
.ha-yt-brand-guard{
  position:absolute;
  z-index:9;
  display:none;
  background:rgba(0,0,0,.001);
  pointer-events:auto;
  touch-action:manipulation;
}
.ha-yt-top-guard{
  top:0;
  left:0;
  right:0;
  height:72px;
}
.ha-yt-brand-guard{
  right:48px;
  bottom:0;
  width:210px;
  height:66px;
}
@media(max-width:575.98px){
  .ha-action-row{
    gap:8px!important;
    flex-wrap:nowrap!important;
    padding-inline:2px!important;
  }
  .ha-action-row .action-btn{
    min-width:0!important;
    flex:1 1 0!important;
    padding:.44rem .34rem!important;
    font-size:.74rem!important;
    letter-spacing:-.01em!important;
  }
  .ha-wa-icon{
    width:17px!important;
    height:17px!important;
    flex-basis:17px!important;
  }
  .ha-yt-top-guard,
  .ha-yt-brand-guard{
    display:block;
  }
}
@media(min-width:576px) and (max-width:767.98px){
  .ha-action-row .action-btn{
    min-width:138px!important;
  }
}
.ha-yt-fullscreen-proxy{z-index:12!important;}