@import url(font.css);
a{  text-decoration: none;}
body {margin: 0;font-family: 'iranyekan' !important;background: #f5f5f5}
.container {margin: auto}
img.thumb {width: 100%;border-radius: 10px}
h1 { font-size: 24px; }
.info { margin: 10px 0; }
.label { font-weight: bold; }
.logo {display: flex;justify-content: center}
.logo img{width: 100%;max-width: 20%;}
.main-input {width: 100%;max-width: 760px;margin: 0 auto;padding: 12px 20px;font-size: 18px;border: 1px solid #dfe1e5;border-radius: 24px;outline: none;box-shadow: none;transition: box-shadow 0.2s ease-in-out;text-align: center}
ul.list-group h1{text-align: center;font-size: 20px !important;}
.main-input:focus {border-color: #4285f4;box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28)}
.tophead{display: flex;justify-content: center;padding-top: 20px;height: 50px}
.tophead .pagelogo{font-size: 48px;font-weight: bold;display: flex;justify-content: center;direction: ltr;float: right;margin: -10px}
.pagelogo img{width: 100%;max-width: 20%;float: right;margin: 10px}
.badge-purple { background-color: #6f42c1; color: white; }
.badge-pink { background-color: #e83e8c; color: white; }
.btn-primary {background-color: #4285f4;border-color: #4285f4;font-size: 16px;border-radius: 24px}
.btn-primary:hover {background-color: #357ae8;border-color: #357ae8}
.list-group-item {font-size: 15px;line-height: 1.6}
 li.title{text-align: center;font-size: 19px}
.back-button {padding: 10px 20px;background-color: #11adb4;color: white;border: none;border-radius: 5px;cursor: pointer;font-size: 16px;float: left}
.back-button:hover {background-color: #095f63}
.list-group-flush{border-radius: 12px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2)}
ul.list-group li strong {display: inline-block;padding-left: 7px;color: #333}
.thumb {width: 100%;max-height: 100%;object-fit: cover;aspect-ratio: 16/9;border-radius: 12px;box-shadow: 0 4px 12px rgba(0,0,0,0.2)}
.thumb-btn {flex: 1;padding: 8px 12px;border-radius: 5px;color: white;font-size: 14px;text-align: center;text-decoration: none;display: inline-block}
.thumb-btn.green {background-color: #4caf50}
.thumb-btn.blue {background-color: #2196f3}
.video-embed-wrapper {position: relative;padding-top: 56.25%;border-radius: 16px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);overflow: hidden;margin-top: 20px}
.video-embed-wrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0}
.seo-title {font-size: 1.8rem;font-weight: bold;color: #343a40;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1)}
.seo-score-title {font-size: 1.5rem;font-weight: 600;color: #212529}
.seo-score-text {font-size: 1rem;color: #6c757d}
.seo-card {animation: fadeInUp 0.5s ease-in-out;animation-fill-mode: both;border: none;border-radius: 10px;background-color: #fff;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease, box-shadow 0.3s ease}
.seo-card:hover {transform: translateY(-5px);box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15)}
.seo-icon {font-size: 1.5rem;color: #007bff}
.card-title {font-size: 1.2rem;font-weight: 600;color: #212529}
.status-text {font-size: 1.1rem;font-weight: 500;margin-bottom: 0.5rem}
.card-text {font-size: 0.9rem;color: #6c757d}
#seoChart {max-width: 250px;margin: 0 auto}
.seo-card:nth-child(1) { animation-delay: 0.1s; }
.seo-card:nth-child(2) { animation-delay: 0.2s; }
.seo-card:nth-child(3) { animation-delay: 0.3s; }
.seo-card:nth-child(4) { animation-delay: 0.4s; }
.seo-card:nth-child(5) { animation-delay: 0.5s; }
.seo-card:nth-child(6) { animation-delay: 0.6s; }
.seo-card:nth-child(7) { animation-delay: 0.7s; }
.seo-card:nth-child(8) { animation-delay: 0.8s; }
.seo-card:nth-child(9) { animation-delay: 0.9s; }
.seo-card:nth-child(10) { animation-delay: 1.0s; }
.seo-card:nth-child(11) { animation-delay: 1.1s; }
.seo-card:nth-child(12) { animation-delay: 1.2s; }
.seo-card:nth-child(13) { animation-delay: 1.3s; }
.channel-info {border-radius: 8px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);background-color: #fff}
.channel-detail{display: flex;align-items: center;justify-content: center;flex-direction: column}
.channel-thumbnail {width: 100px;height: 100px;border-radius: 50%;object-fit: cover;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);}
.channel_name, .channel_id{direction: ltr;}
.card-title {font-size: 1.25rem;margin: 0.5rem;text-align: center}
.card-text {font-size: 0.9rem;color: #555}
.list-group-item {font-size: 1rem;padding: 12px 15px;border: none;border-bottom: 1px solid #eee}
.list-group-item strong {margin-left: 10px;color: #333}
.list-group-item img {max-width: 100%;border-radius: 4px}
.btn-primary {background-color: #ff0000;border-color: #ff0000}
.btn-primary:hover {background-color: #e60000;border-color: #e60000}
.thumb-btn {padding: 8px 12px;border-radius: 4px;color: #fff;text-align: center;flex: 1}
.banner-container {width: 100%;max-width: 1546px; overflow: hidden;border-radius: 10px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);margin: 0 auto}
.banner-image {width: 100%;height: 100%;object-fit: cover;object-position: center;display: block}
.channel-head{background: #fff;display: flex;border-top-right-radius: 10px;border-top-left-radius: 10px;padding: 15px;align-items: stretch}
.channel-detail {display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;padding: 10px}
.channel-banner {flex-grow: 1;display: flex;align-items: center;justify-content: center}
.last-chvideo .card-title{height: 55px !important}
.last-chvideo a{width: 100%;border-radius: 5px}
.mostview{margin-top: 235px}
.mostview a{font-size: 12px}
.mostview h2{margin:0;padding:0}
.mostview h4{height:60px}
@keyframes fadeInUp {from {opacity: 0;transform: translateY(20px);}to {   opacity: 1;transform: translateY(0)}}
@media (max-width: 1546px) {.banner-container {max-width: 100%;width: 100%;height: auto}}
@media (max-width: 768px) {
.tophead .pagelogo {margin: -10px 60px}
.back-button {padding: 10px 20px;background-color: #11adb4;color: white;border: none;border-radius: 5px;cursor: pointer;font-size: 16px;float: left;margin-right: 100px}
.seo-title {font-size: 1.5rem}
.seo-score-title {font-size: 1.3rem}
.seo-card {margin-bottom: 1rem}
#seoChart {max-width: 200px !important;width: 200px !important;height: 200px !important}
.channel-detail span{margin: 0;padding: 0;display: block}
.channel-thumbnail {width: 60px;height: 60px}
.card-title {font-size: 1.1rem}
.list-group-item {font-size: 0.95rem}
.banner-container {max-width: 100%;aspect-ratio: 1546 / 423}
.banner-image {object-fit: cover;object-position: center}
.channel-head {flex-direction: column;align-items: center}
.channel-detail {margin-bottom: 15px}
.channel-banner {width: 100%}
}
@media (max-width: 600px) {h1 { font-size: 20px; }}