/*
Theme Name: Simplisia
Theme URI: https://moe.web.id/simplisia
Description: theme for personal blog
Author: ozi
Author URI: https://moe.web.id
Version: 1.0
Tags: two-columns, fixed-width, custom-header, custom-menu
*/

/* ---------------- RESET CSS ---------------- */

@font-face { font-family: "Tauri"; font-style: normal; font-weight: 400; font-display: swap; src: local("Tauri Regular"), local("Tauri-Regular"), url("https://fonts.gstatic.com/s/tauri/v4/NN-VSW_h-jkrKyYGwwj5QQ.woff2") format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }

@font-face { font-family: "Tauri"; font-style: normal; font-weight: 400; font-display: swap; src: local("Tauri Regular"), local("Tauri-Regular"), url("https://fonts.gstatic.com/s/tauri/v4/sWn97sjs9uU0xeuHDScCTA.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; }

/* ========================= RESET & GLOBAL ========================= */

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

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

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { margin: 0 auto; background: #DDE1E4; color: #3C3B3B; font-family: "Tauri", sans-serif; font-size: 14px; line-height: 1.5; direction: ltr; }

h1, h2, h3, h4, h5, h6 { line-height: 1.3; font-weight: 400; }

h1 { font-size: 20px; } h2 { font-size: 19px; } h3 { font-size: 17px; } h4 { font-size: 16px; } h5 { font-size: 15px; } h6 { font-size: 14px; }

p { margin: 10px 0; }

ol, ul { list-style: none; }

img, video, object, iframe { max-width: 100%; }

img, video { height: auto; }

table { border-collapse: collapse; border-spacing: 0; }

a { color: #3C97F3; text-decoration: none; transition: color 0.1s linear; }

a:hover { text-decoration: underline; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid #3482D2; outline-offset: 2px; }

button, input, textarea, select { font: inherit; }

.clear { clear: both; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

#wrap { width: 100%; max-width: 900px; margin: 0 auto; background: #FFF; }

#content { display: flow-root; margin-bottom: 15px; }

.ads { position: relative; padding: 10px 15px; overflow: hidden; text-align: center; }

.ads img { max-width: 100%; height: auto; }

/* ========================= HEADER ========================= */

#header { display: flow-root; margin: 0 0 10px; overflow: hidden; }

#header .logo { float: left; max-width: 100%; }

#header .logo img { display: block; width: auto; max-width: 100%; height: 90px; object-fit: contain; object-position: left center; }

/* ========================= MAIN MENU ========================= */

#main-menu { position: relative; margin: 0 auto; background: #23282D; text-shadow: 1px 1px 2px #3C3C3C; }

#main-menu ul { position: relative; float: left; }

#main-menu ul li { position: relative; float: left; }

#main-menu ul .current-menu-item > a, #main-menu ul .current_page_item > a { background: #3482D2; }

#main-menu ul li a { display: block; padding: 0 14px; color: #FFF; font-size: 15px; font-weight: 700; line-height: 40px; text-align: center; text-transform: uppercase; }

#main-menu ul li a:hover, #main-menu ul li a:focus-visible { background: #2F353C; color: #FFF; text-decoration: none; }

#main-menu ul li ul { position: absolute; top: 40px; left: 0; z-index: 9999; display: none; min-width: 180px; max-width: 100vw; background: #32373C; border-top: 1px solid #23282D; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); text-shadow: none; }

#main-menu ul li:hover > ul, #main-menu ul li:focus-within > ul { display: block; }

#main-menu ul li ul li { float: none; width: 100%; }

#main-menu ul li ul li a { min-width: 160px; padding: 5px 10px; font-size: 14px; font-weight: 400; line-height: 20px; text-align: left; text-transform: none; overflow-wrap: anywhere; }

#main-menu ul li ul li a:hover { background: #23282D; }

#main-menu ul li ul li ul { top: 0; left: 100%; }

#main-menu .random { float: right; padding: 0 15px; background: #5F5F5F; color: #FFF; cursor: pointer; font-size: 14px; font-weight: 700; line-height: 37px; text-transform: uppercase; }

#main-menu .random:hover { background: #ECECEC; color: #333; text-decoration: none; }

.show-menu { display: none; color: #FFF; cursor: pointer; font-size: 16px; font-weight: 700; line-height: 37px; text-align: center; text-transform: uppercase; }

#main-menu #show-menu { display: none; -webkit-appearance: none; appearance: none; }

#main-menu #show-menu:checked ~ ul { position: relative; z-index: 9999; display: block; float: none; background: #222; }

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

.postsbody { float: left; width: 65%; min-width: 0; }

.postsbody .lts { margin: 0 15px; }

.postsbody .lts .ls { display: flow-root; margin-top: 15px; padding-bottom: 15px; border-bottom: 1px dashed #CCCBCB; }

.postsbody .lts .ls .img { float: left; width: 31%; overflow: hidden; }

.postsbody .lts .ls .img .ltr { max-height: 100px; margin-right: 10px; overflow: hidden; }

.postsbody .lts .ls .img .ltr img { display: block; width: 100%; min-height: 100px; height: auto; object-fit: cover; }

.postsbody .lts .ls .nf { float: right; width: 69%; overflow: hidden; line-height: 18px; overflow-wrap: anywhere; }

.postsbody .lts .ls .nf h2 { margin-bottom: 5px; font-size: 17px; line-height: normal; }

.postsbody .lts .ls .nf h2 a { color: #1F303C; }

.postsbody .lts .ls .nf .th { color: #B9B8B8; font-size: 11px; }

.postsbody .lts .ls .nf .th span, .ctn .th span { width: 16px; height: 16px; font-size: 16px; }

.postsbody .lts .ls .nf .th a { color: #B9B8B8; }

.postsbody .lts .ls .nf .th a:hover { color: #3C97F3; }

.postsbody .lts .ls .nf .xp { color: #545454; }

.postsbody .lts .ls .nf .xp p { margin: 0; }

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

#sidebar { float: right; width: 35%; min-width: 0; }

.bl { margin-top: 15px; margin-right: 15px; }

.bl .blc { margin-bottom: 15px; overflow: hidden; line-height: 21px; }

.bl .blc .searchform { display: flex; width: 100%; overflow: hidden; background: #FAFAFA; border-radius: 5px; }

.bl .blc .searchform .screen-reader-text { display: none; }

.bl .blc .searchform #s { flex: 1 1 auto; width: auto; min-width: 0; padding: 0 8px; border: 0; background: #EFEFEF; font-family: "Tauri", sans-serif; font-size: 14px; line-height: 27px; }

.bl .blc .searchform #searchsubmit { flex: 0 0 auto; width: auto; padding: 0 10px; border: 0; background: #3C97F3; color: #FFF; cursor: pointer; font-family: "Tauri", sans-serif; line-height: 27px; }

.bl .blc h3 { overflow: hidden; border-radius: 3px; background: #23282D; color: #FFF; font-size: 14px; text-transform: uppercase; }

.bl .blc h3 span { display: block; float: left; padding: 7px 10px; background: #3482D2; }

.bl .blc h3 i { display: block; float: left; width: 0; height: 0; border-top: 34px solid #3482D2; border-right: 34px solid transparent; }

.bl .blc ul { overflow: hidden; }

.bl .blc ul li { padding: 10px 0; overflow: hidden; border-bottom: 1px dashed #CCCBCB; }

.bl .blc a { color: #1F303C; overflow-wrap: anywhere; }

.bl .blc a:hover { color: #3C97F3; }

.bl .blc .spl li .img { float: left; width: 26%; overflow: hidden; }

.bl .blc .spl li .img .ltr { max-height: 40px; margin-right: 6px; overflow: hidden; }

.bl .blc .spl li .img .ltr img { display: block; width: 100%; height: auto; }

.bl .blc .spl li .nf { overflow: hidden; }

/* ========================= SINGLE POST / ARTICLE ========================= */

.ctn { padding: 15px; overflow-wrap: break-word; }

.ctn .ttl { margin: 10px 0; color: #142E40; font-size: 20px; line-height: normal; }

.ctn .th { margin-bottom: 15px; color: #999; font-size: 12px; line-height: 17px; }

.ctn .thm { margin-bottom: 15px; text-align: center; }

.ctn .thm img, .ctn .pst img { max-width: 100%; height: auto; }

.ctn .pst { margin-bottom: 10px; line-height: 21px; }

.ctn .pst iframe, .ctn .pst video { max-width: 100%; }

.ctn .pst table { display: block; max-width: 100%; overflow-x: auto; }

.ctn .tag { margin-bottom: 15px; color: #999; font-size: 12px; }

.ctn .tag a { color: #999; }

.alignleft, img.alignleft { float: left; margin-right: 10px; margin-bottom: 10px; }

.alignright, img.alignright { float: right; margin-bottom: 10px; margin-left: 10px; }

.aligncenter, img.aligncenter { display: block; margin-right: auto; margin-bottom: 10px; margin-left: auto; }

.wp-caption { max-width: 100%; }

.wp-caption img { max-width: 100%; height: auto; }

.pst h1, .pst h2, .pst h3, .pst h4, .pst h5, .pst h6 { margin-bottom: 5px; line-height: 22px; }

.ctn .pst ul, .ctn .pst ol { margin: 0 0 10px 20px; }

.ctn .pst ul { list-style: disc; }

.ctn .pst ol { list-style: decimal; }

.ctn .pst li { margin-bottom: 4px; }

.rtd { margin-bottom: 15px; overflow: hidden; }

.rtd li { padding: 10px 0; overflow: hidden; border-bottom: 1px dashed #CCCBCB; }

.rtd li .img { float: left; width: 17%; overflow: hidden; }

.rtd li .img .ltd { max-height: 50px; margin-right: 10px; overflow: hidden; }

.rtd li .img .ltd img { display: block; width: 100%; height: auto; }

.rtd li .nf { float: right; width: 83%; overflow: hidden; line-height: normal; }

.rtd li .nf h2 { font-size: 15px; }

.rtd li .nf h2 a { color: #142E40; }

/* ========================= TAGS & SHARE BUTTONS ========================= */

.pl { overflow: hidden; }

.pl .plt { background: #4F6065; }

.pl span { display: block; float: left; margin-right: 2px; padding: 0 7px; border-radius: 2px; background: #3482D2; color: #FFF; font-size: 11px; font-weight: 700; text-transform: uppercase; }

.shr { margin-bottom: 15px; }

.share-btn { display: inline-block; width: 4em; max-width: 100%; padding: 0.5em; border: 0; outline: none; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); color: #FFF; text-align: center; cursor: pointer; }

.share-btn:hover { color: #EEE; }

.share-btn:active { position: relative; top: 2px; box-shadow: none; color: #E2E2E2; }

.share-btn.share { background: #4F6065; font-weight: 700; text-transform: uppercase; }

.share-btn.twitter { background: #55ACEE; } .share-btn.google-plus { background: #DD4B39; } .share-btn.facebook { background: #3B5998; } .share-btn.linkedin { background: #4875B4; } .share-btn.email { background: #444; } .share-btn.stumbleupon { background: #EB4823; } .share-btn.reddit { background: #FF5700; }

.snip { margin-bottom: 15px; padding: 8px; background: #EFEFEF; color: #9E9E9E; font-size: 11px; font-weight: 700; }

/* ========================= PAGINATION ========================= */

.pagination { padding: 10px 0; font-size: 11px; font-weight: 700; line-height: normal; text-transform: uppercase; }

.pagination .page { display: flow-root; }

.pagination .page .left { float: left; }

.pagination .page .left .now { display: block; float: left; margin-right: 3px; padding: 5px 10px; border-radius: 3px; background: #3482D2; color: #FFF; }

.pagination .page .left a { display: block; float: left; margin-right: 3px; padding: 5px 10px; border-radius: 3px; background: #3C97F3; color: #FFF; }

.pagination .page .left a:hover { background: #3482D2; }

.pagination .page .right { float: right; padding: 5px 10px; border-radius: 3px; background: #3482D2; color: #FFF; }

/* ========================= BREADCRUMBS ========================= */

.cst { margin-top: 15px; }

.cst h1 { padding-bottom: 5px; border-bottom: 1px dashed #CCCBCB; color: #888; font-size: 12px; font-weight: 400; line-height: normal; }

#breadcrumbs { padding-bottom: 5px; overflow: hidden; border-bottom: 1px dashed #CCCBCB; color: #999; font-size: 11px; line-height: normal; list-style: none; }

#breadcrumbs a { color: #999; }

#breadcrumbs li { display: inline-block; margin-right: 3px; vertical-align: middle; }

#breadcrumbs .separator { color: #CCC; font-size: 15px; font-weight: 100; }

/* ========================= BLOCKQUOTE & CODE ========================= */

blockquote, q { margin: 10px 0; padding: 5px 10px; border-left: 5px solid #C1CED4; background: #EDF0F3; quotes: none; }

blockquote::before, blockquote::after, q::before, q::after { content: none; }

code { font-family: monospace; }

pre { max-width: 100%; margin: 10px 0; padding: 10px; overflow-x: auto; border-right: 1px solid #DDD; border-left: 3px solid #43966C; background: #FAFAFA; font-size: 13px; }

pre code { margin: 0; padding: 0; overflow: visible; border: 0; background: transparent; }

/* ========================= COMMENTS ========================= */

.commentarea { padding: 0; }

.commentarea input[type="checkbox"] { display: inline-block; margin: 0 5px 0 0; vertical-align: middle; -webkit-appearance: checkbox; appearance: auto; }

.commentarea h3 { margin-bottom: 10px; line-height: normal; }

.commentlist { overflow: hidden; }

.commentlist li { padding: 5px 0; overflow: hidden; }

.comment-body { margin-bottom: 5px; padding: 10px; overflow: hidden; border: 1px solid #DEDEDE; line-height: normal; }

.comment-author.vcard { background: #E6E6E6; }

.commentlist li .comment-meta { background: #E6E6E6; font-size: 12px; line-height: 17px; }

.commentlist li .comment-author img { float: left; width: 32px; height: 32px; margin-right: 7px; padding: 1px; border: 1px solid #D5D5D5; background: #FFF; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); }

.commentlist li .comment-author .fn { font-style: normal; font-weight: 700; }

.commentlist li .comment-author .fn a { color: #333; }

.commentlist li .comment-author .says { display: none; }

.commentlist li p { margin: 15px 0; line-height: normal; }

.commentlist li .reply { float: right; }

.commentlist li .reply a { display: block; padding: 1px 10px; border: 1px solid #CCC; border-radius: 3px; background: #F8F8F8; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); color: #777; font-family: "Open Sans", sans-serif; font-size: 11px; font-weight: 700; line-height: 23px; text-shadow: none; }

.commentlist li .children { margin-left: 20px; }

#respond input, #respond textarea { max-width: 100%; box-sizing: border-box; border: 1px solid #DDD; border-radius: 3px; font-family: "Open Sans", sans-serif; }

#respond input { padding: 5px; }

#respond #comment { display: block; width: 100%; padding: 10px 10px 5px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 3px; background: rgba(255, 255, 255, 0.85); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.12) inset; line-height: 18px; transition: border-color 0.3s, box-shadow 0.3s; }

#respond #comment:focus { border-color: #3C97F3; }

#respond #submit { padding: 5px 8px; border: 1px solid #DDD; border-radius: 3px; background: #FAFAFA; color: #555; font-family: "Open Sans", sans-serif; font-weight: 700; cursor: pointer; }

#respond #submit:hover { background: #FFF; color: #000; }

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

#footer { display: flow-root; padding: 10px 15px; border-top: 1px solid #DDD; background: #FAFAFA; color: #999; font-size: 10px; font-weight: 700; }

#footer .left { float: left; }

#footer .left ul li { float: left; margin-right: 10px; }

#footer .right { float: right; }

#footer a { color: #999; }

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

@media screen and (max-width: 769px) { #wrap { width: 100%; }

#header .logo img { max-height: 90px; }

.show-menu { display: block; overflow: hidden; }

.show-menu i { float: right; margin-right: 15px; font-size: 20px; line-height: 36px; }

.show-menu span { float: left; margin-left: 15px; }

#main-menu { width: 100%; padding: 0; }

#main-menu ul { position: static; display: none; float: none; width: 100%; }

#main-menu ul li { position: relative; float: none; width: 100%; }

#main-menu ul li a { width: auto; text-align: left; }

#main-menu ul li ul { position: static; display: none; width: 100%; max-width: 100%; box-shadow: none; }

#main-menu ul li:hover > ul, #main-menu ul li:focus-within > ul { display: block; }

#main-menu ul li ul li a { min-width: 0; padding-left: 25px; }

#main-menu ul li ul li ul { position: static; }

#footer .left { display: none; }

#footer .right { float: none; text-align: center; line-height: normal; } }

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

@media screen and (max-width: 655px) { .postsbody, #sidebar { float: none; width: 100%; }

.postsbody .lts { margin-right: 15px; margin-left: 15px; }

.bl { margin-right: 15px; margin-left: 15px; }

.ctn { padding: 12px; }

#footer .left, #footer .right { float: none; text-align: center; }

#footer .left { display: none; } }

@media screen and (max-width: 645px) { .postsbody .lts .ls .img .ltr img { min-height: 0; } }

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

@media screen and (max-width: 400px) { .postsbody .lts .ls .img { width: 35%; }

.postsbody .lts .ls .nf { width: 65%; }

.postsbody .lts .ls .nf .xp { display: none; }

.ctn .ttl { font-size: 18px; }

.share-btn { width: auto; min-width: 3em; } }

/* ========================= REDUCE MOTION ========================= */

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }