/*==================================================
  ORKATOOL CONTENT.CSS
  VERSION: 1.0
  PART: 1A
==================================================*/

/*==================================
  RESET
==================================*/

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    font-size:16px;
    line-height:1.7;
    color:var(--text);
    background:var(--body-bg);
    overflow-x:hidden;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/*==================================
  VARIABLES
==================================*/

:root{

    /* Brand */

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --primary-light:#60a5fa;

    /* Background */

    --body-bg:#f8fafc;
    --card-bg:#ffffff;
    --section-bg:#f1f5f9;

    /* Text */

    --text:#0f172a;
    --text-light:#475569;
    --text-muted:#64748b;

    /* Border */

    --border:#e2e8f0;

    /* Status */

    --success:#16a34a;
    --warning:#f59e0b;
    --danger:#dc2626;
    --info:#0891b2;

    /* Radius */

    --radius-sm:8px;
    --radius:14px;
    --radius-lg:20px;
    --radius-xl:28px;

    /* Shadow */

    --shadow-sm:
        0 2px 8px rgba(0,0,0,.05);

    --shadow:
        0 10px 30px rgba(0,0,0,.08);

    --shadow-lg:
        0 20px 50px rgba(0,0,0,.12);

    /* Width */

    --container:1200px;
    --content:860px;

    /* Transition */

    --transition:.25s ease;

}

/*==================================
  SELECTION
==================================*/

::selection{
    background:var(--primary);
    color:#fff;
}

/*==================================
  SCROLLBAR
==================================*/

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:20px;
}

::-webkit-scrollbar-track{
    background:#eef2f7;
}

/*==================================
  LINKS
==================================*/

a{
    color:var(--primary);
    text-decoration:none;
    transition:var(--transition);
}

a:hover{
    color:var(--primary-dark);
}

/*==================================
  IMAGES
==================================*/

img{
    display:block;
    max-width:100%;
    height:auto;
    border:none;
}

/*==================================
  MEDIA
==================================*/

video,
iframe,
canvas,
svg{
    max-width:100%;
}

/*==================================
  CONTAINER
==================================*/

.container{

    width:min(
        calc(100% - 32px),
        var(--container)
    );

    margin-inline:auto;

}

.content-container{

    width:min(
        calc(100% - 32px),
        var(--content)
    );

    margin-inline:auto;

}

/*==================================
  SECTION
==================================*/

.content-section{

    padding:70px 0;

    position:relative;

}

.content-section.alt{

    background:var(--section-bg);

}

/*==================================
  CARD
==================================*/

.content-card{

    background:var(--card-bg);

    border:1px solid var(--border);

    border-radius:var(--radius-xl);

    padding:42px;

    box-shadow:var(--shadow);

    overflow:hidden;

}

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

.content-hero{

    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    border-radius:var(--radius-xl);

    padding:50px;

    color:#fff;

    text-align:center;

    margin-bottom:45px;

}

.content-hero h1{

    font-size:clamp(2rem,5vw,3.5rem);

    font-weight:800;

    line-height:1.15;

    margin-bottom:16px;

}

.content-hero p{

    font-size:1.08rem;

    opacity:.95;

    max-width:700px;

    margin:auto;

}

/*==================================
  TYPOGRAPHY
==================================*/

h1,h2,h3,h4,h5,h6{

    color:var(--text);

    line-height:1.25;

    font-weight:800;

    margin-bottom:18px;

}

h1{

    font-size:2.5rem;

}

h2{

    font-size:2rem;

    margin-top:50px;

    border-left:6px solid var(--primary);

    padding-left:16px;

}

h3{

    font-size:1.5rem;

    margin-top:35px;

    color:var(--primary);

}

h4{

    font-size:1.2rem;

}

p{

    margin-bottom:18px;

    color:var(--text-light);

}

strong{

    color:var(--text);

    font-weight:700;

}

/*==================================
  LISTS
==================================*/

ul,
ol{

    margin:20px 0 25px 25px;

}

