:root,
    :root[data-theme=dark] {
      --bg: #0d0817;
      --s: #160e26;
      --s2: #211736;
      --bd: #2d2146;
      --red: #8b5cf6;
      --red2: #7c3aed;
      --tx: #f1edfb;
      --mut: #a69fbf;
      --hi: #fff;
      --hdr: #0d0817e8;
      --sh: 0 14px 34px #000a;
      --bad: #ff6b8a;
      --star: #4b3d6e;
      --warnbg: #2a1a00;
      --warnbd: #6b4a00;
      --warntx: #ffcc66;
      --g1: #2a1255;
      --g2: #160e26;
      --pad: max(0.5cm, 20px);
      color-scheme: dark
    }

    * {
      box-sizing: border-box;
      margin: 0
    }

    html {
      scroll-behavior: smooth
    }

    body {
      background: var(--bg);
      color: var(--tx);
      font: 15px/1.5 Manrope, system-ui, sans-serif;
      min-height: 100vh
    }

    a {
      color: inherit;
      text-decoration: none
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
      color: inherit
    }

    button {
      cursor: pointer;
      border: 0
    }

    :focus-visible {
      outline: 2px solid var(--red);
      outline-offset: 2px
    }

    svg {
      width: 1em;
      height: 1em;
      fill: currentColor;
      vertical-align: -.12em
    }

    /* header */
    header {
      position: fixed;
      inset: 0 0 auto;
      z-index: 50;
      height: 64px;
      display: flex;
      align-items: center;
      gap: 28px;
      padding: 0 var(--pad);
      background: var(--hdr);
      backdrop-filter: saturate(1.4) blur(12px);
      -webkit-backdrop-filter: saturate(1.4) blur(12px);
      box-shadow: 0 1px 0 var(--bd);
      transition: background .25s
    }

    header.solid {
      box-shadow: 0 1px 0 var(--bd), 0 6px 20px #3b1f7a14
    }

    .logo {
      display: flex;
      align-items: center;
      font-weight: 800;
      font-size: 1.75rem;
      letter-spacing: -.04em;
      font-style: italic;
      color: var(--hi);
      white-space: nowrap
    }

    .logo .lt b {
      color: var(--red);
      font-weight: 800
    }

    .hp {
      position: absolute !important;
      left: -9999px !important;
      width: 1px;
      height: 1px;
      opacity: 0
    }

    .sr,
    #ssr {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden
    }

    nav {
      display: flex;
      gap: 26px
    }

    nav a {
      font-weight: 700;
      font-size: .82rem;
      letter-spacing: .05em;
      color: var(--tx);
      padding: 6px 0;
      border-bottom: 2px solid transparent
    }

    nav a:hover,
    nav a.on {
      color: var(--hi);
      border-color: var(--red)
    }

    .tools {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 1.25rem
    }

    .tools button {
      background: none;
      position: relative;
      padding: 4px
    }

    .badge {
      position: absolute;
      top: -2px;
      right: -4px;
      background: #556;
      font-size: .6rem;
      border-radius: 99px;
      width: 16px;
      height: 16px;
      display: grid;
      place-items: center
    }

    .sbox {
      display: none;
      background: #000;
      border: 1px solid var(--bd);
      border-radius: 6px;
      padding: 6px 12px;
      width: 200px
    }

    .sbox.open {
      display: block
    }

    .av {
      width: 36px;
      height: 36px;
      border-radius: 6px;
      background: linear-gradient(135deg, var(--red), #c084fc);
      display: grid;
      place-items: center;
      font-weight: 800;
      font-size: .95rem
    }

    .burger {
      display: none;
      background: none;
      font-size: 1.5rem
    }

    /* hero */
    .hero {
      position: relative;
      height: min(78vh, 640px);
      min-height: 480px;
      overflow: hidden
    }

    .slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity .8s;
      display: flex;
      align-items: flex-end;
      padding: 80px var(--pad) 56px
    }

    .slide.on {
      opacity: 1;
      z-index: 1
    }

    .slide .art {
      position: absolute;
      inset: 0
    }

    .slide::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, #14092aee 5%, #14092a99 45%, #14092a00 85%), linear-gradient(0deg, var(--bg) 0, #14092a00 30%)
    }

    .slide .in {
      position: relative;
      z-index: 2;
      max-width: 580px;
      width: 100%
    }

    .tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 10px
    }

    .tags span {
      background: #2a2a2acc;
      padding: 2px 10px;
      border-radius: 4px;
      font-size: .78rem;
      font-weight: 600
    }

    .tags .age {
      background: var(--s2)
    }

    .slide h2 {
      font-size: clamp(1.6rem, 4vw, 3rem);
      line-height: 1.15;
      font-weight: 800;
      letter-spacing: -.03em;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-word
    }

    .slide p {
      color: var(--tx);
      max-width: 48ch;
      margin-bottom: 16px;
      font-size: .9rem;
      line-height: 1.45;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden
    }

    .slide .row {
      display: flex;
      gap: 12px;
      align-items: center;
      margin: 0 0 10px;
      position: relative;
      z-index: 6
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--red) !important;
      color: #fff !important;
      padding: 12px 26px;
      font-weight: 800;
      font-size: .85rem;
      letter-spacing: .05em;
      border-radius: 4px;
      box-shadow: 0 4px 14px #0008;
      transition: background .15s
    }

    .btn:hover {
      background: var(--red2) !important
    }

    .btn.alt {
      background: var(--s2) !important;
      color: var(--tx) !important;
      border: 1px solid var(--bd)
    }

    .btn.alt:hover {
      background: var(--bd) !important
    }

    .dots {
      position: absolute;
      z-index: 10;
      bottom: 18px;
      right: var(--pad);
      left: auto;
      display: flex;
      gap: 8px
    }

    .dots button {
      width: 26px;
      height: 4px;
      background: var(--mut);
      opacity: .4;
      border-radius: 2px;
      cursor: pointer;
      border: 0;
      transition: width .2s, background .2s
    }

    .dots .on {
      background: var(--red);
      opacity: 1;
      width: 38px
    }

    /* sections */
    main {
      min-height: 60vh
    }

    .pg {
      padding: 90px var(--pad) 50px
    }

    .sec {
      padding: 0 var(--pad);
      margin-top: 34px;
      position: relative
    }

    .sh {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 14px
    }

    .sh h2 {
      font-size: 1.2rem;
      font-weight: 600
    }

    .sh span {
      color: var(--mut);
      font-size: .9rem
    }

    .scroll {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      padding-bottom: 4px
    }

    .scroll::-webkit-scrollbar {
      display: none
    }

    .scroll>* {
      scroll-snap-align: start;
      flex: none
    }

    .arrow {
      position: absolute;
      right: calc(var(--pad) + 8px);
      top: 50%;
      z-index: 5;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--s);
      color: var(--tx);
      box-shadow: var(--sh);
      border: 1px solid var(--bd);
      display: grid;
      place-items: center
    }

    .arrow:hover {
      background: var(--red);
      border-color: var(--red);
      color: #fff
    }

    /* cards */
    .land {
      width: min(396px, 78vw);
      aspect-ratio: 16/9;
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      display: block
    }

    .land::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, #000c, #0000 55%)
    }

    .land .cap {
      position: absolute;
      z-index: 2;
      left: 20px;
      right: 20px;
      bottom: 18px;
      font-weight: 600;
      font-size: .88rem;
      color: var(--tx);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .land .bar {
      position: absolute;
      z-index: 2;
      left: 0;
      right: 0;
      bottom: 0;
      height: 3px;
      background: #fff3
    }

    .land .bar i {
      display: block;
      height: 100%;
      background: var(--red)
    }

    .new {
      position: absolute;
      z-index: 2;
      left: 0;
      top: 0;
      background: var(--red);
      font-size: .72rem;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 4px 0 4px 0
    }

    .rm {
      position: absolute;
      z-index: 3;
      right: 0;
      top: 0;
      background: #555d;
      font-size: .85rem;
      padding: 3px 12px;
      border-radius: 0 4px 0 4px
    }

    .rm:hover {
      background: var(--red)
    }

    .pc {
      width: 170px;
      display: block;
      position: relative
    }

    .pc .poster {
      aspect-ratio: 2/3;
      border-radius: 4px;
      display: flex;
      align-items: flex-end;
      padding: 12px;
      font-weight: 800;
      line-height: 1.1;
      position: relative;
      overflow: hidden;
      transition: transform .15s, box-shadow .15s
    }

    .pc:hover .poster {
      transform: scale(1.04);
      box-shadow: 0 0 0 2px var(--red)
    }

    .pc .poster::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, #000a, #0000 60%)
    }

    .pc .poster b {
      position: relative;
      z-index: 1;
      text-shadow: 0 1px 6px #000
    }

    .flag {
      position: absolute;
      z-index: 2;
      top: 8px;
      left: 8px;
      display: flex;
      gap: 4px
    }

    .flag span {
      background: #000b;
      font-size: .66rem;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 3px
    }

    .flag .d {
      background: var(--red)
    }

    .rank {
      position: absolute;
      z-index: 2;
      right: 8px;
      top: 2px;
      font-size: 2.6rem;
      font-weight: 800;
      color: #fff;
      -webkit-text-stroke: 2px var(--red);
      text-shadow: 0 2px 10px #000
    }

    .pc small {
      display: block;
      color: var(--mut);
      margin-top: 6px;
      font-size: .8rem
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 20px
    }

    .grid .pc {
      width: auto
    }

    /* controls */
    .chips {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin: 6px 0 22px
    }

    .chip {
      background: var(--s2);
      padding: 6px 16px;
      border-radius: 4px;
      font-size: .85rem;
      font-weight: 600;
      color: var(--mut)
    }

    .chip.on,
    .chip:hover {
      background: var(--red);
      color: #fff
    }

    h1.t {
      font-size: 2rem;
      font-weight: 800;
      letter-spacing: -.02em;
      margin-bottom: 14px
    }

    .detail {
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: 34px
    }

    .detail .poster {
      aspect-ratio: 2/3;
      border-radius: 6px
    }

    .eps {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: 8px;
      margin-top: 12px
    }

    .ep {
      background: var(--s2);
      padding: 10px;
      border-radius: 4px;
      text-align: center;
      font-weight: 600;
      font-size: .85rem
    }

    .ep:hover {
      background: var(--red)
    }

    .ep.seen {
      color: var(--mut);
      border-left: 3px solid var(--red)
    }

    .row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin: 14px 0
    }

    .player {
      background: #000;
      aspect-ratio: 16/9;
      display: grid;
      place-items: center;
      border: 1px solid var(--bd);
      border-radius: 6px;
      overflow: hidden
    }

    .player video {
      width: 100%;
      height: 100%
    }

    .empty {
      color: var(--mut);
      padding: 30px;
      text-align: center;
      max-width: 48ch;
      margin: auto
    }

    .seg {
      display: inline-flex
    }

    .seg button {
      background: var(--s2);
      padding: 9px 18px;
      font-weight: 600
    }

    .seg button:first-child {
      border-radius: 4px 0 0 4px
    }

    .seg button:last-child {
      border-radius: 0 4px 4px 0
    }

    .seg .on {
      background: var(--red)
    }

    .seg button:disabled {
      opacity: .4;
      cursor: not-allowed
    }

    /* takvim / premium / forms */
    .cal-header {
      margin-bottom: 24px;
      text-align: center;
    }
    .cal-header h1 {
      font-size: 2rem;
      font-weight: 800;
      color: #fff;
      margin-bottom: 8px;
      background: linear-gradient(135deg, #fff 30%, #c084fc 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .cal-header p {
      color: var(--mut);
      font-size: 0.95rem;
      max-width: 600px;
      margin: 0 auto 20px;
    }
    .cal-nav-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 6px 4px 14px;
      margin-bottom: 24px;
      scrollbar-width: none;
      justify-content: flex-start;
      border-bottom: 1px solid var(--bd);
    }
    .cal-nav-tabs::-webkit-scrollbar { display: none; }
    .cal-tab-btn {
      background: var(--s);
      border: 1px solid var(--bd);
      color: var(--tx);
      padding: 10px 18px;
      border-radius: 999px;
      font-size: 0.9rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      white-space: nowrap;
    }
    .cal-tab-btn:hover {
      background: var(--s2);
      border-color: var(--red);
      transform: translateY(-1px);
    }
    .cal-tab-btn.active {
      background: linear-gradient(135deg, #7c3aed, #9333ea);
      color: #fff;
      border-color: #a855f7;
      box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
    }
    .cal-badge-today {
      background: #ec4899;
      color: #fff;
      font-size: 0.7rem;
      padding: 2px 7px;
      border-radius: 999px;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    .cal-badge-count {
      background: rgba(255, 255, 255, 0.15);
      font-size: 0.75rem;
      padding: 2px 7px;
      border-radius: 999px;
      font-weight: 700;
    }
    .cal-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
      margin-bottom: 40px;
    }
    .cal-card {
      background: var(--s);
      border: 1px solid var(--bd);
      border-radius: 14px;
      padding: 12px;
      display: flex;
      gap: 14px;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      text-decoration: none;
      color: inherit;
    }
    .cal-card:hover {
      background: var(--s2);
      border-color: var(--red);
      transform: translateY(-3px);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 15px rgba(124, 58, 237, 0.2);
    }
    .cal-card-poster {
      width: 80px;
      height: 112px;
      border-radius: 10px;
      object-fit: cover;
      flex-shrink: 0;
      background: var(--s2);
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    .cal-card-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-width: 0;
    }
    .cal-card-time-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      margin-bottom: 6px;
    }
    .cal-time-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 0.8rem;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      background: rgba(124, 58, 237, 0.15);
      color: #c084fc;
      border: 1px solid rgba(124, 58, 237, 0.3);
    }
    .cal-status-pill {
      font-size: 0.72rem;
      font-weight: 700;
      padding: 3px 7px;
      border-radius: 6px;
    }
    .cal-status-pill.released {
      background: rgba(16, 185, 129, 0.15);
      color: #34d399;
      border: 1px solid rgba(16, 185, 129, 0.3);
    }
    .cal-status-pill.waiting {
      background: rgba(245, 158, 11, 0.15);
      color: #fbbf24;
      border: 1px solid rgba(245, 158, 11, 0.3);
    }
    .cal-card-title {
      font-size: 0.95rem;
      font-weight: 700;
      color: #fff;
      line-height: 1.35;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 4px;
    }
    .cal-card-ep {
      font-size: 0.8rem;
      color: var(--mut);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .cal-card-action {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.8rem;
      font-weight: 700;
      color: #c084fc;
    }
    .cal-card:hover .cal-card-action {
      color: #fff;
    }
    .cal-day-heading {
      font-size: 1.25rem;
      font-weight: 800;
      color: #fff;
      margin: 32px 0 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .cal-day-heading::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--bd);
    }

    .plans {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 18px;
      max-width: 900px
    }

    .plan {
      background: var(--s);
      border: 1px solid var(--bd);
      border-radius: 8px;
      padding: 26px
    }

    .plan.hot {
      border-color: var(--red);
      box-shadow: 0 0 30px #7c3aed33
    }

    .plan h3 {
      font-size: 1.1rem
    }

    .plan .p {
      font-size: 2rem;
      font-weight: 800;
      margin: 8px 0
    }

    .plan ul {
      margin: 14px 0 20px 18px;
      color: var(--mut)
    }

    form {
      display: grid;
      gap: 12px;
      max-width: 460px
    }

    input,
    select,
    textarea {
      background: var(--s2);
      border: 1px solid var(--bd);
      border-radius: 4px;
      padding: 10px 12px;
      width: 100%
    }

    footer {
      padding: 40px var(--pad);
      border-top: 1px solid var(--bd);
      margin-top: 60px;
      color: var(--mut);
      font-size: .82rem;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px
    }

    .toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--red);
      padding: 10px 22px;
      border-radius: 4px;
      font-weight: 600;
      z-index: 99
    }

    @media(max-width:900px) {
      nav {
        position: fixed;
        inset: 64px 0 auto;
        background: #000;
        flex-direction: column;
        gap: 0;
        padding: 8px var(--pad);
        display: none
      }

      nav.open {
        display: flex
      }

      nav a {
        padding: 14px 0;
        border-bottom: 1px solid var(--bd)
      }

      .burger {
        display: block
      }

      .cal {
        grid-template-columns: 1fr
      }

      .detail {
        grid-template-columns: 1fr
      }

      .detail .poster {
        max-width: 200px
      }

      .arrow {
        display: none
      }
    }

    @media(prefers-reduced-motion:reduce) {
      * {
        transition: none !important
      }

      html {
        scroll-behavior: auto
      }
    }

    /* ===== v3: profesyonel dokunuşlar ===== */
    .spin {
      width: 36px;
      height: 36px;
      border: 3px solid var(--bd);
      border-top-color: var(--red);
      border-radius: 50%;
      animation: sp .8s linear infinite;
      margin: 40vh auto
    }

    @keyframes sp {
      to {
        transform: rotate(360deg)
      }
    }

    .fade {
      animation: fd .35s ease both
    }

    @keyframes fd {
      from {
        opacity: 0;
        transform: translateY(8px)
      }
    }

    .tools {
      position: relative
    }

    .sug {
      position: absolute;
      top: 46px;
      right: 0;
      width: min(340px, 92vw);
      background: var(--s);
      border: 1px solid var(--bd);
      border-radius: 8px;
      overflow: hidden;
      display: none;
      box-shadow: 0 14px 34px #000
    }

    .sug a {
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 8px 12px
    }

    .sug a:hover,
    .sug a.act {
      background: var(--s2)
    }

    .sug i {
      width: 34px;
      height: 48px;
      border-radius: 3px;
      flex: none
    }

    .sug b {
      display: block;
      font-size: .9rem
    }

    .sug small {
      color: var(--mut)
    }

    .q4 {
      background: var(--red) !important;
      font-weight: 800
    }

    .bar2 {
      display: flex;
      gap: 18px;
      align-items: center;
      margin: 0 0 22px;
      flex-wrap: wrap
    }

    .bar2 select {
      width: auto
    }

    .bar2 label {
      display: flex;
      gap: 8px;
      align-items: center;
      color: var(--mut)
    }

    .bar2 .cnt {
      margin-left: auto;
      color: var(--mut)
    }

    .bd {
      position: relative;
      height: 420px;
      margin-bottom: -230px;
      overflow: hidden
    }

    .bd .art {
      position: absolute;
      inset: 0;
      filter: brightness(.6) blur(2px);
      transform: scale(1.06)
    }

    .bd::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, var(--bg) 4%, transparent 75%)
    }

    .dp {
      position: relative;
      z-index: 2;
      padding: 0 var(--pad) 30px
    }

    .dp .tags span {
      background: var(--s2)
    }

    .dp .tags .age {
      background: var(--s2)
    }

    .bc {
      color: var(--mut);
      font-size: .82rem;
      margin-bottom: 14px
    }

    .bc a:hover {
      color: var(--hi)
    }

    .bc span {
      color: var(--mut)
    }

    .meta {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      color: var(--mut);
      margin: 4px 0 14px
    }

    .meta b {
      color: var(--hi)
    }

    .desc {
      max-width: 64ch;
      color: var(--tx);
      margin-bottom: 6px
    }

    .eplist {
      display: grid;
      gap: 8px;
      margin-top: 12px;
      max-width: 900px
    }

    .er {
      display: flex;
      align-items: center;
      gap: 14px;
      background: var(--s);
      padding: 13px 16px;
      border-radius: 6px;
      border-left: 3px solid transparent;
      transition: background .15s
    }

    .er:hover {
      background: var(--s2);
      border-color: var(--red)
    }

    .er .n {
      color: var(--red);
      font-weight: 800;
      min-width: 38px
    }

    .er span {
      flex: 1;
      font-weight: 600
    }

    .er small {
      color: var(--mut);
      font-size: .78rem
    }

    .er .ok {
      color: #1f9d55
    }

    .pl {
      max-width: 1280px;
      margin: auto
    }

    .back {
      display: inline-block;
      color: var(--mut);
      margin-bottom: 4px
    }

    .back:hover {
      color: var(--hi)
    }

    .player {
      position: relative
    }

    .player .err {
      margin: 0;
      inset: 0;
      display: grid;
      place-items: center;
      background: #000d
    }

    .ovl {
      position: absolute;
      inset: 0;
      background: #000d;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      z-index: 3;
      text-align: center;
      padding: 20px
    }

    .ovl[hidden] {
      display: none
    }

    .cd {
      font-size: 2.6rem;
      font-weight: 800;
      color: var(--red)
    }

    .tb {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      margin: 16px 0 6px
    }

    .tb label {
      display: flex;
      gap: 8px;
      align-items: center;
      color: var(--mut);
      font-size: .85rem
    }

    .tb select {
      width: auto;
      padding: 7px 10px
    }

    .tb .btn {
      padding: 10px 18px;
      font-size: .78rem
    }

    .kb {
      color: var(--mut);
      font-size: .78rem
    }

    footer {
      display: block;
      padding: 44px var(--pad) 26px
    }

    .fc {
      display: grid;
      grid-template-columns: 1.8fr 1.2fr 1.2fr 1.2fr 1fr;
      gap: 28px;
      max-width: 1280px
    }

    .fc p {
      max-width: 36ch;
      margin-top: 10px;
      line-height: 1.5;
      font-size: .84rem;
      color: var(--mut);
    }

    footer h4 {
      color: var(--hi);
      margin-bottom: 12px;
      font-size: .92rem;
      font-weight: 700;
    }

    footer .fc a {
      display: block;
      color: var(--mut);
      padding: 3px 0;
      font-size: .84rem;
      transition: color .15s ease, transform .15s ease;
    }

    footer .fc a:hover {
      color: #c084fc;
      transform: translateX(2px);
    }

    .fb {
      border-top: 1px solid var(--bd);
      margin-top: 28px;
      padding-top: 16px;
      font-size: .82rem;
      color: var(--mut);
    }

    @media(max-width:1100px) {
      .fc {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 24px;
      }
    }

    @media(max-width:680px) {
      .fc {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .bd {
        height: 300px;
        margin-bottom: -150px
      }
    }

    /* ===== v4: hesap, bildirim, yorum, yönetim ===== */
    [hidden] {
      display: none !important
    }

    .tools button.av {
      background: linear-gradient(135deg, var(--red), #c084fc);
      padding: 0;
      width: 36px;
      height: 36px
    }

    .mut {
      color: var(--mut)
    }

    .h2 {
      margin: 30px 0 8px;
      font-size: 1.15rem
    }

    .toast.bad {
      background: #b3123a
    }

    .spin.sm {
      width: 24px;
      height: 24px;
      margin: 20px auto;
      border-width: 2px
    }

    .btn.sm {
      padding: 8px 16px;
      font-size: .78rem
    }

    .btn[disabled] {
      opacity: .6;
      cursor: wait
    }

    #ua {
      position: relative;
      display: flex;
      align-items: center
    }

    button.av {
      border: 0;
      color: #fff;
      cursor: pointer
    }

    .dd {
      position: absolute;
      top: 46px;
      right: 0;
      min-width: 240px;
      background: var(--s);
      border: 1px solid var(--bd);
      border-radius: 8px;
      box-shadow: 0 14px 34px #000;
      z-index: 60;
      overflow: hidden;
      font-size: .9rem
    }

    .dd[hidden] {
      display: none
    }

    .dd a,
    .dd button {
      display: block;
      width: 100%;
      text-align: left;
      padding: 10px 14px;
      background: none;
      color: var(--tx)
    }

    .dd a:hover,
    .dd button:hover {
      background: var(--s2)
    }

    .dd .danger {
      color: var(--bad)
    }

    .dd .dh {
      padding: 12px 14px;
      border-bottom: 1px solid var(--bd)
    }

    .dd .dh small {
      display: block;
      color: var(--mut);
      margin-bottom: 6px
    }

    .pill {
      display: inline-block;
      background: var(--s2);
      border-radius: 99px;
      padding: 1px 10px;
      font-size: .72rem;
      font-weight: 700
    }

    .pill.on {
      background: var(--red)
    }

    .bdd {
      width: 360px;
      max-width: 92vw
    }

    .bdd a {
      display: flex;
      gap: 12px;
      align-items: center
    }

    .bdd i {
      width: 64px;
      height: 36px;
      border-radius: 3px;
      flex: none;
      background-color: var(--s2)
    }

    .bdd b {
      display: block
    }

    .bdd small {
      color: var(--mut)
    }

    .none {
      padding: 18px;
      color: var(--mut)
    }

    .lockbox {
      max-width: 540px;
      margin: 30px auto;
      background: var(--s);
      border: 1px solid var(--bd);
      border-radius: 10px;
      padding: 34px;
      text-align: center
    }

    .lockbox svg {
      font-size: 2.2rem;
      color: var(--red)
    }

    .lockbox h2 {
      margin: 10px 0 6px;
      font-size: 1.2rem
    }

    .lockbox p {
      color: var(--mut);
      margin-bottom: 16px
    }

    .player .lockbox {
      margin: 0;
      border: 0;
      max-width: none;
      width: 100%
    }

    .auth {
      max-width: 420px;
      margin: 20px auto
    }

    .auth form {
      display: grid;
      gap: 12px
    }

    .err {
      color: var(--bad);
      min-height: 1.2em;
      font-size: .88rem
    }

    .cmbox {
      max-width: 800px
    }

    .rate {
      display: flex;
      gap: 14px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 14px
    }

    .stars button {
      background: none;
      font-size: 1.6rem;
      line-height: 1;
      color: var(--star);
      padding: 0 2px
    }

    .stars button.on {
      color: #ffb300
    }

    .stars button:hover {
      color: #ffd54f
    }

    #cf {
      display: grid;
      gap: 10px;
      max-width: 640px;
      margin-bottom: 18px;
      justify-items: start
    }

    #cf textarea {
      width: 100%
    }

    .cl {
      display: grid;
      gap: 12px
    }

    .c {
      background: var(--s);
      border-radius: 8px;
      padding: 12px 16px
    }

    .ch {
      display: flex;
      gap: 10px;
      align-items: baseline
    }

    .ch small {
      color: var(--mut)
    }

    .ch .x {
      margin-left: auto;
      background: none;
      color: var(--mut);
      font-size: .8rem
    }

    .ch .x:hover {
      color: var(--bad)
    }

    .c p {
      white-space: pre-wrap;
      word-break: break-word;
      margin-top: 4px;
      color: var(--tx)
    }

    .er .th {
      width: 96px;
      height: 54px;
      border-radius: 4px;
      flex: none;
      background-color: var(--s2)
    }

    .lk {
      position: absolute;
      z-index: 2;
      right: 8px;
      top: 8px;
      background: #000b;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: .72rem;
      font-weight: 700;
      display: flex;
      gap: 4px;
      align-items: center
    }

    .lk2 {
      color: #ffb300 !important;
      display: inline-flex;
      gap: 3px;
      align-items: center
    }

    .prose {
      max-width: 760px;
      margin: auto
    }

    .prose h3 {
      margin: 22px 0 6px
    }

    .prose ul {
      margin: 8px 0 8px 20px;
      color: var(--tx)
    }

    .prose p {
      color: var(--tx);
      margin: 8px 0
    }

    .prose a {
      color: var(--red)
    }

    .adm-note {
      background: var(--warnbg);
      border: 1px solid var(--warnbd);
      padding: 10px 14px;
      border-radius: 6px;
      color: var(--warntx) !important
    }

    .adm {
      max-width: 1100px;
      margin: auto
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 12px
    }

    .cards div {
      background: var(--s);
      border: 1px solid var(--bd);
      border-radius: 8px;
      padding: 14px
    }

    .cards b {
      display: block;
      font-size: 1.6rem;
      color: var(--red)
    }

    .cards span {
      color: var(--mut);
      font-size: .82rem
    }

    .box {
      background: var(--s);
      border: 1px solid var(--bd);
      border-radius: 8px;
      padding: 14px 16px;
      overflow-x: auto
    }

    .box p {
      margin: 4px 0
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: .88rem
    }

    th,
    td {
      text-align: left;
      padding: 8px 10px;
      border-bottom: 1px solid var(--bd);
      vertical-align: top
    }

    th {
      color: var(--mut);
      font-weight: 600
    }

    tr.done {
      opacity: .5
    }

    .ar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 0;
      border-bottom: 1px solid var(--bd)
    }

    .ed {
      display: grid;
      gap: 10px;
      padding: 12px 0;
      border-bottom: 1px solid var(--bd)
    }

    .g3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      align-items: center
    }

    @media(max-width:700px) {
      .er .th {
        width: 72px;
        height: 40px
      }

      .g3 {
        grid-template-columns: 1fr
      }
    }

    /* küçük ekran: arama kutusu açılınca zil/avatar ekran dışına taşmasın */
    @media(max-width:700px) {
      .hero {
        min-height: 500px
      }

      .slide {
        padding: 74px var(--pad) 40px
      }

      .slide h2 {
        font-size: 1.6rem;
        -webkit-line-clamp: 2
      }

      .slide p {
        font-size: .85rem;
        -webkit-line-clamp: 2;
        margin-bottom: 14px
      }

      .dots {
        bottom: 16px;
        right: var(--pad)
      }
    }

    @media(max-width:480px) {
      header {
        gap: 12px
      }

      .tools {
        gap: 10px
      }

      .logo {
        font-size: 1.4rem
      }

      .slide h2 {
        font-size: 1.4rem
      }

      .btn {
        padding: 10px 18px;
        font-size: .8rem
      }
    }

    /* yönetim paneli, paylaşım, duyuru */
    .tabs {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      margin: 6px 0 18px;
      border-bottom: 1px solid var(--bd)
    }

    .tabs button {
      background: none;
      color: var(--mut);
      padding: 10px 14px;
      border-bottom: 2px solid transparent;
      font-weight: 600;
      cursor: pointer;
      border-top: 0;
      border-left: 0;
      border-right: 0
    }

    .tabs button:hover {
      color: var(--hi)
    }

    .tabs .on {
      color: var(--hi);
      border-bottom-color: var(--red)
    }

    .charts {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 12px;
      margin-top: 12px
    }

    .chart {
      background: var(--s);
      border: 1px solid var(--bd);
      border-radius: 8px;
      padding: 12px 14px
    }

    .chart .ct {
      display: flex;
      justify-content: space-between;
      align-items: baseline
    }

    .chart .ct span {
      font-size: 1.3rem;
      font-weight: 800;
      color: var(--red)
    }

    .chart svg {
      width: 100%;
      height: 64px;
      display: block;
      margin: 8px 0 4px
    }

    .chart rect {
      fill: var(--red)
    }

    .chart rect[height="1"] {
      fill: var(--bd)
    }

    .chart small {
      color: var(--mut);
      font-size: .74rem
    }

    .srch {
      max-width: 320px
    }

    .ar2 {
      border-bottom: 1px solid var(--bd)
    }

    .ar2 .ar {
      border: 0
    }

    .al {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0
    }

    .ci {
      width: 34px;
      height: 48px;
      border-radius: 3px;
      flex: none
    }

    .abt {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end
    }

    .sub {
      padding: 0 0 12px 46px;
      overflow-x: auto
    }

    .chk {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 6px 0;
      cursor: pointer
    }

    .chk input {
      width: auto;
      margin-top: 3px
    }

    .fg {
      display: grid;
      gap: 12px
    }

    .fld {
      display: grid;
      gap: 5px
    }

    .fld>span {
      font-weight: 600;
      font-size: .88rem
    }

    .sform .box {
      max-width: 760px
    }

    .shr {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      margin: 10px 0;
      color: var(--mut);
      font-size: .85rem
    }

    .shr a,
    .shr button {
      background: var(--s2);
      color: var(--tx);
      padding: 6px 12px;
      border-radius: 99px;
      font-size: .8rem;
      cursor: pointer;
      border: 0
    }

    .shr a:hover,
    .shr button:hover {
      background: var(--bd)
    }

    .an {
      position: fixed;
      left: 50%;
      bottom: 16px;
      transform: translateX(-50%);
      z-index: 90;
      max-width: min(720px, 92vw);
      display: flex;
      gap: 12px;
      align-items: center;
      background: #0d1a2b;
      border: 1px solid #1f4a80;
      padding: 10px 14px;
      border-radius: 8px;
      box-shadow: 0 8px 30px #000
    }

    .an.warn {
      background: #2a1a00;
      border-color: #6b4a00
    }

    .an.ok {
      background: #07240f;
      border-color: #1b6b34
    }

    .an button {
      background: none;
      color: #fff;
      font-size: 1.3rem;
      padding: 0 6px;
      cursor: pointer;
      border: 0
    }

    .adm select {
      width: auto;
      max-width: 200px
    }

    .adm .adm-note {
      margin: 0 0 14px
    }

    /* oynatıcı ve bölüm sayfası */
    .pl {
      max-width: 1500px !important
    }

    .player {
      background: #000;
      aspect-ratio: 16/9;
      display: block;
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      user-select: none
    }

    .player video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      background: #000
    }

    .player:fullscreen {
      aspect-ratio: auto;
      border: 0;
      border-radius: 0;
      width: 100vw;
      height: 100vh
    }

    .player.idle {
      cursor: none
    }

    .ctl button,
    .eph button {
      cursor: pointer;
      color: #fff;
      background: none;
      border: 0
    }

    .bigplay,
    .skipbtn {
      cursor: pointer;
      border: 0
    }

    .ctl svg {
      width: 24px;
      height: 24px;
      fill: currentColor;
      display: block
    }

    .bigplay svg {
      fill: currentColor
    }

    .bigplay {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 86px;
      height: 86px;
      border-radius: 50% !important;
      background: #ffffffd9 !important;
      color: #111 !important;
      display: grid;
      place-items: center;
      z-index: 2;
      transition: opacity .2s, transform .15s
    }

    .bigplay:hover {
      transform: translate(-50%, -50%) scale(1.06)
    }

    .bigplay svg {
      width: 42px;
      height: 42px
    }

    .player.playing .bigplay {
      opacity: 0;
      pointer-events: none
    }

    .ctl {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3;
      padding: 34px 18px 10px;
      background: linear-gradient(#0000, #000c);
      transition: opacity .25s
    }

    .player.idle .ctl,
    .player.idle .skipbtn {
      opacity: 0;
      pointer-events: none
    }

    .seek {
      position: relative;
      height: 16px;
      cursor: pointer;
      touch-action: none;
      display: flex;
      align-items: center
    }

    .seek::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 4px;
      background: #ffffff40;
      border-radius: 4px;
      transition: height .12s
    }

    .seek:hover::before {
      height: 6px
    }

    .seek .buf,
    .seek .prg {
      position: absolute;
      left: 0;
      height: 4px;
      border-radius: 4px;
      width: 0;
      transition: width .25s linear
    }

    .seek:hover .buf,
    .seek:hover .prg {
      height: 6px
    }

    .seek .buf {
      background: #ffffff59
    }

    .seek .prg {
      background: var(--red);
      transition: none
    }

    .seek .knob {
      position: absolute;
      top: 50%;
      width: 14px;
      height: 14px;
      margin: -7px 0 0 -7px;
      border-radius: 50%;
      background: var(--red);
      box-shadow: 0 0 0 2px #fff;
      left: 0;
      opacity: 0;
      transition: opacity .12s
    }

    .seek:hover .knob,
    .seek:focus .knob {
      opacity: 1
    }

    .seek .skm {
      position: absolute;
      top: 50%;
      height: 4px;
      margin-top: -2px;
      background: #3b6cff;
      border-radius: 2px;
      pointer-events: none
    }

    .seek:hover .skm {
      height: 6px;
      margin-top: -3px
    }

    .seek .tip {
      position: absolute;
      bottom: 20px;
      transform: translateX(-50%);
      background: #000d;
      padding: 3px 8px;
      border-radius: 4px;
      font-size: .78rem;
      pointer-events: none;
      white-space: nowrap
    }

    .cr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 4px
    }

    .cl,
    .cr2 {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0
    }

    .ctl button {
      padding: 6px;
      border-radius: 6px;
      display: grid;
      place-items: center
    }

    .ctl button:hover {
      background: #ffffff26
    }

    .ctl input[type=range] {
      width: 78px;
      height: 4px;
      accent-color: var(--red);
      padding: 0;
      background: none;
      border: 0
    }

    .ctm {
      font-size: .88rem;
      margin-left: 8px;
      white-space: nowrap;
      font-variant-numeric: tabular-nums
    }

    .ctit {
      font-size: .88rem;
      color: var(--tx);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 22vw;
      margin-right: 8px
    }

    .mw {
      position: relative;
      display: grid
    }

    .smenu {
      position: absolute;
      right: 0;
      bottom: 46px;
      width: min(300px, 86vw);
      background: var(--s);
      border: 1px solid var(--bd);
      border-radius: 10px;
      padding: 10px 12px;
      z-index: 5;
      max-height: 60vh;
      overflow: auto
    }

    .smenu[hidden] {
      display: none
    }

    .sg {
      padding: 6px 0
    }

    .sg b {
      display: block;
      font-size: .78rem;
      color: var(--mut);
      margin-bottom: 6px;
      font-weight: 600
    }

    .chips {
      display: flex;
      gap: 6px;
      flex-wrap: wrap
    }

    .chips button {
      background: #ffffff1a !important;
      padding: 6px 12px !important;
      border-radius: 99px !important;
      font-size: .8rem
    }

    .chips button.on {
      background: var(--red) !important
    }

    .chips button:disabled {
      opacity: .35;
      cursor: not-allowed
    }

    .skipbtn {
      position: absolute;
      right: 18px;
      bottom: 84px;
      z-index: 4;
      background: #000b !important;
      border: 1px solid #fff6 !important;
      padding: 10px 18px !important;
      border-radius: 6px !important;
      font-weight: 800;
      font-size: .82rem;
      letter-spacing: .04em;
      transition: opacity .25s
    }

    .skipbtn[hidden] {
      display: none
    }

    .skipbtn:hover {
      background: var(--red) !important
    }

    .eplay {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(300px, 80%);
      background: #000e;
      z-index: 5;
      overflow: auto;
      padding-bottom: 70px
    }

    .eplay[hidden] {
      display: none
    }

    .eph {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 14px;
      border-bottom: 1px solid var(--bd);
      position: sticky;
      top: 0;
      background: #000
    }

    .eph button {
      font-size: 1.4rem
    }

    .eplay a {
      display: block;
      padding: 11px 16px;
      color: var(--tx);
      border-bottom: 1px solid #161616
    }

    .eplay a:hover {
      background: var(--s2)
    }

    .eplay a.on {
      background: var(--red);
      color: #fff;
      font-weight: 700
    }

    .opts {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
      margin: 14px auto 4px;
      padding: 10px 16px;
      border-bottom: 1px solid var(--bd);
      max-width: 760px
    }

    .tgl {
      background: none;
      color: var(--tx);
      padding: 6px 8px;
      font-size: .9rem;
      cursor: pointer;
      border: 0;
      display: inline-flex;
      gap: 8px;
      align-items: center
    }

    .tgl b {
      background: var(--s2);
      padding: 2px 9px;
      border-radius: 4px;
      font-size: .72rem
    }

    .tgl[aria-pressed=true] b {
      background: var(--s2);
      color: #fff
    }

    .tgl[aria-pressed=false] b {
      background: var(--s2);
      color: var(--mut)
    }

    .wtip {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
      margin: 16px 0 10px;
      color: var(--tx);
      font-size: .92rem
    }

    .wtip select {
      width: auto;
      padding: 6px 10px
    }

    .wbar {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      align-items: center;
      margin: 10px 0
    }

    .srcs {
      display: flex;
      gap: 6px;
      flex-wrap: wrap
    }

    .srcs button {
      background: var(--s2);
      color: var(--tx);
      padding: 9px 18px;
      font-weight: 600;
      border-radius: 4px;
      cursor: pointer;
      border: 0
    }

    .srcs button.on {
      background: var(--red);
      color: #fff
    }

    .srcs button:disabled {
      opacity: .4;
      cursor: not-allowed
    }

    .wnav {
      display: flex;
      gap: 8px;
      flex-wrap: wrap
    }

    .wnav .btn {
      border-radius: 6px
    }

    .wgrid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 400px;
      gap: 26px;
      margin-top: 22px;
      align-items: start
    }

    .winfo .sec {
      padding: 0;
      margin-top: 26px
    }

    .wh {
      display: flex;
      gap: 22px;
      align-items: flex-start
    }

    .wposter {
      width: 170px;
      aspect-ratio: 2/3;
      border-radius: 6px;
      flex: none;
      background-color: var(--s2)
    }

    .wt {
      font-size: clamp(1.4rem, 3vw, 2.3rem) !important;
      text-transform: uppercase;
      line-height: 1.1
    }

    .wside {
      display: grid;
      gap: 14px;
      position: sticky;
      top: 80px
    }

    .wst {
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      gap: 8px;
      background: var(--s);
      border-radius: 8px 8px 0 0;
      overflow: hidden;
      margin-bottom: -14px
    }

    .wst span {
      padding: 10px 14px;
      background: var(--s2);
      font-size: .92rem;
      flex: 1
    }

    .wst button {
      padding: 10px 14px;
      background: var(--s2);
      color: var(--tx);
      cursor: pointer;
      border: 0;
      font-size: .85rem;
      flex: 1
    }

    .wst button:hover,
    .wst button.on {
      background: var(--red)
    }

    .wlist {
      background: var(--s);
      border-radius: 0 0 8px 8px;
      max-height: 420px;
      overflow: auto;
      padding: 10px;
      scrollbar-width: thin
    }

    .wi {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 12px;
      border-radius: 5px;
      color: var(--tx);
      font-size: .92rem
    }

    .wi:hover {
      background: var(--s2)
    }

    .wi.on {
      background: var(--s2);
      color: var(--hi);
      font-weight: 700;
      box-shadow: inset 3px 0 var(--red)
    }

    .wdet {
      position: relative;
      display: grid;
      place-items: center;
      height: 170px;
      border-radius: 8px;
      overflow: hidden;
      background-color: var(--s2) !important
    }

    .wdet::before {
      content: "";
      position: absolute;
      inset: 0;
      background: #0009
    }

    .wdet span {
      position: relative;
      display: flex;
      gap: 6px;
      align-items: center;
      font-weight: 700
    }

    .wdet svg {
      width: 18px;
      height: 18px;
      fill: #fff
    }

    @media(max-width:1000px) {
      .wgrid {
        grid-template-columns: 1fr
      }

      .wside {
        position: static
      }
    }

    @media(max-width:600px) {
      .opts {
        gap: 2px 12px;
        justify-content: flex-start;
        padding: 8px 0
      }

      .tgl {
        font-size: .8rem;
        padding: 4px 0
      }

      .cl {
        gap: 0
      }

      .ctl button {
        padding: 4px
      }

      .ctm {
        font-size: .74rem;
        margin-left: 0
      }

      .cr2 {
        gap: 0
      }

      .ctl {
        padding: 24px 10px 6px
      }

      .ctl input[type=range],
      .ctit {
        display: none
      }

      .bigplay {
        width: 64px;
        height: 64px
      }

      .wposter {
        width: 104px
      }

      .wh {
        gap: 14px
      }

      .cr {
        gap: 4px
      }

      .ctm {
        margin-left: 2px;
        font-size: .8rem
      }

      .ctl svg {
        width: 22px;
        height: 22px
      }

      .skipbtn {
        bottom: 70px;
        right: 10px
      }
    }

    /* ===== listeler, filtre, rastgele, ödeme ===== */
    .rnd {
      display: flex;
      gap: 16px;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      background: linear-gradient(90deg, var(--g1), var(--g2));
      border: 1px solid var(--bd);
      border-radius: 10px;
      padding: 18px 22px
    }

    .rnd b {
      display: block;
      font-size: 1.05rem
    }

    .rnd span {
      color: var(--mut);
      font-size: .88rem
    }

    .flt {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      margin: 0 0 14px
    }

    .flt input[type=search],
    .flt select {
      width: auto;
      min-width: 130px;
      max-width: 100%
    }

    .flt input[type=search] {
      flex: 1 1 200px
    }

    .flt .chk {
      padding: 0;
      color: var(--mut)
    }

    .mdl {
      position: fixed;
      inset: 0;
      background: #000c;
      z-index: 200;
      display: grid;
      place-items: center;
      padding: 16px
    }

    .mbox {
      position: relative;
      background: var(--s);
      border: 1px solid var(--bd);
      border-radius: 12px;
      max-width: 640px;
      width: 100%;
      padding: 22px
    }

    .mx {
      position: absolute;
      right: 10px;
      top: 6px;
      background: none;
      border: 0;
      color: var(--mut);
      font-size: 1.8rem;
      cursor: pointer
    }

    .mp {
      display: grid;
      grid-template-columns: 150px 1fr;
      gap: 20px
    }

    .mp .poster {
      aspect-ratio: 2/3;
      border-radius: 8px;
      width: 100%
    }

    .mp h2 {
      margin: 4px 0 8px
    }

    .mp .desc {
      font-size: .9rem;
      color: var(--mut);
      margin: 10px 0
    }

    @media(max-width:560px) {
      .mp {
        grid-template-columns: 100px 1fr;
        gap: 12px
      }
    }

    .pstats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
      gap: 12px;
      max-width: 560px;
      margin: 0 0 20px
    }

    .pstats div {
      background: var(--s);
      border: 1px solid var(--bd);
      border-radius: 8px;
      padding: 12px 14px
    }

    .pstats b {
      display: block;
      font-size: 1.5rem;
      color: var(--hi)
    }

    .pstats span {
      color: var(--mut);
      font-size: .8rem
    }

    .lsel {
      width: auto !important;
      min-width: 150px
    }

    .payfr {
      width: 100%;
      height: 80vh;
      min-height: 640px;
      border: 1px solid var(--bd);
      border-radius: 10px;
      background: #fff;
      margin-top: 18px
    }

    .plan .p {
      color: var(--hi)
    }

    /* ===== oynatıcı: önizleme, seri sonu ===== */
    .seek .tip.has {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0;
      background: #000;
      border: 1px solid var(--bd);
      overflow: hidden;
      bottom: 24px
    }

    .seek .tip.has[hidden] {
      display: none
    }

    .spi {
      display: block;
      width: 160px;
      height: 90px;
      background-repeat: no-repeat;
      background-size: 1600px auto
    }

    .tip em {
      font-style: normal;
      padding: 2px 8px;
      font-size: .78rem
    }

    .eos h3 {
      font-size: 1.3rem
    }

    .eosr {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 10px;
      max-width: 92%
    }

    .eosr a {
      width: 104px;
      font-size: .74rem;
      color: var(--tx)
    }

    .eosr i {
      display: block;
      aspect-ratio: 2/3;
      border-radius: 6px;
      margin-bottom: 4px
    }

    .eosr span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .spark rect {
      fill: var(--red)
    }

    /* ===== tema: beyaz-mor (açık) + koyu mod ===== */
    .player,
    .hero,
    .slide,
    .wdet,
    .an {
      --s: #120a20;
      --s2: #1f1533;
      --bd: #2f2348;
      --tx: #f3effc;
      --mut: #b2abc9;
      --hi: #fff;
      color: var(--tx)
    }

    .hero {
      --s2: #ffffff26;
      --bd: #ffffff40
    }

    .slide h2,
    .slide .in {
      color: #fff
    }

    .slide .btn.alt {
      background: #ffffff2e;
      color: #fff
    }

    .slide .btn.alt:hover {
      background: #ffffff4d
    }

    .btn,
    .new,
    .toast,
    .q4,
    .pill.on,
    .chip.on,
    .chip:hover,
    .ep:hover,
    .er:hover .n.w,
    .eplay a.on,
    .srcs button.on,
    .seg .on,
    .flag .d,
    .dd .btn {
      color: #fff
    }

    .rm,
    .flag span,
    .lk,
    .pc .poster,
    .land .cap,
    .land,
    .tags span,
    .badge {
      color: #fff
    }

    .pc .poster::after {
      background: linear-gradient(0deg, #14092acc, #0000 60%)
    }

    .land::after {
      background: linear-gradient(0deg, #14092acc, #0000 55%)
    }

    .tags span {
      background: #14092acc
    }

    .dp .tags span {
      background: var(--s2);
      color: var(--tx)
    }

    .dp .tags .age {
      background: var(--bd)
    }

    .slide .tags .age {
      background: #ffffff40
    }

    .tgl b {
      background: var(--s2);
      color: var(--mut)
    }

    .tgl[aria-pressed=true] b {
      background: var(--red);
      color: #fff
    }

    .tgl[aria-pressed=false] b {
      background: var(--s2);
      color: var(--mut)
    }

    .srcs button {
      background: var(--s2);
      color: var(--tx)
    }

    .srcs button.on {
      background: var(--red);
      color: #fff
    }

    .pill {
      background: var(--s2);
      color: var(--mut)
    }

    .pill.on {
      background: var(--red);
      color: #fff
    }

    .wst span,
    .wst button {
      background: var(--s2);
      color: var(--tx)
    }

    .wst {
      background: var(--s)
    }

    .wlist {
      background: var(--s)
    }

    .wi:hover {
      background: var(--s2)
    }

    .wi.on {
      background: var(--s2);
      color: var(--hi)
    }

    .wdet {
      color: #fff
    }

    .wdet::before {
      background: #14092a99
    }

    .bd .art {
      filter: brightness(.6) blur(2px)
    }

    :root:not([data-theme=dark]) .bd .art {
      filter: blur(2px);
      opacity: .3
    }

    .an.warn {
      background: #2a1a00
    }

    .an button {
      color: #fff
    }

    input::placeholder,
    textarea::placeholder {
      color: var(--mut);
      opacity: .8
    }

    ::selection {
      background: #7c3aed55
    }

    .sbox {
      background: var(--s);
      border: 1px solid var(--bd);
      color: var(--tx)
    }

    .lockbox {
      background: var(--s)
    }

    .box,
    .cards div,
    .chart,
    .plan,
    .cal>div,
    .c,
    .er,
    .pstats div {
      box-shadow: 0 1px 2px #3b1f7a0d
    }

    :root[data-theme=dark] .box,
    :root[data-theme=dark] .cards div,
    :root[data-theme=dark] .chart,
    :root[data-theme=dark] .plan,
    :root[data-theme=dark] .cal>div,
    :root[data-theme=dark] .c,
    :root[data-theme=dark] .er,
    :root[data-theme=dark] .pstats div {
      box-shadow: none
    }

    input[type=checkbox],
    input[type=radio],
    input[type=range],
    progress {
      accent-color: var(--red)
    }

    .spark rect {
      fill: var(--red)
    }

    .sec {
      content-visibility: auto;
      contain-intrinsic-size: auto 320px
    }

    #tm {
      display: grid;
      place-items: center;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      padding: 0;
      color: var(--tx);
      transition: background .15s
    }

    #tm:hover {
      background: var(--s2)
    }

    #tm svg {
      width: 1.15em;
      height: 1.15em
    }

    #tm .sun {
      display: none
    }

    :root[data-theme=dark] #tm .sun {
      display: block
    }

    :root[data-theme=dark] #tm .moon {
      display: none
    }

    .tools button {
      color: var(--tx)
    }

    html {
      transition: background-color .2s
    }

    body,
    header,
    footer,
    .box,
    .er,
    .dd,
    .sug,
    input,
    select,
    textarea {
      transition: background-color .2s, border-color .2s, color .2s
    }

    /* ===== ek özellikler ===== */
    .skip {
      position: absolute;
      left: 12px;
      top: -60px;
      z-index: 200;
      background: var(--red);
      color: #fff;
      padding: 10px 16px;
      border-radius: 6px;
      font-weight: 800
    }

    .skip:focus {
      top: 10px
    }

    #lg {
      font-weight: 800;
      font-size: .72rem;
      letter-spacing: .06em;
      padding: 6px 8px;
      border: 1px solid var(--bd);
      border-radius: 6px;
      background: none;
      cursor: pointer
    }

    @media(prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
      }
    }

    body.night .player video {
      filter: brightness(.82) sepia(.28) saturate(.92) contrast(.96)
    }

    .hvp {
      position: fixed;
      z-index: 90;
      width: 280px;
      background: var(--s);
      border: 1px solid var(--bd);
      border-radius: 10px;
      box-shadow: var(--sh);
      overflow: hidden;
      pointer-events: none
    }

    .hvp[hidden] {
      display: none
    }

    .hpa {
      height: 120px;
      background-size: cover !important;
      background-position: center !important
    }

    .hpb {
      padding: 12px 14px;
      display: grid;
      gap: 6px
    }

    .hpb b {
      color: var(--hi)
    }

    .hpb small {
      color: var(--mut)
    }

    .hpb p {
      font-size: .84rem;
      color: var(--tx);
      margin: 0
    }

    .hpb .tags {
      margin: 0
    }

    .xo {
      margin: 6px 0
    }

    .xo select {
      background: var(--s2);
      color: var(--tx);
      border: 1px solid var(--bd);
      border-radius: 4px;
      padding: 2px 4px;
      font: inherit
    }

    .bml {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      padding: 6px 0;
      font-size: .86rem
    }

    .bmi {
      display: inline-flex;
      align-items: center;
      background: var(--s2);
      border-radius: 99px;
      padding: 2px 4px 2px 12px
    }

    .bmi a {
      font-weight: 700
    }

    .bmi button {
      background: none;
      border: 0;
      color: var(--mut);
      cursor: pointer;
      padding: 2px 8px;
      font-size: 1rem
    }

    .bmk {
      position: absolute;
      top: -3px;
      width: 4px;
      height: 12px;
      background: #ffb300;
      border-radius: 2px;
      transform: translateX(-2px);
      pointer-events: none
    }

    .party {
      border: 1px solid var(--bd);
      background: var(--s);
      border-radius: 10px;
      padding: 12px;
      margin: 8px 0;
      display: grid;
      gap: 8px
    }

    .pth {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center
    }

    .pth code {
      font-size: 1.05rem;
      letter-spacing: .12em;
      background: var(--s2);
      padding: 2px 8px;
      border-radius: 4px;
      user-select: all
    }

    .ptl {
      max-height: 150px;
      overflow: auto;
      display: grid;
      gap: 4px;
      font-size: .88rem
    }

    .ptl b {
      color: var(--red)
    }

    #ptf {
      display: flex;
      gap: 8px
    }

    #ptf input {
      flex: 1
    }

    .adb {
      display: block;
      max-width: 728px;
      margin: 16px auto;
      position: relative;
      text-align: center
    }

    .adb small {
      position: absolute;
      top: 4px;
      left: 6px;
      background: #000a;
      color: #fff;
      font-size: .65rem;
      padding: 1px 6px;
      border-radius: 3px
    }

    .adb img {
      max-width: 100%;
      border-radius: 8px;
      display: inline-block;
      border: 1px solid var(--bd)
    }

    .agov {
      position: fixed;
      inset: 0;
      z-index: 300;
      background: #0d0817f2;
      display: grid;
      place-items: center;
      padding: 20px
    }

    .agb {
      background: var(--s);
      border-radius: 14px;
      padding: 28px;
      max-width: 440px;
      display: grid;
      gap: 14px;
      text-align: center
    }

    .agb .row {
      justify-content: center
    }

    .pbox {
      display: grid;
      gap: 8px;
      max-width: 560px
    }

    .pr {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .po {
      position: relative;
      flex: 1;
      text-align: left;
      border: 1px solid var(--bd);
      background: var(--s);
      border-radius: 8px;
      padding: 11px 14px;
      overflow: hidden;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      color: var(--tx);
      font: inherit;
      font-weight: 700
    }

    .po i {
      position: absolute;
      inset: 0 auto 0 0;
      background: var(--s2);
      z-index: 0;
      transition: width .5s
    }

    .po span,
    .po b {
      position: relative;
      z-index: 1
    }

    .po.on {
      border-color: var(--red)
    }

    .lb {
      list-style: none;
      margin: 0;
      padding: 0;
      max-width: 640px;
      display: grid;
      gap: 6px
    }

    .lb li {
      display: grid;
      grid-template-columns: 44px 1fr auto auto;
      gap: 12px;
      align-items: center;
      background: var(--s);
      border: 1px solid var(--bd);
      border-radius: 10px;
      padding: 10px 14px
    }

    .lb li.me {
      border-color: var(--red)
    }

    .lb .rk {
      font-weight: 800;
      font-size: 1.1rem
    }

    .lb a {
      font-weight: 700;
      color: var(--hi)
    }

    @media(max-width:600px) {
      .lb li {
        grid-template-columns: 36px 1fr auto
      }

      .lb li .mut {
        display: none
      }
    }

    .xpc {
      display: grid;
      gap: 10px
    }

    .xpbar {
      height: 10px;
      border-radius: 99px;
      background: var(--s2);
      overflow: hidden
    }

    .xpbar i {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, var(--red), #c084fc)
    }

    .bdg {
      display: inline-flex;
      gap: 6px;
      align-items: center;
      background: var(--s2);
      border: 1px solid var(--bd);
      border-radius: 99px;
      padding: 4px 12px;
      font-size: .82rem;
      font-weight: 700;
      margin: 0 6px 6px 0
    }

    .rxr {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 6px
    }

    .rxb {
      background: var(--s2);
      border: 1px solid transparent;
      border-radius: 99px;
      padding: 1px 8px;
      font-size: .8rem;
      cursor: pointer;
      color: var(--tx)
    }

    .rxb.on {
      border-color: var(--red);
      background: var(--bd)
    }

    .rpl {
      margin-left: 28px;
      border-left: 2px solid var(--bd);
      padding-left: 12px
    }

    .rbtn {
      background: none;
      border: 0;
      color: var(--mut);
      font-size: .8rem;
      cursor: pointer;
      padding: 0 6px
    }

    .rf {
      display: flex;
      gap: 8px;
      margin: 8px 0
    }

    .rf input {
      flex: 1
    }

    .dvt td,
    .dvt th {
      padding: 6px 8px;
      text-align: left;
      font-size: .85rem
    }

    .chipl {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 10px 0
    }

    .chipl a {
      background: var(--s2);
      border-radius: 99px;
      padding: 3px 12px;
      font-size: .82rem;
      font-weight: 700
    }

    .hx .box {
      margin-bottom: 14px;
      display: grid;
      gap: 10px
    }

    .hx select,
    .hx input[type=text] {
      max-width: 260px
    }

    .msn .mrow {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 10px;
      max-width: 760px
    }

    .mc {
      background: var(--s);
      border: 1px solid var(--bd);
      border-radius: 10px;
      padding: 12px;
      display: grid;
      gap: 8px
    }

    .mc.dn {
      border-color: var(--red)
    }

    .mc.cl {
      opacity: .65
    }

    .lb .ttl {
      font-size: .7rem;
      background: var(--s2);
      border-radius: 99px;
      padding: 1px 8px;
      margin-left: 6px;
      font-weight: 700;
      color: var(--mut)
    }

    .lb .av {
      margin-right: 6px
    }

    .lb .fb {
      background: none;
      border: 1px solid var(--bd);
      border-radius: 99px;
      padding: 2px 10px;
      font-size: .75rem;
      cursor: pointer;
      color: var(--tx)
    }

    .lb .fb.on {
      background: var(--s2)
    }

    .lb.big li {
      grid-template-columns: 44px 1fr auto auto auto
    }

    .lbm {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      margin: 10px 0
    }

    .cdn {
      display: inline-block;
      background: var(--s2);
      border: 1px solid var(--bd);
      border-radius: 99px;
      padding: 5px 14px;
      font-weight: 800;
      margin: 8px 0
    }

    .avp {
      display: flex;
      flex-wrap: wrap;
      gap: 6px
    }

    .avp button {
      font-size: 1.4rem;
      background: var(--s2);
      border: 2px solid transparent;
      border-radius: 10px;
      padding: 4px 8px;
      cursor: pointer
    }

    .avp button.on {
      border-color: var(--red)
    }

    .spl .rbtn {
      margin-left: 0;
      color: var(--tx);
      background: var(--s2);
      padding: 4px 12px;
      border-radius: 99px
    }

    .pbig {
      font-size: 2.4rem;
      line-height: 1
    }

    .pins {
      display: flex;
      gap: 12px;
      flex-wrap: wrap
    }

    @media(max-width:600px) {
      .lb.big li {
        grid-template-columns: 36px 1fr auto
      }

      .lb.big li .mut,
      .lb.big li .fb {
        display: none
      }
    }

    .soc {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-left: auto
    }

    .soc:empty {
      display: none
    }

    .soc a {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 8px;
      background: var(--s2);
      color: var(--tx);
      transition: transform .15s, background .15s
    }

    .soc a:hover {
      transform: translateY(-2px);
      background: var(--red);
      color: #fff
    }

    .soc svg {
      width: 17px;
      height: 17px;
      fill: currentColor
    }

    @media(max-width:900px) {
      .soc {
        display: none
      }
    }

    .ptn {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 14px;
      margin-top: 16px
    }

    .ptn a,
    .ptn div.pn {
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: var(--s2);
      border: 1px solid var(--bd, rgba(127, 127, 127, .2));
      border-radius: 12px;
      padding: 16px;
      color: var(--tx);
      text-decoration: none
    }

    .ptn a:hover {
      border-color: var(--red)
    }

    .ptn img {
      max-height: 52px;
      max-width: 100%;
      object-fit: contain;
      align-self: flex-start
    }

    .ptn b {
      font-size: 1rem
    }

    .ptn small {
      color: var(--mut, #888)
    }

    .srvs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      margin: 14px 0 4px
    }

    .srvs button {
      background: var(--s2);
      color: var(--tx);
      border: 0;
      border-radius: 6px;
      padding: 8px 16px;
      font-weight: 600;
      cursor: pointer
    }

    .srvs button.on {
      background: var(--red);
      color: #fff
    }

    .srvs button:disabled {
      opacity: .4;
      cursor: default
    }

    .tsb {
      background: var(--s2);
      color: var(--red);
      border: 0;
      border-radius: 6px;
      padding: 2px 8px;
      font-weight: 700;
      cursor: pointer;
      font-size: .8rem
    }

    .tsb:hover {
      background: var(--red);
      color: #fff
    }

    #rvw {
      margin-top: 22px
    }

    #rvf textarea {
      width: 100%
    }

    #rvf .row {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
      margin: 8px 0 16px
    }

    .rvc p {
      white-space: normal
    }

    .evb {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
      background: linear-gradient(90deg, var(--red), #a855f7);
      color: #fff;
      border-radius: 12px;
      padding: 14px 18px
    }

    .evb b {
      font-size: 1.05rem
    }

    .dgoal {
      max-width: 520px;
      margin: 20px 0
    }

    .dbar {
      height: 12px;
      background: var(--s2);
      border-radius: 99px;
      overflow: hidden
    }

    .dbar i {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, var(--red), #a855f7);
      border-radius: 99px
    }

    .dnum {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-top: 6px;
      font-size: .9rem
    }

    .dnum span {
      color: var(--mut, #888)
    }

    .dlinks {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 18px
    }

    .dsup {
      display: flex;
      gap: 8px;
      flex-wrap: wrap
    }

    .dsup span {
      background: var(--s2);
      border-radius: 99px;
      padding: 6px 14px;
      font-size: .9rem;
    }

      /* ===== Mobil ve Masaüstü Kusursuz Oynatıcı Arayüzü ===== */
      .player {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
        background: #000;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid rgba(124, 58, 237, 0.35);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85);
        display: block;
      }

      .player:has(.art-fullscreen-web),
      .player:has(.art-fullscreen),
      body:has(.art-fullscreen-web) .player {
        overflow: visible !important;
      }

      .artplayer-app-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 12px;
        overflow: hidden;
        background: #000;
      }

      #artplayer {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 12px;
        background: #000;
      }

      .artplayer-theater,
      .art-embed-container {
        position: relative;
        width: 100%;
        height: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 12px;
        overflow: hidden;
        background: #000;
      }

      /* ArtPlayer Fullscreen & Web-Fullscreen Master Rules */
      .artplayer.art-fullscreen-web,
      #artplayer.art-fullscreen-web {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        border-radius: 0 !important;
        z-index: 999999999 !important;
        margin: 0 !important;
      }

      #artplayer:fullscreen,
      #artplayer:-webkit-full-screen,
      .artplayer:fullscreen,
      .artplayer:-webkit-full-screen,
      .artplayer-app-wrapper:fullscreen,
      .player:fullscreen {
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        border-radius: 0 !important;
        background: #000 !important;
      }

      #artplayer video,
      .artplayer video {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
      }

      /* Floating Intro Skip Button in ArtPlayer */
      .art-intro-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: linear-gradient(135deg, rgba(124, 58, 237, 0.95), rgba(168, 85, 247, 0.92));
        backdrop-filter: blur(8px);
        color: #ffffff;
        border: 1px solid rgba(216, 180, 254, 0.6);
        padding: 9px 18px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 4px 18px rgba(124, 58, 237, 0.55);
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        letter-spacing: 0.4px;
        user-select: none;
        pointer-events: auto;
      }
      .art-intro-btn:hover {
        background: linear-gradient(135deg, #9333ea, #c084fc);
        transform: translateY(-2px) scale(1.05);
        box-shadow: 0 6px 24px rgba(147, 51, 234, 0.7);
      }

      .art-controls-right {
        flex-shrink: 0 !important;
        gap: 2px !important;
      }
      .art-control-fullscreen,
      .art-control-fullscreenWeb {
        cursor: pointer !important;
        opacity: 0.95 !important;
      }
      .art-control-fullscreen:hover,
      .art-control-fullscreenWeb:hover {
        opacity: 1 !important;
        color: #c084fc !important;
      }

      .art-fs-icon-btn {
        background: transparent !important;
        border: 0 !important;
        color: #ffffff !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 8px !important;
        height: 100% !important;
        opacity: 0.9 !important;
        transition: transform 0.15s ease, opacity 0.15s ease, color 0.15s ease !important;
      }
      .art-fs-icon-btn:hover {
        opacity: 1 !important;
        color: #c084fc !important;
        transform: scale(1.15) !important;
      }
      .art-fs-float {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 1000;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: linear-gradient(135deg, rgba(124, 58, 237, 0.95), rgba(168, 85, 247, 0.9));
        backdrop-filter: blur(10px);
        color: #fff;
        border: 1px solid rgba(216, 180, 254, 0.7);
        padding: 8px 15px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 15px rgba(124, 58, 237, 0.5);
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        user-select: none;
      }
      .art-fs-float:hover {
        background: linear-gradient(135deg, #9333ea, #c084fc);
        transform: translateY(-2px) scale(1.05);
        box-shadow: 0 6px 25px rgba(147, 51, 234, 0.75);
      }

      .artplayer-theater iframe,
      .art-embed-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
        background: #000;
      }

      .watch-header-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin: 14px 0 10px;
        flex-wrap: wrap;
      }

      .watch-title-group {
        flex: 1;
        min-width: 180px;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
      }

      .watch-anime-title {
        margin: 0;
        font-size: clamp(1.15rem, 2.2vw, 1.55rem);
        font-weight: 800;
        color: #fff;
        line-height: 1.2;
      }

      .badge-ep {
        font-size: 0.78rem;
        font-weight: 800;
        padding: 4px 10px;
        border-radius: 6px;
        background: linear-gradient(135deg, #7c3aed, #a855f7);
        color: #fff;
        letter-spacing: 0.5px;
        box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4);
      }

      .watch-nav-btns {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .watch-nav-btns .btn {
        padding: 8px 14px;
        font-size: 0.85rem;
        border-radius: 6px;
      }

      /* Yatay Bölüm Seçici (Mobile Friendly Carousel) */
      .ep-scroll-wrap {
        margin: 10px 0 14px;
        background: rgba(18, 10, 30, 0.65);
        border: 1px solid rgba(124, 58, 237, 0.22);
        border-radius: 10px;
        padding: 10px 12px;
      }

      .ep-scroll-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        font-size: 0.82rem;
        color: var(--mut);
        font-weight: 600;
      }

      .ep-scroll-list {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
      }

      .ep-btn {
        flex: none;
        min-width: 44px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
        background: var(--s2);
        color: var(--tx);
        border-radius: 6px;
        font-size: 0.84rem;
        font-weight: 700;
        text-decoration: none;
        border: 1px solid transparent;
        transition: all 0.15s ease;
      }

      .ep-btn:hover {
        background: rgba(124, 58, 237, 0.4);
        color: #fff;
      }

      .ep-btn.active {
        background: #7c3aed;
        color: #fff;
        border-color: #a855f7;
        box-shadow: 0 2px 10px rgba(124, 58, 237, 0.5);
      }

      /* Kontrol & Sunucu Çubuğu */
      .stream-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        margin: 10px 0;
        padding: 10px 14px;
        background: var(--s);
        border-radius: 8px;
        border: 1px solid var(--bd);
      }

      .stream-srvs,
      .stream-audio {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
      }

      .stream-srvs button,
      .stream-audio button {
        background: var(--s2);
        color: var(--tx);
        padding: 7px 14px;
        font-weight: 600;
        border-radius: 6px;
        cursor: pointer;
        border: 0;
        font-size: 0.85rem;
        transition: all 0.15s ease;
      }

      .stream-srvs button.on,
      .stream-audio button.on {
        background: #7c3aed;
        color: #fff;
      }

      .stream-audio button:disabled {
        opacity: 0.35;
        cursor: not-allowed;
      }

      @media (max-width: 768px) {

        .player,
        .artplayer-app-wrapper,
        #artplayer,
        .artplayer-theater,
        .art-embed-container {
          border-radius: 8px;
          aspect-ratio: 16 / 9;
        }

        .watch-header-bar {
          flex-direction: column;
          align-items: stretch;
          gap: 8px;
        }

        .watch-nav-btns {
          width: 100%;
          display: flex;
        }

        .watch-nav-btns .btn {
          flex: 1;
          text-align: center;
          justify-content: center;
        }

        .stream-bar {
          flex-direction: column;
          align-items: stretch;
          gap: 10px;
        }

        .stream-srvs,
        .stream-audio {
          width: 100%;
          display: flex;
        }

        .stream-srvs button,
        .stream-audio button {
          flex: 1;
          text-align: center;
          padding: 8px 6px;
          font-size: 0.8rem;
        }

        .opts {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          padding: 4px 0;
        }

        .tgl {
          flex: 1;
          min-width: 90px;
          font-size: 0.74rem;
          padding: 6px;
          text-align: center;
        }

        .kb {
          display: none !important;
        }

        .wgrid {
          display: flex;
          flex-direction: column;
          gap: 18px;
          padding-bottom: 90px !important;
        }

        .wside {
          display: none;
          /* Mobilde üstteki yatay şerit devralır */
        }

        .winfo {
          width: 100%;
        }

        .wh {
          flex-direction: column;
          align-items: center;
          text-align: center;
        }

        .wposter {
          width: 130px;
          margin: 0 auto;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
        }

        .wh .tags,
        .wh .meta {
          justify-content: center;
        }

        .wh .desc {
          text-align: left;
          font-size: 0.92rem;
        }

        /* Detail Page on Mobile */
        .detail {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          gap: 16px;
        }

        .detail .poster {
          width: 150px;
          margin: 0 auto;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
        }

        .detail .tags,
        .detail .meta {
          justify-content: center;
        }

        .detail .desc {
          text-align: left;
          font-size: 0.92rem;
        }

        .detail .row {
          width: 100%;
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        .detail .row .btn,
        .detail .row .lsel {
          width: 100%;
          justify-content: center;
          text-align: center;
        }
      }

      /* ===== Gelişmiş Ana Sayfa Bileşenleri ===== */
      .home-stats-strip {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
        margin: 18px 0 28px;
        padding: 14px 18px;
        background: linear-gradient(135deg, rgba(22, 14, 38, 0.85), rgba(33, 23, 54, 0.75));
        border: 1px solid rgba(139, 92, 246, 0.28);
        border-radius: 14px;
        backdrop-filter: blur(12px);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
      }
      .hstat-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 12px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid transparent;
        text-decoration: none;
        color: inherit;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .hstat-item:hover {
        background: rgba(139, 92, 246, 0.15);
        border-color: rgba(168, 85, 247, 0.4);
        transform: translateY(-2px);
      }
      .hs-icon {
        font-size: 1.8rem;
        line-height: 1;
        flex-shrink: 0;
      }
      .hstat-item b {
        display: block;
        font-size: 1.08rem;
        font-weight: 800;
        color: #fff;
        background: linear-gradient(135deg, #ffffff, #d8b4fe);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .hstat-item span {
        font-size: 0.78rem;
        color: var(--mut);
        font-weight: 600;
      }

      /* Tür Kartları Vitrini */
      .home-genre-showcase {
        margin: 28px 0;
      }
      .genre-cards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
        gap: 12px;
        margin-top: 14px;
      }
      .gcard {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 15px;
        border-radius: 12px;
        background: var(--s);
        border: 1px solid var(--bd);
        color: var(--tx);
        text-decoration: none;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
      }
      .gcard::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 0.25s ease;
        border-radius: 12px;
      }
      .gcard:hover {
        transform: translateY(-3px) scale(1.02);
        border-color: #a855f7;
        box-shadow: 0 10px 24px rgba(124, 58, 237, 0.25);
      }
      .gcard:hover::before {
        opacity: 0.16;
      }
      .gcard .gicon {
        font-size: 1.6rem;
        line-height: 1;
        flex-shrink: 0;
        z-index: 1;
      }
      .gcard .ginfo {
        z-index: 1;
        min-width: 0;
      }
      .gcard b {
        display: block;
        font-size: 0.95rem;
        font-weight: 700;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .gcard small {
        font-size: 0.74rem;
        color: var(--mut);
      }

      .g-act::before { background: linear-gradient(135deg, #ef4444, #f97316); }
      .g-fan::before { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
      .g-adv::before { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
      .g-com::before { background: linear-gradient(135deg, #f59e0b, #eab308); }
      .g-rom::before { background: linear-gradient(135deg, #ec4899, #f43f5e); }
      .g-sci::before { background: linear-gradient(135deg, #10b981, #06b6d4); }
      .g-sup::before { background: linear-gradient(135deg, #6366f1, #a855f7); }
      .g-dra::before { background: linear-gradient(135deg, #3b82f6, #6366f1); }

      /* Günün Takvimi Hızlı Seçici */
      .home-cal-sec {
        margin: 28px 0;
      }
      .cal-day-selector {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 6px 0 14px;
        scrollbar-width: none;
      }
      .cal-day-selector::-webkit-scrollbar { display: none; }
      .cday-btn {
        padding: 7px 16px;
        border-radius: 99px;
        background: var(--s2);
        border: 1px solid var(--bd);
        color: var(--tx);
        font-size: 0.84rem;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.2s ease;
      }
      .cday-btn:hover {
        border-color: #a855f7;
        color: #fff;
        background: rgba(124, 58, 237, 0.15);
      }
      .cday-btn.on {
        background: linear-gradient(135deg, #7c3aed, #a855f7);
        color: #fff;
        border-color: #c084fc;
        box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
      }
      .sh-more {
        color: #c084fc;
        font-size: 0.86rem;
        font-weight: 700;
        text-decoration: none;
        transition: color 0.15s ease, transform 0.15s ease;
        display: inline-flex;
        align-items: center;
        gap: 3px;
      }
      .sh-more:hover {
        color: #e9d5ff;
        transform: translateX(3px);
      }

      /* SEO Rehberi & SSS Bölümü */
      .seo-guide-sec {
        margin: 48px 0 24px;
      }
      .seo-guide-card {
        background: linear-gradient(145deg, rgba(22, 14, 38, 0.85), rgba(33, 23, 54, 0.65));
        border: 1px solid rgba(139, 92, 246, 0.25);
        border-radius: 16px;
        padding: 36px 30px;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(14px);
      }
      .seo-badge {
        display: inline-block;
        padding: 4px 14px;
        border-radius: 99px;
        background: rgba(139, 92, 246, 0.16);
        border: 1px solid rgba(168, 85, 247, 0.4);
        color: #c084fc;
        font-size: 0.74rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        margin-bottom: 12px;
        text-transform: uppercase;
      }
      .seo-guide-card h2 {
        font-size: 1.55rem;
        font-weight: 800;
        line-height: 1.35;
        margin-bottom: 12px;
        background: linear-gradient(90deg, #fff, #e9d5ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .seo-lead {
        color: var(--mut);
        font-size: 0.95rem;
        line-height: 1.68;
        max-width: 960px;
        margin-bottom: 26px;
      }
      .seo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 18px;
        margin-bottom: 30px;
      }
      .seo-feature {
        background: rgba(13, 8, 23, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 12px;
        padding: 20px;
        transition: transform 0.2s ease, border-color 0.2s ease;
      }
      .seo-feature:hover {
        transform: translateY(-2px);
        border-color: rgba(139, 92, 246, 0.45);
      }
      .sf-icon {
        font-size: 1.8rem;
        margin-bottom: 10px;
      }
      .seo-feature h3 {
        font-size: 1.05rem;
        font-weight: 700;
        color: #f5ebff;
        margin-bottom: 8px;
      }
      .seo-feature p {
        font-size: 0.88rem;
        color: var(--mut);
        line-height: 1.55;
      }
      .seo-faq-block {
        border-top: 1px solid rgba(139, 92, 246, 0.18);
        padding-top: 24px;
        margin-top: 8px;
      }
      .seo-faq-block h3 {
        font-size: 1.2rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .faq-accordion {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .faq-item {
        background: rgba(13, 8, 23, 0.65);
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 10px;
        padding: 14px 18px;
        cursor: pointer;
        transition: all 0.2s ease;
      }
      .faq-item[open] {
        border-color: rgba(139, 92, 246, 0.4);
        background: rgba(22, 14, 38, 0.7);
      }
      .faq-item summary {
        font-size: 0.95rem;
        font-weight: 600;
        color: #f1edfb;
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        user-select: none;
      }
      .faq-item summary::-webkit-details-marker {
        display: none;
      }
      .faq-item summary::after {
        content: "+";
        font-size: 1.25rem;
        color: #c084fc;
        font-weight: 700;
        transition: transform 0.2s;
      }
      .faq-item[open] summary::after {
        content: "−";
      }
      .faq-item p {
        margin-top: 10px;
        font-size: 0.88rem;
        color: var(--mut);
        line-height: 1.6;
      }