/*==================================================

PUTRA KARYA LAS
ARTIKEL.CSS V2

==================================================*/


/*====================================
ROOT
====================================*/

:root{

--primary:#d61f26;

--primary-dark:#b8171d;

--dark:#111111;

--dark-2:#1a1a1a;

--light:#f7f7f7;

--white:#ffffff;

--text:#555555;

--border:#e8e8e8;

--radius:20px;

--shadow:0 12px 35px rgba(0,0,0,.08);

--transition:.35s ease;

}



/*====================================
LAYOUT
====================================*/

.article-layout{

padding:90px 0;

background:#fff;

}

.article-layout .container{

display:grid;

grid-template-columns:280px minmax(0,1fr);

gap:60px;

align-items:start;

max-width:1350px;

}



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

.article-hero{

padding:150px 0 90px;

background:

linear-gradient(rgba(15,15,15,.78),

rgba(15,15,15,.82)),

url("../images/kanopi2.jpg")

center center/cover;

color:#fff;

position:relative;

overflow:hidden;

}

.article-hero::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:120px;

background:

linear-gradient(to top,#fff,transparent);

}

.article-hero .container{

position:relative;

z-index:2;

max-width:1100px;

}



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

.breadcrumb{

display:flex;

align-items:center;

gap:12px;

flex-wrap:wrap;

margin-bottom:30px;

font-size:15px;

}

.breadcrumb a{

color:#dcdcdc;

text-decoration:none;

transition:.3s;

}

.breadcrumb a:hover{

color:#fff;

}

.breadcrumb strong{

color:#fff;

}



/*====================================
TAG
====================================*/

.section-tag{

display:inline-flex;

align-items:center;

padding:10px 22px;

border-radius:50px;

background:var(--primary);

color:#fff;

font-weight:700;

font-size:13px;

letter-spacing:1px;

margin-bottom:25px;

}



/*====================================
TITLE
====================================*/

.article-hero h1{

font-size:60px;

line-height:1.15;

font-weight:800;

margin-bottom:25px;

max-width:900px;

}



/*====================================
LEAD
====================================*/

.article-lead{

font-size:20px;

line-height:2;

color:#e3e3e3;

max-width:900px;

margin-bottom:35px;

}



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

.article-meta{

display:flex;

gap:25px;

flex-wrap:wrap;

margin-bottom:50px;

}

.article-meta div{

display:flex;

align-items:center;

gap:10px;

padding:12px 18px;

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.08);

border-radius:50px;

backdrop-filter:blur(12px);

font-size:14px;

}



/*====================================
COVER
====================================*/

.article-cover{

margin-top:25px;

}

.article-cover img{

width:100%;

display:block;

border-radius:28px;

box-shadow:

0 25px 60px rgba(0,0,0,.35);

}



/*====================================
SIDEBAR
====================================*/

.article-sidebar{

position:sticky;

top:120px;

display:flex;

flex-direction:column;

gap:30px;

}



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

.toc-card,

.consult-card{

background:#fff;

border-radius:22px;

padding:30px;

box-shadow:var(--shadow);

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

}



/*====================================
TOC
====================================*/

.toc-card h3{

font-size:22px;

margin-bottom:25px;

}

.toc-card ul{

list-style:none;

padding:0;

margin:0;

}

.toc-card li{

margin-bottom:15px;

}

.toc-card a{

display:block;

padding:10px 0;

text-decoration:none;

color:#444;

font-weight:600;

transition:var(--transition);

}

.toc-card a:hover{

padding-left:10px;

color:var(--primary);

}



/*====================================
CONSULT
====================================*/

