/* ============================================================ candidateseo.com — ARTIKEL.CSS Style khusus template single-artikel. Mengacu ke variabel warna & komponen dasar (.btn, .eyebrow, .faq-*, dst) yang sudah didefinisikan di 00-css-terpusat.css — file itu WAJIB dimuat lebih dulu di sebelum file ini. ============================================================ */ /* ---------- Breadcrumb ---------- */ .crumb{ padding:18px 0; font-size:0.84rem; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; } .crumb a{color:var(--muted); font-weight:600;} .crumb a:hover{color:var(--fase1);} .crumb .sep{color:var(--line);} .crumb .current{color:var(--ink-soft);} /* ---------- Article header ---------- */ .article-head{padding:6px 0 34px;} .article-head .kicker-tag{ display:inline-flex; align-items:center; gap:7px; background:#EAF1FE; color:var(--fase1); font-weight:700; font-size:0.78rem; padding:6px 13px; border-radius:999px; margin-bottom:16px; } .article-head h1{font-size:clamp(1.85rem,3.4vw,2.7rem); margin-bottom:20px;} .meta-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:0.85rem; color:var(--muted); padding-bottom:24px; border-bottom:1px solid var(--line); } .meta-row .stars{font-size:0.85rem;} .meta-row .reviewer{display:flex; align-items:center; gap:8px;} .meta-row .reviewer .av{ width:24px;height:24px;border-radius:50%; background:linear-gradient(135deg,var(--violet),var(--coral)); color:var(--white); font-size:0.68rem; font-weight:700; display:flex; align-items:center; justify-content:center; } /* ---------- Layout: sidebar kiri + konten ---------- */ .article-layout{ display:grid; grid-template-columns:272px 1fr; gap:44px; align-items:start; padding-bottom:70px; } .article-sidebar{order:1; position:sticky; top:88px; display:flex; flex-direction:column; gap:18px;} .article-main{order:2; min-width:0;} .sidebar-box{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:20px; } .sidebar-box h4{ font-size:0.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:14px; } .toc-box nav a{ display:block; font-size:0.85rem; color:var(--ink-soft); padding:7px 0 7px 14px; border-left:2px solid var(--line); font-weight:500; transition:border-color .15s ease, color .15s ease; } .toc-box nav a:hover, .toc-box nav a.active{border-left-color:var(--fase1); color:var(--fase1); font-weight:700;} .related-box a{ display:block; font-size:0.85rem; font-weight:600; color:var(--ink-soft); padding:9px 0; border-bottom:1px solid var(--line); } .related-box a:last-child{border-bottom:none;} .related-box a:hover{color:var(--fase1);} .related-box .r-tag{display:block; font-size:0.68rem; font-weight:700; color:var(--coral-deep); margin-bottom:3px;} .sidebar-sub{ background:linear-gradient(135deg,var(--violet-pale),var(--cyan-pale)); border-color:transparent; } .sidebar-sub p{font-size:0.82rem; color:var(--ink-soft); margin:0 0 12px;} .mobile-toc{display:none; margin:0 0 30px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;} .mobile-toc summary{ padding:14px 18px; font-weight:700; font-size:0.92rem; cursor:pointer; display:flex; align-items:center; justify-content:space-between; list-style:none; background:var(--bg-soft); } .mobile-toc summary::-webkit-details-marker{display:none;} .mobile-toc[open] summary::after{content:"▲";} .mobile-toc summary::after{content:"▼"; font-size:0.7rem; color:var(--fase1);} .mobile-toc nav{padding:8px 18px 16px;} .mobile-toc nav a{display:block; padding:8px 0; font-size:0.87rem; color:var(--ink-soft); font-weight:500;} /* ---------- Article prose ---------- */ .prose{font-size:1.02rem; color:var(--ink-soft);} .prose p{margin:0 0 20px;} .prose .lead-p{font-size:1.12rem; color:var(--ink); font-weight:500;} .prose h2{ font-size:1.5rem; margin:46px 0 18px; scroll-margin-top:100px; display:flex; align-items:center; gap:12px; } .prose h2 .h2-num{ font-family:'Sora',sans-serif; font-size:0.85rem; font-weight:800; color:var(--white); background:var(--fase1); width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; } .prose h3{font-size:1.1rem; margin:26px 0 12px;} .prose ul.plain-list{margin:0 0 20px;} .prose ul.plain-list li{ padding-left:22px; position:relative; margin-bottom:10px; } .prose ul.plain-list li::before{ content:"→"; position:absolute; left:0; color:var(--fase1); font-weight:700; } /* ringkasan cepat / TL;DR */ .tldr{ background:linear-gradient(135deg,var(--violet-pale) 0%, var(--cyan-pale) 100%); border-radius:var(--radius); padding:22px 24px; margin:26px 0 38px; } .tldr h4{font-size:0.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--violet-deep); margin-bottom:12px;} .tldr ul{display:grid; grid-template-columns:1fr 1fr; gap:8px 20px;} .tldr li{font-size:0.9rem; color:var(--ink-soft); font-weight:500; display:flex; gap:8px;} .tldr li::before{content:"✓"; color:var(--mint); font-weight:800; flex:none;} /* checklist persiapan */ .checklist{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:20px 0 28px;} .checklist-item{ display:flex; align-items:flex-start; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); font-size:0.92rem; } .checklist-item:last-child{border-bottom:none;} .checklist-item .ck{ width:20px; height:20px; border-radius:6px; background:var(--mint-pale); color:var(--mint); display:flex; align-items:center; justify-content:center; flex:none; margin-top:2px; font-size:0.7rem; font-weight:800; } /* callout boxes */ .callout{border-radius:var(--radius); padding:18px 20px; margin:26px 0; display:flex; gap:14px;} .callout .ic{width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none; color:var(--white); font-weight:800; font-size:0.9rem;} .callout p{margin:0; font-size:0.9rem; color:var(--ink-soft);} .callout p strong{color:var(--ink);} .callout.tip{background:var(--cyan-pale);} .callout.tip .ic{background:var(--cyan);} .callout.warn{background:var(--coral-pale);} .callout.warn .ic{background:var(--coral-deep);} /* step cards */ .step-card{ display:grid; grid-template-columns:52px 1fr; gap:18px; margin:22px 0; padding:22px; border:1px solid var(--line); border-radius:var(--radius); } .step-card .step-num{ width:52px; height:52px; border-radius:15px; background:linear-gradient(135deg,var(--fase1),var(--violet)); color:var(--white); font-family:'Sora',sans-serif; font-weight:800; font-size:1.3rem; display:flex; align-items:center; justify-content:center; } .step-card h3{margin:2px 0 8px;} .step-card p{margin:0 0 4px; font-size:0.92rem; color:var(--ink-soft);} /* mock browser illustration (bukan screenshot asli — ilustrasi netral) */ .mock-browser{ border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:16px 0 6px; box-shadow:var(--shadow-sm); } .mock-bar{ background:var(--bg-soft); padding:9px 14px; display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--line); } .mock-bar span{width:8px; height:8px; border-radius:50%; background:var(--line);} .mock-bar .url{ margin-left:10px; background:var(--white); border:1px solid var(--line); border-radius:6px; padding:3px 10px; font-size:0.72rem; color:var(--muted); flex:1; } .mock-body{padding:22px; display:flex; align-items:center; justify-content:center; min-height:110px;} .mock-body.b-fase1{background:linear-gradient(135deg,#EAF1FE,#E1F8FA);} .mock-body svg{color:var(--fase1);} /* comparison table */ .table-wrap{overflow-x:auto; margin:20px 0 28px; border:1px solid var(--line); border-radius:var(--radius);} table.compare{width:100%; border-collapse:collapse; font-size:0.88rem; min-width:480px;} table.compare th{ background:var(--bg-soft); text-align:left; padding:13px 16px; font-weight:700; color:var(--ink); border-bottom:1px solid var(--line); } table.compare td{padding:13px 16px; border-bottom:1px solid var(--line); color:var(--ink-soft);} table.compare tr:last-child td{border-bottom:none;} table.compare td.win{color:var(--mint); font-weight:700;} /* author box inline (E-E-A-T) */ .author-inline{ display:flex; gap:16px; align-items:flex-start; background:var(--bg-soft); border-radius:var(--radius); padding:20px; margin:36px 0; } .author-inline .av{ width:48px;height:48px;border-radius:50%; flex:none; background:linear-gradient(135deg,var(--violet),var(--coral)); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-weight:700; } .author-inline p{margin:0; font-size:0.86rem; color:var(--muted);} .author-inline strong{color:var(--ink); font-size:0.95rem;} /* end CTA */ .end-cta{ background:linear-gradient(120deg,var(--violet-deep),var(--violet) 60%,var(--fase1)); border-radius:var(--radius-lg); padding:36px; margin:40px 0 10px; color:var(--white); display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .end-cta h3{color:var(--white); font-size:1.25rem; margin-bottom:8px;} .end-cta p{color:#DCE0FF; font-size:0.9rem; margin:0; max-width:44ch;} .end-cta .btn-primary{background:var(--white); color:var(--violet-deep); box-shadow:none;} .end-cta .btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(0,0,0,0.25);} @media (max-width:900px){ .article-layout{grid-template-columns:1fr;} .article-sidebar{order:3; position:static;} .mobile-toc{display:block;} .tldr ul{grid-template-columns:1fr;} .step-card{grid-template-columns:44px 1fr;} .end-cta{flex-direction:column; align-items:flex-start;} }