li{

    margin-bottom:10px;

    color:var(--text-light);

}

/*==================================
  BLOCKQUOTE
==================================*/

blockquote{

    border-left:5px solid var(--primary);

    background:#eff6ff;

    padding:20px 24px;

    border-radius:0 var(--radius) var(--radius) 0;

    margin:30px 0;

    font-style:italic;

}
/*==================================================
  ORKATOOL CONTENT.CSS
  VERSION: 1.0
  PART: 1B
==================================================*/


/*==================================
  TABLES
==================================*/

.table-wrapper{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin:30px 0;
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
}

.table{
    width:100%;
    min-width:650px;
    border-collapse:collapse;
    background:#fff;
}

.table th{

    background:var(--primary);

    color:#fff;

    padding:16px;

    text-align:left;

    font-size:.95rem;

    font-weight:700;

}

.table td{

    padding:15px;

    border-bottom:1px solid var(--border);

    color:var(--text-light);

}

.table tr:nth-child(even){

    background:#fafafa;

}

.table tr:hover{

    background:#f3f8ff;

}


/*==================================
  FORMULA BOX
==================================*/

.formula-box{

    margin:35px 0;

    padding:25px;

    background:#eff6ff;

    border-left:6px solid var(--primary);

    border-radius:var(--radius);

    font-size:1.25rem;

    font-weight:700;

    text-align:center;

    color:var(--primary-dark);

    overflow:auto;

}


/*==================================
  EXAMPLE BOX
==================================*/

.example-box{

    background:#ffffff;

    border:2px dashed var(--primary);

    border-radius:var(--radius-lg);

    padding:28px;

    margin:35px 0;

}

.example-box h4{

    color:var(--primary);

    margin-bottom:12px;

}

.example-box p:last-child{

    margin-bottom:0;

}


/*==================================
  NOTE BOX
==================================*/

.note-box{

    display:flex;

    gap:16px;

    align-items:flex-start;

    background:#fffbea;

    border-left:6px solid #facc15;

    padding:22px;

    margin:30px 0;

    border-radius:var(--radius);

}

.note-box .icon{

    font-size:26px;

}

.note-box strong{

    display:block;

    margin-bottom:6px;

}


/*==================================
  INFO BOX
==================================*/

.info-box{

    display:flex;

    gap:18px;

    align-items:flex-start;

    background:#ecfeff;

    border-left:6px solid var(--info);

    padding:24px;

    border-radius:var(--radius);

    margin:30px 0;

}

.info-box .icon{

    font-size:26px;

}


/*==================================
  SUCCESS BOX
==================================*/

.success-box{

    display:flex;

    gap:18px;

    align-items:flex-start;

    background:#f0fdf4;

    border-left:6px solid var(--success);

    padding:24px;

    border-radius:var(--radius);

    margin:30px 0;

}

.success-box .icon{

    font-size:26px;

}


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

.warning-box{

    display:flex;

    gap:18px;

    align-items:flex-start;

    background:#fffbeb;

    border-left:6px solid var(--warning);

    padding:24px;

    border-radius:var(--radius);

    margin:30px 0;

}

.warning-box .icon{

    font-size:26px;

}


/*==================================
  ERROR BOX
==================================*/

.error-box{

    display:flex;

    gap:18px;

    align-items:flex-start;

    background:#fef2f2;

    border-left:6px solid var(--danger);

    padding:24px;

    border-radius:var(--radius);

    margin:30px 0;

}

.error-box .icon{

    font-size:26px;

}


/*==================================
  FEATURE GRID
==================================*/

.feature-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:22px;

    margin:45px 0;

}

.feature-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    padding:28px;

    transition:var(--transition);

    text-align:center;

}

.feature-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

    border-color:var(--primary);

}

.feature-card .icon{

    font-size:42px;

    margin-bottom:18px;

}

.feature-card h4{

    margin-bottom:10px;

}

.feature-card p{

    margin-bottom:0;

}


