/* ==========================================================
   TUTORIAL BREADCRUMB
========================================================== */

.tutorial-breadcrumb{

    background:#f8fafc;

    border-bottom:1px solid #e5e7eb;

    padding:15px 20px;

    font-size:15px;

}

.tutorial-breadcrumb .container{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    align-items:center;

}

.tutorial-breadcrumb a{

    color:#16c47f;

    text-decoration:none;

    font-weight:600;

}

.tutorial-breadcrumb strong{

    color:#10283d;

}

/* ==========================================================
   HERO
========================================================== */

.tutorial-hero{

    background:linear-gradient(135deg,#07131f,#10283d);

    color:#ffffff;

    padding:80px 20px;

}

.tutorial-hero-content{

    max-width:1280px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.tutorial-hero-image{

    display:flex;

    justify-content:center;

}

.tutorial-hero-image img{

    width:100%;

    max-width:600px;

    height:auto;

}

.tutorial-hero h1{

    font-size:54px;

    margin-bottom:20px;

}

.tutorial-hero p{

    font-size:20px;

    color:#d6d6d6;

    line-height:1.8;

}

/* ==========================================================
   CONTENT
========================================================== */

.tutorial-content{

    background:#f3f6fb;

    padding:70px 20px;

}

.tutorial-layout{

    display:grid;

    grid-template-columns:260px minmax(0,850px);

    gap:45px;

    justify-content:center;

    align-items:start;

}

.tutorial-sidebar{

    position:sticky;

    top:120px;

    background:#f8fafc;

    padding:25px;

    border-radius:12px;

}

.tutorial-sidebar h3{

    margin-bottom:20px;

}

.tutorial-sidebar ul{

    list-style:none;

    padding:0;

}

.tutorial-sidebar li{

    margin-bottom:12px;

}

.tutorial-sidebar a{

    text-decoration:none;

    color:#10283d;

}

.tutorial-article{

    background:#ffffff;

    padding:40px;

    border-radius:14px;

    box-shadow:0 5px 20px rgba(0,0,0,.06);

}

.tutorial-article h2{

    font-size:38px;

    color:#0f172a;

    margin:60px 0 25px;

    padding-bottom:10px;

    border-bottom:2px solid #e5e7eb;

}

.tutorial-article h3{

    margin:35px 0 15px;

    color:#10283d;

}

.tutorial-article p{

    font-size:19px;

    line-height:2;

    margin-bottom:24px;

    color:#374151;

}

.tutorial-article ul{

    margin:20px 0 30px 30px;

}

.tutorial-article li{

    margin-bottom:12px;

    line-height:1.8;

}

/* ==========================================================
   META
========================================================== */

.tutorial-meta{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:35px;

    color:#666;

    font-size:15px;

}

/* ==========================================================
   CODE
========================================================== */

.code-example{

    margin:60px 0;

}

.code-example pre{

    background:#0f172a;

    color:#e5e7eb;

    padding:25px;

    border-radius:10px;

    overflow-x:auto;

    margin-top:20px;

}

.code-example code{

    font-family:Consolas,monospace;

    font-size:15px;

}

/* ==========================================================
   TIP
========================================================== */

.tutorial-tip{

    background:#ecfdf5;

    border-left:5px solid #16c47f;

    padding:25px;

    margin:40px 0;

    border-radius:8px;

}

/* ==========================================================
   WARNING
========================================================== */

.tutorial-warning{

    background:#fff7ed;

    border-left:5px solid #f97316;

    padding:25px;

    margin:40px 0;

    border-radius:8px;

}

/* ==========================================================
   BEST PRACTICES
========================================================== */

.best-practices{

    margin:60px 0;

}

.best-practices ul{

    margin-left:30px;

}

/* ==========================================================
   FAQ
========================================================== */

.tutorial-faq{

    margin:70px 0;

}

.faq-item{

    background:#f8fafc;

    padding:25px;

    border-radius:10px;

    margin-bottom:20px;

}

/* ==========================================================
   NAVIGATION
========================================================== */

.tutorial-navigation{

    display:flex;

    justify-content:space-between;

    gap:20px;

    margin:80px 0;

    flex-wrap:wrap;

}

.tutorial-navigation a{

    background:#16c47f;

    color:#ffffff;

    text-decoration:none;

    padding:15px 25px;

    border-radius:8px;

    font-weight:700;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:900px){

    .tutorial-hero-content{

        grid-template-columns:1fr;

        text-align:center;

    }

    .tutorial-layout{

        grid-template-columns:1fr;

    }

    .tutorial-sidebar{

        position:static;

    }

    .tutorial-hero h1{

        font-size:40px;

    }

}

@media(max-width:600px){

    .tutorial-hero h1{

        font-size:32px;

    }

    .tutorial-article h2{

        font-size:28px;

    }

    .tutorial-article p{

        font-size:17px;

    }

}