UI değişikliği

client/src/routes/Files.svelte

@@ -961,7 +961,11 @@ let isPlaying = false;
     transition:
       border-color 0.18s ease,
       background 0.18s ease,
-      box-shadow 0.18s ease;
+      box-shadow 0.18s ease,
+      flex-direction 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      gap 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      min-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     cursor: pointer;
   }
   .media-card::after {
@@ -1007,6 +1011,7 @@ let isPlaying = false;
     border-radius: 8px;
     object-fit: cover;
     flex-shrink: 0;
+    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
   .media-card:hover {
     transform: none;
@@ -1061,6 +1066,7 @@ let isPlaying = false;
     width: 100%;
     height: 150px;
     object-fit: cover;
+    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
   .thumb.placeholder {
     display: flex;
@@ -1074,6 +1080,7 @@ let isPlaying = false;
     display: flex;
     flex-direction: column;
     gap: 4px;
+    transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), gap 0.3s cubic-bezier(0.4, 0, 0.2, 1), flex 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
   .name {
     font-weight: 600;
@@ -1085,6 +1092,7 @@ let isPlaying = false;
   .size {
     font-size: 12px;
     color: #666;
+    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
   .media-card.list-view .info {
     flex: 1;
@@ -1099,6 +1107,9 @@ let isPlaying = false;
   }
   .list-meta {
     display: none;
+    opacity: 0;
+    max-height: 0;
+    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
   .media-card.list-view .list-meta {
     display: flex;
@@ -1106,6 +1117,8 @@ let isPlaying = false;
     gap: 4px;
     font-size: 13px;
     color: #7a7a7a;
+    opacity: 1;
+    max-height: 200px;
   }
   .meta-line.primary {
     display: flex;

client/src/routes/TvShows.svelte

@@ -689,13 +689,6 @@ async function openVideoAtIndex(index) {
               role="tab"
               aria-selected={selectedSeason?.seasonNumber === season.seasonNumber}
             >
-              {#if season.poster}
-                <span
-                  class="season-thumb"
-                  style={`background-image: url(${assetUrl(season.poster)});`}
-                  aria-hidden="true"
-                ></span>
-              {/if}
               <span class="season-label">
                 {season.name || `Season ${season.seasonNumber}`}
               </span>
@@ -1165,10 +1158,11 @@ async function openVideoAtIndex(index) {
     display: flex;
     gap: 12px;
     overflow-x: auto;
-    padding: 6px 2px 10px;
+    padding: 10px 2px 14px;
     scrollbar-width: thin;
     background: rgba(0, 0, 0, 0.25);
     border-radius: 14px;
+    min-height: 80px;
   }
 
   .season-picker button {
@@ -1176,15 +1170,16 @@ async function openVideoAtIndex(index) {
     color: #f5f5f5;
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 14px;
-    padding: 6px 14px 6px 10px;
+    padding: 8px 16px;
     font-size: 14px;
     cursor: pointer;
     transition: background 0.2s ease, border-color 0.2s ease;
     flex-shrink: 0;
     display: inline-flex;
     align-items: center;
-    gap: 10px;
+    gap: 8px;
-    min-height: 62px;
+    min-height: 60px;
+    justify-content: center;
   }
 
   .season-picker button.selected {
@@ -1193,17 +1188,6 @@ async function openVideoAtIndex(index) {
     border-color: rgba(0, 0, 0, 0.15);
   }
 
-  .season-thumb {
-    width: 44px;
-    height: 60px;
-    border-radius: 10px;
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    flex-shrink: 0;
-    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
-  }
-
   .season-label {
     font-weight: 600;
     display: inline-flex;
@@ -1520,4 +1504,190 @@ async function openVideoAtIndex(index) {
       width: 100%;
     }
   }
+
+  /* Responsive design for smaller screens */
+  @media (max-width: 1200px) {
+    .tv-overlay-content {
+      width: min(920px, 92vw);
+      padding: 24px;
+      gap: 20px;
+    }
+
+    .detail-poster {
+      flex: 0 0 200px;
+    }
+
+    .episode-list {
+      max-height: 240px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .tv-overlay {
+      padding: 20px 16px;
+    }
+
+    .tv-overlay-content {
+      width: min(100%, 96vw);
+      max-height: 95vh;
+      padding: 20px;
+      gap: 16px;
+    }
+
+    .detail-body {
+      gap: 16px;
+    }
+
+    .detail-poster {
+      flex: 0 0 160px;
+    }
+
+    .detail-title {
+      font-size: 24px;
+    }
+
+    .detail-submeta {
+      font-size: 14px;
+    }
+
+    .detail-overview {
+      font-size: 14px;
+    }
+
+    .episode-list {
+      max-height: 200px;
+      gap: 12px;
+    }
+
+    .episode-card {
+      padding: 10px;
+      gap: 12px;
+    }
+
+    .episode-still {
+      flex: 0 0 140px;
+    }
+
+    .episode-title {
+      font-size: 15px;
+    }
+
+    .episode-meta {
+      font-size: 12px;
+      gap: 8px;
+    }
+
+    .episode-overview {
+      font-size: 13px;
+    }
+
+    .season-picker {
+      gap: 8px;
+      padding: 8px 2px 12px;
+      min-height: 70px;
+    }
+
+    .season-picker button {
+      padding: 6px 12px;
+      min-height: 54px;
+      font-size: 13px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .tv-overlay {
+      padding: 16px 12px;
+    }
+
+    .tv-overlay-content {
+      width: 100%;
+      max-height: 98vh;
+      padding: 16px;
+      gap: 14px;
+      border-radius: 16px;
+    }
+
+    .detail-body {
+      gap: 14px;
+    }
+
+    .detail-poster {
+      flex: 0 0 120px;
+    }
+
+    .detail-title {
+      font-size: 20px;
+    }
+
+    .detail-submeta {
+      font-size: 13px;
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+
+    .detail-overview {
+      font-size: 13px;
+      line-height: 1.5;
+    }
+
+    .detail-tech {
+      gap: 8px;
+    }
+
+    .detail-tech-item {
+      padding: 4px 10px;
+      font-size: 12px;
+    }
+
+    .episode-list {
+      max-height: 180px;
+      gap: 10px;
+    }
+
+    .episode-card {
+      padding: 8px;
+      gap: 10px;
+      border-radius: 12px;
+    }
+
+    .episode-still {
+      flex: 0 0 100px;
+      border-radius: 8px;
+    }
+
+    .episode-title {
+      font-size: 14px;
+    }
+
+    .episode-meta {
+      font-size: 11px;
+      gap: 6px;
+    }
+
+    .episode-overview {
+      font-size: 12px;
+      line-height: 1.4;
+    }
+
+    .season-picker {
+      gap: 6px;
+      padding: 6px 1px 10px;
+      min-height: 64px;
+    }
+
+    .season-picker button {
+      padding: 4px 10px;
+      min-height: 48px;
+      font-size: 12px;
+      border-radius: 10px;
+    }
+
+    .season-label {
+      font-size: 12px;
+    }
+
+    .season-count {
+      font-size: 11px;
+    }
+  }
 </style>