/*==================================
  BUTTONS
==================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 28px;

    border-radius:12px;

    font-weight:700;

    transition:var(--transition);

    cursor:pointer;

    border:none;

    text-decoration:none;

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}

.btn-outline{

    border:2px solid var(--primary);

    color:var(--primary);

    background:#fff;

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}


/*==================================
  STATS GRID
==================================*/

.stats-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));

    gap:20px;

    margin:45px 0;

}

.stat-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

    padding:26px;

    text-align:center;

}

.stat-card h3{

    margin:0;

    font-size:2rem;

    color:var(--primary);

}

.stat-card p{

    margin-top:10px;

    margin-bottom:0;

}


/*==================================
  MOBILE
==================================*/

@media(max-width:992px){

.content-card{

padding:32px;

}

.content-hero{

padding:36px;

}

}

@media(max-width:768px){

.content-section{

padding:50px 0;

}

.content-card{

padding:24px;

border-radius:20px;

}

.content-hero{

padding:28px 22px;

}

.content-hero h1{

font-size:2rem;

}

h2{

font-size:1.5rem;

}

h3{

font-size:1.25rem;

}

.table{

min-width:560px;

}

.feature-grid{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:480px){

.container,
.content-container{

width:calc(100% - 18px);

}

.content-card{

padding:18px;

}

.content-hero{

padding:22px 16px;

}

.content-hero h1{

font-size:1.7rem;

}

h2{

font-size:1.3rem;

padding-left:12px;

}

p,
li{

font-size:.95rem;

}

.stats-grid{

grid-template-columns:1fr;

}

.btn{

width:100%;

}

}



/*==================================================
  ORKATOOL CONTENT.CSS
  VERSION:1.0
  PART 2A
==================================================*/


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

.faq{
    margin:60px 0;
}

.faq-item{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    overflow:hidden;
    margin-bottom:18px;
    transition:var(--transition);
}

.faq-item:hover{
    box-shadow:var(--shadow-sm);
}

.faq-question{

    width:100%;

    background:none;

    border:none;

    padding:22px 28px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    font-size:1.05rem;

    font-weight:700;

    color:var(--text);

    text-align:left;

}

.faq-question:hover{

    background:#f8fafc;

}

.faq-icon{

    width:36px;

    height:36px;

    border-radius:50%;

    background:#eff6ff;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    font-size:22px;

    transition:.35s;

    flex-shrink:0;

}

.faq-item.active .faq-icon{

    transform:rotate(45deg);

    background:var(--primary);

    color:#fff;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;

}

.faq-answer-content{

    padding:0 28px 24px;

    color:var(--text-light);

}


/*==================================
  STEP CARDS
==================================*/

.steps{

    display:grid;

    gap:24px;

    margin:45px 0;

}

.step{

    display:flex;

    gap:20px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

    padding:28px;

}

.step-number{

    width:58px;

    height:58px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.4rem;

    font-weight:700;

    flex-shrink:0;

}

.step-content h3{

    margin-top:0;

}


/*==================================
  TIMELINE
==================================*/

.timeline{

    position:relative;

    margin:60px 0;

    padding-left:35px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:12px;

    top:0;

    bottom:0;

    width:4px;

    background:var(--primary);

    border-radius:10px;

}

.timeline-item{

    position:relative;

    margin-bottom:40px;

}

.timeline-dot{

    position:absolute;

    left:-30px;

    width:28px;

    height:28px;

    border-radius:50%;

    background:var(--primary);

    border:5px solid #fff;

    box-shadow:0 0 0 3px var(--primary);

}

.timeline-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

    padding:25px;

}


/*==================================
  PROS CONS
==================================*/

.pros-cons{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

    margin:45px 0;

}

.pros,
.cons{

    border-radius:20px;

    padding:28px;

}

.pros{

    background:#f0fdf4;

    border:1px solid #bbf7d0;

}

.cons{

    background:#fef2f2;

    border:1px solid #fecaca;

}

.pros h3{

    color:var(--success);

}

.cons h3{

    color:var(--danger);

}