.consult-card{

background:

linear-gradient(180deg,

#ffffff,

#f8f8f8);

}

.consult-card h3{

margin-bottom:18px;

font-size:24px;

}

.consult-card p{

line-height:1.9;

color:#666;

margin-bottom:25px;

}

.consult-card .btn{

width:100%;

justify-content:center;

display:flex;

align-items:center;

}

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

.article-main{

min-width:0;

}



/*====================================
CATEGORY
====================================*/

.article-category{

display:inline-flex;

align-items:center;

padding:8px 18px;

background:#fff1f1;

color:var(--primary);

font-size:13px;

font-weight:700;

border-radius:40px;

letter-spacing:.8px;

margin-bottom:18px;

}



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

.article-main h2{

font-size:42px;

font-weight:800;

line-height:1.25;

color:var(--dark);

margin:15px 0 25px;

}

.article-main h3{

font-size:28px;

font-weight:700;

margin:40px 0 18px;

color:var(--dark);

}

.article-main p{

font-size:17px;

line-height:2;

color:var(--text);

margin-bottom:28px;

}



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

.article-main section{

margin-bottom:90px;

}



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

.article-main img{

width:100%;

display:block;

border-radius:24px;

margin:35px 0;

box-shadow:

0 18px 45px rgba(0,0,0,.12);

}



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

.article-main ul{

margin:25px 0;

padding-left:24px;

}

.article-main li{

margin-bottom:14px;

line-height:1.9;

color:#555;

}



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

.info-box{

background:

linear-gradient(180deg,

#fff6f6,

#fff);

padding:35px;

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

border-radius:22px;

margin:45px 0;

box-shadow:var(--shadow);

}

.info-box h3{

margin-top:0;

margin-bottom:15px;

color:var(--primary);

font-size:26px;

}

.info-box p{

margin:0;

}



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

blockquote{

margin:45px 0;

padding:40px;

background:#fafafa;

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

border-radius:20px;

font-size:20px;

font-style:italic;

line-height:1.8;

color:#333;

position:relative;

}

blockquote::before{

content:"❝";

position:absolute;

top:15px;

left:25px;

font-size:55px;

color:rgba(214,31,38,.18);

font-style:normal;

}



/*====================================
RECOMMENDATION
====================================*/

.recommendation{

margin-top:35px;

padding:35px;

background:#ffffff;

border-radius:22px;

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

box-shadow:var(--shadow);

}

.recommendation strong{

display:block;

margin-bottom:15px;

font-size:22px;

color:var(--primary);

}



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

.article-main section:not(:last-child){

padding-bottom:50px;

border-bottom:1px solid #ededed;

}



/*====================================
LINK
====================================*/

.article-main a{

color:var(--primary);

font-weight:600;

text-decoration:none;

transition:var(--transition);

}

.article-main a:hover{

color:var(--primary-dark);

}



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

.article-main strong{

color:#222;

font-weight:700;

}



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

.article-main ::selection{

background:var(--primary);

color:#fff;

}

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

.table-responsive{

overflow-x:auto;

margin:40px 0;

border-radius:22px;

box-shadow:var(--shadow);

}

.comparison-table{

width:100%;

border-collapse:collapse;

background:#fff;

min-width:720px;

}

.comparison-table thead{

background:var(--primary);

color:#fff;

}

.comparison-table th{

padding:20px;

font-size:16px;

font-weight:700;

text-align:center;

}

.comparison-table td{

padding:18px;

text-align:center;

border-bottom:1px solid #ececec;

color:#555;

}

.comparison-table tbody tr{

transition:var(--transition);

}

.comparison-table tbody tr:hover{

background:#fff7f7;

}

.note{

margin-top:18px;

font-size:14px;

color:#777;

font-style:italic;

}



/*====================================
RECOMMEND BOX
====================================*/

.recommend-box{

background:#fff;

padding:35px;

border-radius:22px;

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

box-shadow:var(--shadow);

margin-bottom:30px;

transition:var(--transition);

}

.recommend-box:hover{

transform:translateY(-6px);

}

.recommend-box h3{

margin-top:0;

color:var(--primary);

}



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

.faq-item{

background:#fff;

border-radius:18px;

margin-bottom:20px;

overflow:hidden;

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

box-shadow:var(--shadow);

}

.faq-question{

width:100%;

padding:24px 28px;

border:none;

background:#fff;

cursor:pointer;

font-size:18px;

font-weight:700;

text-align:left;

display:flex;

justify-content:space-between;

align-items:center;

transition:var(--transition);

}

.faq-question::after{

content:"+";

font-size:28px;

font-weight:400;

color:var(--primary);

}

.faq-item.active .faq-question{

background:#fafafa;

}

.faq-item.active .faq-question::after{

content:"−";

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .35s ease;

}

.faq-item.active .faq-answer{

max-height:500px;

}

.faq-answer p{

padding:0 28px 28px;

margin:0;

}



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

.article-cta{

padding:100px 0;

background:linear-gradient(135deg,#d61f26,#a71419);

color:#fff;

text-align:center;

}

.article-cta .container{

max-width:850px;

}

.article-cta h2{

font-size:46px;

margin:20px 0;

line-height:1.2;

}

.article-cta p{

font-size:18px;

line-height:1.9;

opacity:.95;

margin-bottom:40px;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:50px;

font-weight:700;

text-decoration:none;

transition:var(--transition);

}

.btn-primary{

background:#fff;

color:var(--primary);

}

.btn-primary:hover{

transform:translateY(-4px);

}

.btn-outline{

border:2px solid rgba(255,255,255,.4);

color:#fff;

}

.btn-outline:hover{

background:#fff;

color:var(--primary);

}



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

.related-articles{

padding:100px 0;

background:#f7f7f7;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title span{

display:inline-block;

color:var(--primary);

font-weight:700;

margin-bottom:12px;

letter-spacing:1px;

}

.section-title h2{

font-size:42px;

margin-bottom:15px;

}

.section-title p{

max-width:700px;

margin:auto;

color:#666;

line-height:1.8;

}

.related-grid{

display:grid;

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

gap:30px;

}

.related-card{

display:block;

background:#fff;

border-radius:24px;

overflow:hidden;

box-shadow:var(--shadow);

transition:var(--transition);

text-decoration:none;

color:#111;

}

.related-card:hover{

transform:translateY(-8px);

}

.related-card img{

width:100%;

height:220px;

object-fit:cover;

display:block;

}

.related-content{

padding:28px;

}

.related-content span{

display:inline-block;

font-size:13px;

font-weight:700;

color:var(--primary);

margin-bottom:10px;

}

.related-content h3{

font-size:24px;

margin-bottom:12px;

}

.related-content p{

color:#666;

line-height:1.8;

}



/*====================================
FOOTER
====================================*/

.footer{

background:#111;

color:#aaa;

padding:35px 0;

text-align:center;

}



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

@media(max-width:991px){

.article-layout .container{

grid-template-columns:1fr;

gap:50px;

}

.article-sidebar{

position:relative;

top:auto;

order:-1;

}

.related-grid{

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

}

.article-hero h1{

font-size:46px;

}

.article-main h2{

font-size:36px;

}

}



@media(max-width:768px){

.article-hero{

padding:120px 0 70px;

}

.article-hero h1{

font-size:34px;

}

.article-lead{

font-size:17px;

line-height:1.8;

}

.article-meta{

gap:12px;

}

.article-meta div{

width:100%;

justify-content:center;

}

.article-main h2{

font-size:30px;

}

.article-main h3{

font-size:24px;

}

blockquote{

padding:30px;

font-size:18px;

}

.info-box,

.recommendation,

.recommend-box,

.toc-card,

.consult-card{

padding:25px;

}

.related-grid{

grid-template-columns:1fr;

}

.article-cta h2{

font-size:34px;

}

.cta-buttons{

flex-direction:column;

}

.btn{

width:100%;

}

}