/* ============================================================
      ============================================================
      VİDEO DETAY SAYFASI (page-video) — YouTube benzeri
      ============================================================
      ============================================================ */
   body.page-video { background: #0F0F0F; color: #F1F1F1; }
   body.page-video #breadcrumb { background: #181818; border-bottom-color: #303030; }
   body.page-video .bc-list, body.page-video .bc-list a { color: #AAA; }
   body.page-video .bc-list a:hover { color: #fff; }
   body.page-video .bc-current { color: #fff; }

   #video-main { padding: 18px 0 28px; }
   .vd-grid {
     display: grid; grid-template-columns: 1fr 380px;
     gap: 24px; align-items: start;
   }
   .vd-content { min-width: 0; }

   .vd-player {
     position: relative; width: 100%;
     padding-top: 56.25%;
     background: #000; border-radius: 10px; overflow: hidden;
     margin-bottom: 14px;
   }
   .vd-player iframe {
     position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
   }
   .vd-title {
     font-family: 'Source Sans 3', sans-serif;
     font-size: 22px; font-weight: 700; line-height: 1.35;
     color: #fff; margin-bottom: 12px;
   }

   .vd-stats {
     display: flex; justify-content: space-between; align-items: center;
     gap: 16px; margin-bottom: 12px; flex-wrap: wrap;
   }
   .vd-stat-left { display: flex; align-items: center; gap: 8px; color: #AAA; font-size: 14px; flex-wrap: wrap; }
   .vd-stat-left strong { color: #fff; }
   .vd-tag-chip {
     color: #3EA6FF; font-size: 13.5px; cursor: pointer;
   }
   .vd-tag-chip:hover { text-decoration: underline; }

   .vd-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
   .vd-btn {
     background: #272727; border: none; color: #fff;
     padding: 8px 14px; border-radius: 18px;
     font-family: inherit; font-size: 14px; font-weight: 600;
     cursor: pointer; transition: background .15s;
     display: inline-flex; align-items: center; gap: 7px;
   }
   .vd-btn:hover { background: #3F3F3F; }
   .vd-btn.liked { background: #3EA6FF1A; color: #3EA6FF; }
   .vd-likes {
     display: flex; background: #272727; border-radius: 18px; overflow: hidden;
   }
   .vd-likes .vd-btn { background: transparent; border-radius: 0; }
   .vd-likes .vd-btn:hover { background: #3F3F3F; }
   .vd-likes .vd-btn + .vd-btn { border-left: 1px solid #3F3F3F; padding: 8px 12px; }

   .vd-channel {
     display: flex; align-items: center; gap: 12px;
     padding: 16px 0; border-top: 1px solid #303030; border-bottom: 1px solid #303030;
     margin-bottom: 14px;
   }
   .vd-ch-logo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
   .vd-ch-info { flex: 1; min-width: 0; }
   .vd-ch-info strong { display: block; font-size: 15px; color: #fff; margin-bottom: 2px; }
   .vd-ch-info small { font-size: 12px; color: #AAA; }
   .vd-verified { color: #AAA; font-size: 12px; margin-left: 4px; }
   .vd-subscribe {
     background: #F1F1F1; color: #0F0F0F; border: none;
     padding: 10px 18px; border-radius: 18px;
     font-weight: 700; font-size: 13.5px; cursor: pointer;
     font-family: inherit; transition: background .15s;
     display: inline-flex; align-items: center; gap: 8px;
   }
   .vd-subscribe:hover { background: #DBDBDB; }

   .vd-desc {
     background: #272727; border-radius: 12px;
     padding: 12px 14px; margin-bottom: 22px;
     cursor: pointer; transition: background .15s;
     position: relative;
   }
   .vd-desc:hover { background: #313131; }
   .vd-desc-stats {
     display: flex; gap: 14px; font-size: 13px; color: #F1F1F1;
     font-weight: 700; margin-bottom: 8px;
   }
   .vd-desc-stats span i { margin-right: 4px; opacity: .9; }
   .vd-desc-body {
     font-size: 14px; line-height: 1.55; color: #F1F1F1;
     max-height: 60px; overflow: hidden; position: relative;
     transition: max-height .3s;
   }
   .vd-desc-body p { margin-bottom: .5em; }
   .vd-desc.expanded .vd-desc-body { max-height: 1200px; }
   .vd-desc-more {
     background: none; border: none; color: #fff;
     font-family: inherit; font-size: 13px; font-weight: 700;
     cursor: pointer; padding: 6px 0; margin-top: 4px;
   }

   .vd-comments {
     margin-bottom: 24px;
   }
   .vd-com-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
   .vd-com-head h3 { font-size: 18px; color: #fff; }
   .vd-com-sort { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13px; }
   .vd-com-sort select {
     background: transparent; color: #fff; border: none;
     padding: 4px; font-family: inherit; font-size: 13px; cursor: pointer;
   }
   .vd-com-sort select option { background: #272727; color: #fff; }

   .vd-com-form { display: flex; gap: 12px; margin-bottom: 24px; }
   .vd-com-form img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
   .vd-com-input { flex: 1; }
   .vd-com-input input {
     width: 100%; background: transparent; border: none;
     border-bottom: 1px solid #303030;
     padding: 8px 0; color: #fff; font-family: inherit; font-size: 14px;
   }
   .vd-com-input input:focus { outline: none; border-bottom-color: #fff; }
   .vd-com-actions {
     display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px;
   }
   .vd-com-input .btn-primary { background: #3EA6FF; color: #0F0F0F; }
   .vd-com-input .btn-outline { color: #fff; border-color: #303030; background: transparent; }

   .vd-com-list { display: flex; flex-direction: column; gap: 18px; }
   .vd-com { display: flex; gap: 12px; }
   .vd-com img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
   .vd-com > div { flex: 1; min-width: 0; }
   .vd-com header { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
   .vd-com header strong { font-size: 13px; color: #fff; }
   .vd-com header time { font-size: 12px; color: #AAA; }
   .vd-com p { font-size: 14px; line-height: 1.5; color: #F1F1F1; margin-bottom: 6px; }
   .vd-com footer { display: flex; gap: 12px; }
   .vd-com footer button {
     background: none; border: none; color: #AAA;
     padding: 6px 0; font-family: inherit; font-size: 12.5px; font-weight: 600;
     cursor: pointer; transition: color .15s;
     display: inline-flex; align-items: center; gap: 4px;
   }
   .vd-com footer button:hover { color: #fff; }
   .vd-com-replies {
     display: inline-block; margin-top: 6px;
     color: #3EA6FF; font-size: 13px; font-weight: 600;
     padding: 6px 12px; border-radius: 16px;
     transition: background .15s;
   }
   .vd-com-replies:hover { background: #3EA6FF1A; }

   /* Sidebar */
   .vd-sidebar { display: flex; flex-direction: column; gap: 12px; }
   .vd-chips {
     display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px;
     padding-bottom: 8px; border-bottom: 1px solid #303030;
   }
   .vd-chip {
     background: #272727; color: #fff; border: none;
     padding: 6px 14px; border-radius: 16px;
     font-family: inherit; font-size: 13px; cursor: pointer;
     transition: background .15s;
   }
   .vd-chip:hover { background: #3F3F3F; }
   .vd-chip.active { background: #F1F1F1; color: #0F0F0F; }

   .vd-up-list { display: flex; flex-direction: column; gap: 8px; }
   .vd-up {
     display: flex; gap: 10px; text-decoration: none; color: inherit;
     transition: background .15s; padding: 4px; border-radius: 8px;
   }
   .vd-up:hover { background: #272727; }
   .vd-up-thumb {
     position: relative; width: 168px; height: 94px; flex-shrink: 0;
     border-radius: 6px; overflow: hidden; background: #000;
   }
   .vd-up-thumb img { width: 100%; height: 100%; object-fit: cover; }
   .vd-up-dur {
     position: absolute; bottom: 4px; right: 4px;
     background: rgba(0,0,0,.8); color: #fff;
     font-size: 11px; padding: 2px 5px; border-radius: 3px;
     font-weight: 600;
   }
   .vd-up-info { flex: 1; min-width: 0; }
   .vd-up-info strong {
     display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
     font-size: 14px; color: #fff; line-height: 1.4; margin-bottom: 4px;
   }
   .vd-up-info small {
     display: block; font-size: 12px; color: #AAA;
   }

   @media (max-width: 1100px) {
     .vd-grid { grid-template-columns: 1fr; }
     .vd-up-thumb { width: 168px; height: 94px; }
   }
   @media (max-width: 600px) {
     .vd-title { font-size: 17px; }
     .vd-up { padding: 0; }
     .vd-up-thumb { width: 140px; height: 80px; }
     .vd-stats { flex-direction: column; align-items: flex-start; }
   }


/* Shared light comments component on the dark video page gets its own paper panel. */
body.page-video .nd-comments { background: #fff; color: var(--text); border-radius: 6px; padding: 24px; }