/*==================================
  BADGES
==================================*/

.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 16px;

    border-radius:999px;

    background:#eff6ff;

    color:var(--primary);

    font-size:.85rem;

    font-weight:700;

}

.badge-success{

    background:#dcfce7;

    color:var(--success);

}

.badge-warning{

    background:#fef3c7;

    color:#b45309;

}

.badge-danger{

    background:#fee2e2;

    color:var(--danger);

}


/*==================================
  TAGS
==================================*/

.tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.tag{

    padding:8px 14px;

    border-radius:999px;

    background:#f1f5f9;

    color:var(--text);

    font-size:.85rem;

}


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

.code-block{

    background:#0f172a;

    color:#f8fafc;

    border-radius:18px;

    overflow:hidden;

    margin:40px 0;

}

.code-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 20px;

    background:#1e293b;

}

.code-title{

    color:#fff;

    font-weight:600;

}

.copy-btn{

    background:var(--primary);

    color:#fff;

    border:none;

    border-radius:8px;

    padding:8px 14px;

    cursor:pointer;

}

.code-content{

    padding:24px;

    overflow:auto;

    font-family:Consolas,monospace;

    font-size:.92rem;

    line-height:1.8;

}


/*==================================
  CTA BOX
==================================*/

.cta-box{

    background:linear-gradient(135deg,var(--primary),var(--primary-dark));

    color:#fff;

    border-radius:24px;

    padding:50px;

    text-align:center;

    margin:60px 0;

}

.cta-box h2{

    color:#fff;

    border:none;

    padding:0;

    margin:0 0 15px;

}

.cta-box p{

    color:rgba(255,255,255,.9);

    max-width:650px;

    margin:auto auto 30px;

}


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

@media(max-width:768px){

.pros-cons{

grid-template-columns:1fr;

}

.step{

flex-direction:column;

}

.timeline{

padding-left:25px;

}

.timeline-dot{

left:-20px;

}

.faq-question{

padding:18px;

font-size:1rem;

}

.faq-answer-content{

padding:0 18px 18px;

}

.cta-box{

padding:35px 22px;

}

}

@media(max-width:480px){

.code-content{

font-size:.82rem;

}

.step{

padding:20px;

}

.timeline-card{

padding:18px;

}

}
/*==================================================
  ORKATOOL CONTENT.CSS
  VERSION:1.0
  PART 2B
==================================================*/


/*==================================
  ACCORDION
==================================*/

.accordion{

    margin:50px 0;

}

.accordion-item{

    border:1px solid var(--border);

    border-radius:18px;

    overflow:hidden;

    margin-bottom:18px;

    background:#fff;

}

.accordion-header{

    cursor:pointer;

    padding:22px 24px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-weight:700;

    font-size:1rem;

}

.accordion-header:hover{

    background:#f8fafc;

}

.accordion-body{

    padding:0 24px 24px;

}


/*==================================
  COMPARISON TABLE
==================================*/

.compare-table{

    width:100%;

    border-collapse:collapse;

    margin:45px 0;

    overflow:hidden;

    border-radius:18px;

}

.compare-table th{

    background:var(--primary);

    color:#fff;

    padding:18px;

}

.compare-table td{

    padding:18px;

    border-bottom:1px solid var(--border);

}

.compare-table tr:nth-child(even){

    background:#f8fafc;

}


/*==================================
  HIGHLIGHT BOX
==================================*/

.highlight{

    background:#eff6ff;

    border-left:6px solid var(--primary);

    border-radius:16px;

    padding:24px;

    margin:35px 0;

    font-size:1.05rem;

}


/*==================================
  KEYPOINTS
==================================*/

.keypoints{

    display:grid;

    gap:16px;

    margin:40px 0;

}

.keypoint{

    display:flex;

    align-items:flex-start;

    gap:14px;

}

.keypoint-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.keypoint-content h4{

    margin-bottom:6px;

}


/*==================================
  CHECKLIST
==================================*/

