*{margin:0;padding:0;box-sizing:border-box; font-family: "Inter", sans-serif;}
body{background:#0b0f16;color:white;}

/* NAVBAR */
.studio-navbar{display:flex;justify-content:space-between;align-items:center;padding:15px 60px;background:#0e1118;border-bottom:1px solid rgba(255,255,255,0.1);}
.studio-navbar-div{gap: 30px;display: flex;align-items: center;}
.studio-logo{width: 60px;height: auto;margin-right: 30px;}
.studio-logo-text{color: #dcc935;font-size: 25px;margin-bottom: 0px;text-decoration: none;padding-top: 2px;letter-spacing: 2px;font-weight: 700;font-family: cursive;}
.studio-nav{gap: 20px;display: flex;align-items: center;}
.studio-nav-a{margin:0 15px;color:#ccc;text-decoration:none;cursor: pointer;border-bottom: 2px solid #0e1118;margin-top: 8px;transition:all 0.3s ease;font-size: 15px;}
.studio-nav-a:hover{color:#FFF;border-bottom:2px solid #dcc935;transform:scale(1.1);}
.studio-active{color:#FFF !important;border-bottom:2px solid #dcc935 !important;}
.studio-auth{display: flex;align-items: center;gap: 25px;}
.studio-auth-btn{width: auto;height: auto;padding: 4px 20px;background-color: transparent;color: #FFF;border: 1px solid #ae9c0f;border-radius: 20px;cursor: pointer;transition:all 0.3s ease;font-size: 13px;}
.studio-auth-register, .studio-auth-sign:hover{background-color: #ae9c0f;transform:scale(1.1);}
.studio-auth-register:hover{background-color: transparent;transform:scale(1.1);}


.studio-menu-icon{display: none;background-color: transparent;border-width: 0px;color: #FFF;}

.studio-offcanvas-div{display: flex;flex-direction: column;}
.studio-offcanvas-div a{padding:15px 25px;text-decoration:none;color:#ccc;border-bottom:1px solid rgba(255,255,255,0.05);}
.studio-offcanvas a:hover{background:#151a24;color:#fff;}

.studio-bg-container{width: 100%;background: #0b0f16;padding: 35px 0px;}

/* HERO */
.studio-hero{min-height:90vh;display:flex;align-items:center;justify-content: center; padding:60px;background:rgba(0,0,0,0.55);}
.studio-hero-content{width: 100%;display: flex;align-items: center;flex-direction: column;justify-content: center;}
.studio-hero h1{font-size: 48px;margin-bottom: 25px;text-align: center;color: #FFF;font-weight: 700;}
.studio-hero p{color: #ccc;margin-bottom: 25px;font-size: 17px;letter-spacing: 0.4px;}
.studio-hero-buttons{display: flex;align-items: center;gap: 30px;}

/* BUTTONS */
.studio-btn-red{background:#ae9c0f;border:none;padding:12px 20px;color:white;border-radius:6px;cursor:pointer;transition:all 0.3s ease;margin-top: 15px;}
.studio-btn-outline{background:transparent;border:1px solid #aaa;padding:12px 20px;color:white;border-radius:6px;transition:all 0.3s ease;margin-top: 15px;}
.studio-btn-red:hover{background:transparent;border:1px solid #aaa;transform:scale(1.1);box-shadow:0 8px 20px rgba(0,0,0,0.3);}
.studio-btn-outline:hover{background:#ae9c0f;border:none;transform:scale(1.1);box-shadow:0 8px 20px rgba(0,0,0,0.3);}


/* SECTIONS */
.studio-section{padding:50px 60px;}
.studio-section-header{display:flex;justify-content:space-between;margin-bottom:20px;}
.studio-section-header h2{font-size: 25px;font-weight: 600;color: #FFF;letter-spacing: 0.4px;margin-bottom: 0px;}
.studio-section-header hr{margin: 0px;border: 2px solid #dcc935;margin-bottom: 20px;width: 40%;opacity: 1;}
.studio-section-header a{text-decoration: none;color: #ccc;font-size: 14px;letter-spacing: 0.4px;transition:all 0.3s ease;}
.studio-section-header a:hover{color: #dcc935;transform:scale(1.1);}

/* CARDS */

.studio-card-row, .studio-series-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.studio-card-row a, .studio-series-grid a{text-decoration: none;}
.studio-story-card{position: relative;width: auto;border-radius: 12px;overflow: hidden;cursor: pointer;text-decoration: none;background: linear-gradient(to top, rgb(0 0 0 / 90%), #0b0f16d6, rgba(0, 0, 0, 0));padding-bottom: 5px;transition: transform 0.3s ease, box-shadow 0.3s ease;}
.studio-story-card iframe {width: 100%;height: 160px;border-radius: 0px;object-fit: cover;}

/* Image */
.studio-story-card img{width:100%;display:block;transition:transform 0.4s ease;}

/* Zoom effect */
.studio-story-card:hover{transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);}

/* Text overlay */
.studio-card-info{width: 100%;padding: 4px 6px;color: #fff;background: linear-gradient(to top, rgb(0 0 0 / 90%), #0b0f16d6, rgba(0, 0, 0, 0));}
.studio-card-info h3{margin: 0;font-size: 18px;color: #dcc935;font-weight: 700;letter-spacing: 0.4px;}
.studio-card-info h6{color: #fff;font-size: .8rem;font-weight: 600;letter-spacing: 0.4px;}
.studio-card-info p{margin:5px 0 0;font-size:14px;opacity:0.9;}

/* TOPICS */
.studio-topics{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.studio-topics a{text-decoration: none;}
.studio-topics a:hover{text-decoration: none;}

.studio-topic-each-card{background-color: #000;min-height: 120px;padding: 10px;display: flex;align-items: center;justify-content: center;color: #dcc935;border-radius: 15px;box-shadow: 1px 1px 10px 1px #1e1e1e;transition: transform 0.4s ease;}
.studio-topic-each-card:hover{transform: scale(1.05);box-shadow: 1px 1px 10px 1px #495057;}
.studio-topic-each-card h3{font-weight: 600;margin-bottom: 0px;letter-spacing: 0.4px;font-size: 1.1rem;text-align: center;}

/* FEATU#dcc935 */
.studio-featured{display:grid;grid-template-columns:1fr 1fr;gap:20px;}

.studio-double-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.studio-continue-card-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.studio-small .studio-story-card img{height:120px;}


/* ===== TRENDING SLIDER ===== */
.studio-trending-wrapper{position:relative;width:100%;display:flex;align-items:center;}
.studio-trending-container{width: 100%;display: flex;flex-wrap: wrap;}
.studio-trending-track{display:grid;gap:20px;transition:transform .4s ease;grid-template-columns:repeat(4,1fr);}
.studio-trending-track .studio-story-card{min-width:calc(25% - 15px);flex-shrink:0;}
.studio-trending-track img{width: 100%;height: 200px;object-fit: cover;}

/* arrows */
.studio-slide-btn{position:absolute;top:50%;transform:translateY(-50%);background:#000000b0;border:none;color:white;font-size:26px;width:45px;height:45px;cursor:pointer;border-radius:50%;z-index:10;}
.studio-slide-btn:hover{background-color: #ae9c0f;}
.studio-left{left:-15px;}
.studio-right{right:-15px;}


/* Container */
.feed-bg-container{width: 100%;padding: 20px 10px;padding-top: 70px;}

/* ===== SEARCH ===== */
.feed-search-wrapper{margin-bottom: 20px;}
.feed-search-input{width:100%;padding:12px 14px;border-radius:8px;border:1px solid #333;background:#1e1e1e;color:#fff;font-size:14px;outline:none;}
.feed-search-input::placeholder{color:#777;}
.feed-video {width: 100%;height: 155px;border-radius: 0px;object-fit: cover;}
.studio-video {width: 100%;height: 300px;border-radius: 12px;}

@media (min-width: 768px) {
    .studio-video {
        height: 400px;
    }
}

/* Masonry layout */
.masonry {column-count: 1;column-gap: 20px;}
.story-card-a {display: inline-block;width: 100%;margin-bottom: 24px;break-inside: avoid;-webkit-column-break-inside: avoid;}
/* Card */
.story-card{background:#1e1e1e;border-radius:12px;overflow:hidden;margin-bottom:20px;box-shadow:0 4px 12px rgba(0,0,0,0.5);transition: transform 0.4s ease;}
.story-card:hover{transform: scale(1.05);box-shadow: 1px 1px 10px 1px #495057;}
.story-card-a{text-decoration: none;cursor: pointer;}
.story-card-a:hover{text-decoration: none;cursor: pointer;}

/* Carousel */
.carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;}
.carousel::-webkit-scrollbar{display:none;}
.slide{min-width:100%;scroll-snap-align:start;}

/* Media */
.slide img,
.slide video{width:100%;display:block;}
/* Text */
.slide-content{padding:16px;}
.slide-content h2{font-size:18px;margin-bottom:8px;color: #dcc935;}
.slide-content p{font-size:14px;color:#bbb;}

.slide-content-topic-div{display: flex;align-items: center;justify-content: space-between;}
.slide-content-topic-div h3{background: #242424;padding: 6px 10px;border-radius: 6px;color: #ccc;font-size: 12px;}

/* ===== DOTS ===== */
.dots{text-align:center;padding:10px 0 14px;}
.dot{height:8px;width:8px;margin:0 4px;background:#666;border-radius:50%;display:inline-block;transition:0.3s;}
.dot.active{background:#fff;}
.story-link{text-decoration: none;color: inherit;align-items: center;display: flex;justify-content: center;padding: 15px 0px;padding-bottom: 30px;}
.story-link-button{width: auto;cursor: pointer;font-size: 14px;background: #121212;padding: 8px 14px;border-radius: 20px;border: 1px solid #333;color: #FFF;transition: transform 0.15s ease, box-shadow 0.15s ease;}
.story-link-button:hover{background: #333; transform: scale(1.05);}



/* story details */
.details-container{width:100%;}
.studio-story-wrapper{padding-top: 60px;}
.studio-carousel{position:relative;overflow:hidden;width:100%;}
.studio-media{display:flex;width:100%;transition:transform 0.5s ease;}
.studio-slide{flex:0 0 100%;display:flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;}
.studio-image,
.studio-content{flex:1;}
.studio-image img{width:100%;max-width:450px;border-radius:12px;display:block;}
.studio-image iframe{width: 100%;height: 446px;object-fit: cover;}
.title{font-size:21px;margin-bottom:12px;color:#dcc935;font-weight:700;font-family:system-ui;letter-spacing:1.5px;}
.description{color:#bbb;line-height:1.6;margin-bottom:16px;}
.actions{display:flex;gap:20px;width:100%;align-items:center;justify-content:center;margin:25px 0px;}
.action-btn{cursor:pointer;font-size:14px;background:#1e1e1e;padding:8px 14px;border-radius:20px;border:1px solid #333;color:#FFF;}
.action-btn:hover{background:#000;}

/* Carousel Buttons */
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:#111;color:#fff;border:none;font-size:26px;width:45px;height:45px;border-radius:50%;cursor:pointer;z-index:5;}
.carousel-btn:hover{background:#dcc935;}
.prev{left:10px;}
.next{right:10px;}
.carousel-dots{position:absolute;bottom:1px;left:50%;transform:translateX(-50%);display:flex;gap:8px;}
.carousel-dots span{width:10px;height:10px;background:#555;border-radius:50%;cursor:pointer;transition:0.3s;}
.carousel-dots span.active{background:#fff;transform:scale(1.2);}


/* ===================== */
/* LOGIN / SIGNUP PAGE */
/* ===================== */
.studio-login-container{width:100%;min-height:90vh;display:flex;align-items:center;justify-content:center;padding:40px;background:#0b0f16;}

/* CARD */
.studio-login-card{width:100%;max-width:420px;background:#111;padding:35px;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,0.6);text-align:center;}

/* TITLES */
.studio-login-title{font-size:28px;font-weight:700;color:#dcc935;margin-bottom:6px;}
.studio-login-subtitle{color:#aaa;font-size:14px;margin-bottom:25px;}


/* FORM */
.studio-login-form{display:flex;flex-direction:column;gap:18px;}
.studio-login-field{text-align:left;display:flex;flex-direction:column;gap:6px;}
.studio-login-field label{font-size:13px;color:#bbb;}
.studio-login-field input{padding:12px;border-radius:8px;border:1px solid #333;background:#1e1e1e;color:#fff;font-size:14px;outline:none;}
.studio-login-field input:focus{border:1px solid #dcc935;}

/* BUTTON */
.studio-login-btn{margin-top:10px;padding:12px;border:none;border-radius:8px;background:#dcc935;color:#000;font-weight:600;cursor:pointer;transition:0.3s;}
.studio-login-btn:hover{transform:scale(1.05);box-shadow:0 8px 20px rgba(0,0,0,0.4);}

/* FOOTER */
.studio-login-footer{margin-top:18px;font-size:14px;color:#aaa;}
.studio-login-footer a{color:#dcc935;text-decoration:none;margin-left:4px;}
.studio-login-footer a:hover{text-decoration:underline;}

/* ============================= */
/* TOPIC PAGE */
/* ============================= */

.topic-hero{width:100%;padding:80px 20px;text-align:center;background:#0b0f16;border-bottom:1px solid rgba(255,255,255,0.08);}
.topic-hero-content h1{font-size:40px;font-weight:700;color:#dcc935;margin-bottom:10px;letter-spacing:1px;}
.topic-hero-content p{color:#bbb;font-size:16px;}

/* ===== SERIES SEARCH ===== */
.studio-series-container{padding-top: 60px;}
.studio-series-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;gap:20px;}
.studio-series-search{width:260px;}
.studio-series-search input{width:100%;padding:10px 14px;border-radius:8px;border:1px solid #333;background:#1e1e1e;color:#fff;font-size:14px;outline:none;}
.studio-series-search input::placeholder{color:#777;}
.studio-series-search input:focus{border:1px solid #dcc935;}
.loader-wrap{display:flex;justify-content:center;align-items:center;min-height:220px;}
.loader{width:42px;height:42px;border:4px solid rgba(0,0,0,.12);border-top:4px solid #4c6fff;border-radius:50%;animation:spin 0.8s linear infinite;}

@keyframes spin{
    100%{transform:rotate(360deg);}
}



/* about */
.studio-about-section {width: 100%;min-height: 100vh;display: flex;align-items: center;justify-content: flex-start;box-sizing: border-box;background-color: #FFF;padding: 0px 13%;gap: 15px;}
.studio-about-content{width: 60%;}
.studio-about-content h1 {font-size: 50px;font-weight: 700;color: #0b0f16;margin: 0 0 5px 0;letter-spacing: 3px;font-family: cursive;}
.studio-about-content h2 {font-size: 28px;color: #e53935;font-weight: 600;line-height: 1.3;margin-bottom: 20px;}
.studio-about-content p {font-size: 22px;color: #555;line-height: 1.2;margin: 0;font-weight: 400;}
.studio-about-img-div{width: 40%;}
.studio-about-img-div img{width: 100%;height: auto;border-radius: 10px;}



/* footer */
.studio-footer-bg-container{padding: 40px 60px;background: #0e1118;width: 100%;height: auto;display: flex;gap: 10px;justify-content: space-around;}
.studio-logo-div{display: flex;align-items: center;justify-content: center;}
.studio-logo-div h1{color: #dcc935;font-family: cursive;font-weight: 600;letter-spacing: 2px;font-size: 40px;}
.studio-footer-bg-container ul{list-style-type: none;padding: 0px;margin: 0px;}
.studio-footer-bg-container ul li{margin-bottom: 8px;}
.studio-footer-social-div h2{font-size: 17px;color: #ccc;letter-spacing: 1.2px;text-align: center;font-weight: 600;}
.studio-footer-social-icon-div{display: flex;align-items: center;gap: 12px;margin-top: 21px;}
.studio-footer-social-icon-div svg{width: 20px;height: 20px;fill: #FFF;transition:all 0.3s ease;}
.studio-footer-social-icon-div svg:hover{fill: #dcc935;transform:scale(1.1);}
.studio-story-right-bg-container{width: 100%;height: 90vh;padding: 10px 15px;}
.studio-footer-ul-div{display: flex;gap: 60px;}



/* RESPONSIVE */
@media (max-width: 992px) {

    .studio-card-row, .studio-series-grid{grid-template-columns:repeat(2,1fr);}
    .studio-topics{grid-template-columns:repeat(3,1fr);}
    .studio-featured{grid-template-columns:1fr;}
    .studio-double-grid{grid-template-columns:1fr;}
    .studio-navbar{padding: 15px 10px;}
    .studio-trending-track .studio-story-card{min-width:calc(50% - 10px);}
    .studio-trending-track{grid-template-columns: repeat(3, 1fr);}
    .studio-footer-bg-container{padding: 20px;}

}

@media (max-width: 764px) {

    .studio-navbar{padding:15px 20px;}
    .studio-hero{padding: 80px 20px;min-height: auto;}
    .studio-hero h1{font-size:30px;}
    .studio-card-row, .studio-series-grid{grid-template-columns:1fr;}
    .studio-topics{grid-template-columns:repeat(2,1fr);}
    .studio-section{padding:40px 20px;}
    .studio-continue-card-row {grid-template-columns: repeat(2, 1fr);}
    .studio-nav{display: none;}
    .studio-menu-icon{display: block;}
    .studio-auth{gap: 15px;}
    .studio-auth-btn{font-size: 10px;}
    .studio-series-header {flex-direction: column;}
    .studio-trending-track .studio-story-card{min-width:100%;}
    .studio-trending-track{grid-template-columns: repeat(1, 1fr);width: 100%;}
    .studio-footer-bg-container{padding: 12px 20px;flex-direction: column;align-items: flex-start;justify-content: flex-start;border-top: 1px solid #333;}
    .studio-footer-ul-div {gap: 5px;margin: 18px 0px;}
    .studio-footer-social-div{display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;border-top: 1px solid #333;padding-top: 13px;}
    .studio-footer-social-div h2{margin-bottom: 0px;}
    .studio-story-card iframe{height: 200px;}
}



/* Tablet */
@media (min-width: 576px) {
    .masonry {column-count: 2;}
}

/* Small Laptop */
@media (min-width: 992px) {
    .masonry {column-count: 4;}
}


/* Desktop Layout */
@media(min-width:768px){
    .feed-main-bg-container{padding: 20px 70px;padding-top: 80px;}
    .feed-container{width:100%;}
    .arrow{display:block;}
    .feed-search-wrapper{width: 100%;;}

    .custom-navbar{padding: 14px 70px;}
    .masonry {column-count: 4;}
    .title {text-align: left;font-size: 28px;}
    .actions{gap: 60px;}
    .feed-bg-container{padding: 50px 80px;}
}



/* MOBILE SLIDER (your original design) */
@media (max-width:768px){

    .studio-carousel{overflow:visible;}
    .studio-media{flex-direction:row;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0px;transform:none !important;}
    .studio-slide{flex-direction:column;min-width:85%;background:#121212;border-radius:16px;padding:2px;scroll-snap-align:center;box-shadow:0 10px 25px rgba(0,0,0,0.08);}
    .studio-image img{max-width:100%;}
    .studio-description{text-align:center;margin-top:15px;}
    .carousel-btn{display:none;}

    /* hide scrollbar */
    .studio-media::-webkit-scrollbar{display:none;}
    .studio-media{-ms-overflow-style:none;scrollbar-width:none;}
    .studio-story-wrapper {padding: 60px 10px;}
    .studio-image iframe {height: 180px;}

}

/* MOBILE */
@media(max-width:600px){
    .studio-login-card{padding:25px;}
    .studio-series-header{flex-direction:column;align-items:flex-start;gap:15px;}
    .studio-series-search{width:100%;}
}