.check-list{

    list-style:none;

    margin:30px 0;

}

.check-list li{

    position:relative;

    padding-left:36px;

    margin-bottom:14px;

}

.check-list li::before{

    content:"✔";

    position:absolute;

    left:0;

    color:var(--success);

    font-weight:bold;

}


/*==================================
  CROSS LIST
==================================*/

.cross-list{

    list-style:none;

    margin:30px 0;

}

.cross-list li{

    position:relative;

    padding-left:36px;

    margin-bottom:14px;

}

.cross-list li::before{

    content:"✖";

    position:absolute;

    left:0;

    color:var(--danger);

    font-weight:bold;

}


/*==================================
  NUMBER LIST
==================================*/

.number-list{

    counter-reset:item;

    list-style:none;

    margin:35px 0;

}

.number-list li{

    counter-increment:item;

    margin-bottom:18px;

    padding-left:52px;

    position:relative;

}

.number-list li::before{

    content:counter(item);

    position:absolute;

    left:0;

    width:34px;

    height:34px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

}


/*==================================
  ALERT
==================================*/

.alert{

    padding:22px;

    border-radius:16px;

    margin:35px 0;

}

.alert-primary{

    background:#eff6ff;

    border:1px solid #bfdbfe;

}

.alert-success{

    background:#ecfdf5;

    border:1px solid #bbf7d0;

}

.alert-warning{

    background:#fffbeb;

    border:1px solid #fde68a;

}

.alert-danger{

    background:#fef2f2;

    border:1px solid #fecaca;

}


/*==================================
  DIVIDER
==================================*/

.divider{

    height:1px;

    background:var(--border);

    margin:60px 0;

}


/*==================================
  SPACER
==================================*/

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:60px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:60px;}

.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}


/*==================================
  MOBILE
==================================*/

@media(max-width:768px){

.compare-table{

display:block;

overflow-x:auto;

white-space:nowrap;

}

.accordion-header{

padding:18px;

}

.highlight{

padding:18px;

}

.number-list li{

padding-left:46px;

}

}

/*==================================================
  ORKATOOL CONTENT.CSS
  VERSION:1.0
  PART 3A
==================================================*/


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

.breadcrumb{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:10px;

    margin-bottom:35px;

    font-size:.9rem;

}

.breadcrumb a{

    color:var(--primary);

    font-weight:600;

}

.breadcrumb span{

    color:var(--text-muted);

}


/*==================================
  AUTHOR BOX
==================================*/

.author-box{

    display:flex;

    align-items:center;

    gap:20px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:20px;

    padding:25px;

    margin:60px 0;

}

.author-avatar{

    width:90px;

    height:90px;

    border-radius:50%;

    overflow:hidden;

    flex-shrink:0;

}

.author-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.author-info h3{

    margin:0 0 8px;

    color:var(--text);

}

.author-info p{

    margin:0;

}


/*==================================
  READING PROGRESS
==================================*/

.reading-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:var(--primary);

    z-index:9999;

}


/*==================================
  TABLE OF CONTENTS
==================================*/

.toc{

    background:#fff;

    border:1px solid var(--border);

    border-radius:20px;

    padding:28px;

    margin:40px 0;

}

.toc-title{

    font-size:1.2rem;

    font-weight:700;

    margin-bottom:18px;

}

.toc ul{

    list-style:none;

    margin:0;

}

.toc li{

    margin-bottom:12px;

}

.toc a{

    color:var(--text-light);

    transition:.25s;

}

.toc a:hover{

    color:var(--primary);

    padding-left:6px;

}


/*==================================
  RELATED POSTS
==================================*/

.related-posts{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:24px;

    margin:60px 0;

}

.related-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:20px;

    overflow:hidden;

    transition:.3s;

}

.related-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}

.related-image{

    aspect-ratio:16/9;

    overflow:hidden;

}

.related-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.35s;

}

.related-card:hover img{

    transform:scale(1.05);

}

.related-body{

    padding:22px;

}

.related-body h3{

    margin:0 0 12px;

    font-size:1.1rem;

}

.related-body p{

    margin:0;

}


/*==================================
  SHARE BUTTONS
==================================*/

.share-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin:50px 0;

}

.share-btn{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    border:1px solid var(--border);

    transition:.3s;

}

.share-btn:hover{

    background:var(--primary);

    color:#fff;

    transform:translateY(-3px);

}


/*==================================
  ESTIMATED READING
==================================*/

.reading-time{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#eff6ff;

    color:var(--primary);

    padding:10px 16px;

    border-radius:999px;

    font-size:.85rem;

    font-weight:700;

}


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

.article-meta{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin:25px 0;

    color:var(--text-muted);

    font-size:.9rem;

}

.article-meta span{

    display:flex;

    align-items:center;

    gap:8px;

}


/*==================================
  MOBILE
==================================*/

@media(max-width:768px){

.author-box{

flex-direction:column;

text-align:center;

}

.related-posts{

grid-template-columns:1fr;

}

.share-buttons{

justify-content:center;

}

.article-meta{

gap:12px;

}

}
/*==================================================
  ORKATOOL CONTENT.CSS
  VERSION:1.0
  PART 3B FINAL
==================================================*/


/*==================================
  STAR RATING
==================================*/

.rating{

display:flex;

align-items:center;

gap:6px;

margin:20px 0;

}

.rating .star{

font-size:22px;

color:#fbbf24;

}

.rating-text{

color:var(--text-muted);

font-size:.9rem;

}


/*==================================
  SKELETON LOADER
==================================*/

.skeleton{

position:relative;

overflow:hidden;

background:#e5e7eb;

border-radius:12px;

}

.skeleton::after{

content:"";

position:absolute;

top:0;

left:-150%;

width:150%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.55),
transparent
);

animation:skeleton-loading 1.4s infinite;

}

@keyframes skeleton-loading{

100%{

left:150%;

}

}


/*==================================
  BACK TO TOP
==================================*/

.back-to-top{

position:fixed;

right:22px;

bottom:22px;

width:52px;

height:52px;

border-radius:50%;

background:var(--primary);

color:#fff;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

font-size:22px;

box-shadow:var(--shadow);

transition:.3s;

z-index:999;

}

.back-to-top:hover{

background:var(--primary-dark);

transform:translateY(-4px);

}


/*==================================
  FADE ANIMATIONS
==================================*/

.fade-up{

opacity:0;

transform:translateY(40px);

transition:.7s ease;

}

.fade-up.show{

opacity:1;

transform:none;

}

.fade-in{

opacity:0;

transition:.7s ease;

}

.fade-in.show{

opacity:1;

}

.zoom-in{

transform:scale(.9);

opacity:0;

transition:.6s;

}

.zoom-in.show{

opacity:1;

transform:scale(1);

}


/*==================================
  PRINT
==================================*/

@media print{

header,
footer,
nav,
.back-to-top,
.share-buttons,
.cta-box{

display:none!important;

}

body{

background:#fff;

color:#000;

}

.content-card{

box-shadow:none;

border:none;

padding:0;

}

a{

color:#000;

text-decoration:underline;

}

}


/*==================================
  DARK MODE
==================================*/

@media(prefers-color-scheme:dark){

:root{

--body-bg:#0f172a;

--card-bg:#1e293b;

--section-bg:#111827;

--text:#f8fafc;

--text-light:#cbd5e1;

--text-muted:#94a3b8;

--border:#334155;

}

body{

background:var(--body-bg);

color:var(--text);

}

.content-card,
.feature-card,
.step,
.timeline-card,
.related-card,
.author-box{

background:var(--card-bg);

}

}


/*==================================
  ACCESSIBILITY
==================================*/

:focus-visible{

outline:3px solid var(--primary);

outline-offset:3px;

}

button,
a{

-webkit-tap-highlight-color:transparent;

}


/*==================================
  LAZY IMAGES
==================================*/

img[loading="lazy"]{

background:#f3f4f6;

}


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

.embed{

position:relative;

padding-bottom:56.25%;

height:0;

overflow:hidden;

margin:35px 0;

border-radius:18px;

}

.embed iframe{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

border:0;

}


/*==================================
  UTILITIES
==================================*/

.hidden{

display:none!important;

}

.w-100{

width:100%;

}

.rounded{

border-radius:var(--radius);

}

.rounded-lg{

border-radius:var(--radius-lg);

}

.shadow{

box-shadow:var(--shadow);

}

.shadow-sm{

box-shadow:var(--shadow-sm);

}

.shadow-lg{

box-shadow:var(--shadow-lg);

}

.border{

border:1px solid var(--border);

}

.bg-white{

background:#fff;

}

.text-primary{

color:var(--primary);

}

.text-success{

color:var(--success);

}

.text-danger{

color:var(--danger);

}

.text-warning{

color:var(--warning);

}

.fw-bold{

font-weight:700;

}

.fw-normal{

font-weight:400;

}

.d-flex{

display:flex;

}

.flex-column{

flex-direction:column;

}

.justify-between{

justify-content:space-between;

}

.justify-center{

justify-content:center;

}

.items-center{

align-items:center;

}

.gap-1{

gap:10px;

}

.gap-2{

gap:20px;

}

.gap-3{

gap:30px;

}


/*==================================
  IMAGE EFFECTS
==================================*/

.img-hover{

overflow:hidden;

border-radius:18px;

}

.img-hover img{

transition:.35s;

}

.img-hover:hover img{

transform:scale(1.08);

}


/*==================================
  FINAL MOBILE FIXES
==================================*/

@media(max-width:768px){

html{

font-size:15px;

}

table{

display:block;

overflow-x:auto;

white-space:nowrap;

}

pre{

overflow:auto;

}

img{

max-width:100%;

height:auto;

}

iframe{

max-width:100%;

}

.back-to-top{

right:15px;

bottom:15px;

width:46px;

height:46px;

font-size:18px;

}

}

@media(max-width:480px){

html{

font-size:14px;

}

.content-card{

border-radius:16px;

}

.feature-card,
.step,
.timeline-card{

padding:18px;

}

.author-avatar{

width:70px;

height:70px;

}

}


/*==================================================
  END OF FILE
==================================================*/

/*===============================
ANIMATIONS
===============================*/

.hidden{

opacity:0;

transform:translateY(40px);

transition:.6s ease;

}

.show{

opacity:1;

transform:none;

}

/*===============================
BACK TO TOP
===============================*/

.back-to-top{

position:fixed;

right:20px;

bottom:20px;

width:50px;

height:50px;

border:none;

border-radius:50%;

background:var(--primary);

color:#fff;

font-size:22px;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.3s;

box-shadow:var(--shadow);

z-index:999;

}

.back-to-top.show{

opacity:1;

visibility:visible;

}

.back-to-top:hover{

background:var(--primary-dark);

transform:translateY(-4px);

}

/*===============================
SCROLL BAR
===============================*/

.scroll-progress{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:var(--primary);

z-index:9999;

transition:.1s;

}

/*==================================
MOBILE FIXES
==================================*/

html,
body{
    overflow-x:hidden;
}



.content-section{
    width:100%;
    overflow:hidden;
}

.content-container{
    width:min(calc(100% - 32px),860px);
    margin-inline:auto;
}

.content-card{
    width:100%;
    background:#fff;
    border:1px solid var(--border);
    border-radius:24px;
    padding:40px;
    overflow:visible;
}
.content-card *{
    word-wrap:break-word;
    overflow-wrap:anywhere;
}
@media (max-width:768px){

.content-card{
    padding:22px;
}

.content-hero{
    padding:24px 18px;
}

.content-hero h1,
.content-hero h2{
    font-size:1.8rem;
    line-height:1.3;
}

h2{
    font-size:1.45rem;
}

table{
    display:block;
    overflow-x:auto;
}

}