/* ==========================================================================
   Ruang Design - Grid & layout Theme 1 (pengganti Skeleton 960 + media query berbasis pixel)
   Grid 16 kolom fluid berbasis flexbox: lebar menyesuaikan layar (max 960px) tanpa
   perlu ukuran pixel per breakpoint. Nama class lama (container, columns, twelve, four, ...)
   tetap dipakai agar HTML tema tidak berubah.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
img, iframe, video { max-width: 100%; }
img { height: auto; }
.clearfix::after, .container::after { content: ""; display: table; clear: both; }

.container { display: flex; flex-wrap: wrap; width: 100%; max-width: 960px; margin: 0 auto; padding: 0; position: relative; }
.container > * { min-width: 0; }
.container > :not(.column):not(.columns) { flex: 0 0 100%; }
.container .column, .container .columns { float: none; margin: 0 10px; }
.container .column.alpha, .container .columns.alpha { margin-left: 0; }
.container .column.omega, .container .columns.omega { margin-right: 0; }
.row { margin-bottom: 20px; }

/* Lebar kolom: N/16 dari lebar container dikurangi margin kiri-kanan */
.container .one.column, .container .one.columns { flex: 0 0 auto; width: calc(6.25% - 20px); }
.container .offset-by-one { margin-left: calc(6.25% + 10px); }
.container .two.columns { flex: 0 0 auto; width: calc(12.5% - 20px); }
.container .offset-by-two { margin-left: calc(12.5% + 10px); }
.container .three.columns { flex: 0 0 auto; width: calc(18.75% - 20px); }
.container .offset-by-three { margin-left: calc(18.75% + 10px); }
.container .four.columns { flex: 0 0 auto; width: calc(25.0% - 20px); }
.container .offset-by-four { margin-left: calc(25.0% + 10px); }
.container .five.columns { flex: 0 0 auto; width: calc(31.25% - 20px); }
.container .offset-by-five { margin-left: calc(31.25% + 10px); }
.container .six.columns { flex: 0 0 auto; width: calc(37.5% - 20px); }
.container .offset-by-six { margin-left: calc(37.5% + 10px); }
.container .seven.columns { flex: 0 0 auto; width: calc(43.75% - 20px); }
.container .offset-by-seven { margin-left: calc(43.75% + 10px); }
.container .eight.columns { flex: 0 0 auto; width: calc(50.0% - 20px); }
.container .offset-by-eight { margin-left: calc(50.0% + 10px); }
.container .nine.columns { flex: 0 0 auto; width: calc(56.25% - 20px); }
.container .offset-by-nine { margin-left: calc(56.25% + 10px); }
.container .ten.columns { flex: 0 0 auto; width: calc(62.5% - 20px); }
.container .offset-by-ten { margin-left: calc(62.5% + 10px); }
.container .eleven.columns { flex: 0 0 auto; width: calc(68.75% - 20px); }
.container .offset-by-eleven { margin-left: calc(68.75% + 10px); }
.container .twelve.columns { flex: 0 0 auto; width: calc(75.0% - 20px); }
.container .offset-by-twelve { margin-left: calc(75.0% + 10px); }
.container .thirteen.columns { flex: 0 0 auto; width: calc(81.25% - 20px); }
.container .offset-by-thirteen { margin-left: calc(81.25% + 10px); }
.container .fourteen.columns { flex: 0 0 auto; width: calc(87.5% - 20px); }
.container .offset-by-fourteen { margin-left: calc(87.5% + 10px); }
.container .fifteen.columns { flex: 0 0 auto; width: calc(93.75% - 20px); }
.container .offset-by-fifteen { margin-left: calc(93.75% + 10px); }
.container .sixteen.columns { flex: 0 0 auto; width: calc(100.0% - 20px); }
.container .offset-by-sixteen { margin-left: calc(100.0% + 10px); }
.container .one-third.column { flex: 0 0 auto; width: calc(28.125% - 20px); }
.container .two-thirds.column { flex: 0 0 auto; width: calc(71.875% - 20px); }

/* Agar layout tidak menempel ke tepi layar pada tablet/ponsel */
@media (max-width: 1049px) { #wrap { padding: 0 12px; } #wrap > header, #wrap > footer { margin: 0 -12px; padding-left: 12px; padding-right: 12px; } }

/* ---- Artikel (gambar | tanggal | teks) --------------------------------- */
article.blog-post { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 20px; width: 100%; overflow: hidden; padding-bottom: 20px; }
.blog-post .post-image.variant { order: 1; flex: 0 0 160px; width: 160px; height: auto; float: none; }
.blog-post .post-image.variant img { width: 160px; height: 160px; object-fit: cover; }
.blog-post .post-left { order: 2; float: none; margin-right: 0; flex: 0 0 80px; }
.twelve .blog-post .post-right, .twelve .blog-post .post-right.variant, .sixteen .blog-post .post-right { order: 3; float: none; width: auto; flex: 1 1 260px; min-width: 0; }
.page-content img, .font_detail2 img { max-width: 100%; height: auto; }
.font_detail2, .font_detail3 { overflow-wrap: anywhere; }
.font_detail2 table { max-width: 100%; display: block; overflow-x: auto; }

/* ---- Form --------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="password"], input[type="url"], textarea, select { max-width: 100%; padding: 8px 10px; }
#contact-form .contact-form p { max-width: 100%; }
#contact-form .contact-form input[type="text"], #contact-form .contact-form input[type="email"], #contact-form .contact-form textarea { width: 100%; }

/* ---- Menu: dropdown murni CSS (tanpa library) ------------------------- */
.navigation li { position: relative; }
.navigation li:hover > ul, .navigation li:focus-within > ul, .navigation li.buka > ul { display: block; }
.navigation ul ul li { float: none; }
.navigation a:focus-visible { outline: 2px solid #1b9ad6; outline-offset: -2px; }

/* ---- Tablet (<= 959px) -------------------------------------------------- */
@media (max-width: 959px) {
    .container .columns, .container .column { margin: 0 10px; }
    .navigation ul li a { padding-left: 12px; padding-right: 12px; }
}

/* ---- Ponsel (<= 767px): semua kolom menumpuk ----------------------------- */
@media (max-width: 767px) {
    .container .columns[class], .container .column[class] { flex: 0 0 100%; width: 100%; margin: 0 0 16px; }
    .container [class*="offset-by"] { margin-left: 0; }
    .blog-post .post-image.variant { flex: 0 0 100%; width: 100%; }
    .blog-post .post-image.variant img { width: 100%; height: auto; max-height: 260px; }
    .blog-post .post-left { flex: 0 0 100%; margin: 8px 0; }
    .twelve .blog-post .post-right, .twelve .blog-post .post-right.variant, .sixteen .blog-post .post-right { flex: 0 0 100%; }
    .page-content .img-float-left, .page-content .img-float-right { float: none; margin: 0 0 12px; }
    #sidebar { margin-top: 24px; }
    .social { float: none; }
}

/* Menu pada tablet: boleh turun baris tanpa celah besar */
@media (min-width: 768px) and (max-width: 959px) {
    .navigation ul { display: flex; flex-wrap: wrap; justify-content: flex-end; }
    .navigation ul li a { padding-top: 16px; padding-bottom: 16px; }
}

/* ---- Grid portfolio / album / video: kartu berjajar (flex) --------------- */
#portfolio-wrapper { display: flex; flex-wrap: wrap; width: 100%; }
#portfolio-wrapper .portfolio-item { margin-bottom: 20px; }
@media (min-width: 768px) and (max-width: 959px) { #portfolio-wrapper .four.columns { width: calc(33.333% - 20px); } }
@media (min-width: 480px) and (max-width: 767px) { #portfolio-wrapper .four.columns[class] { flex: 0 0 calc(50% - 20px); width: calc(50% - 20px); margin: 0 10px 20px; } }

/* ---- Captcha + tombol kirim satu baris sejajar --------------------------- */
.captcha-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; clear: both; margin: 14px 0 0; }
.captcha-row img { border: 1px solid #e1e1e1; border-radius: 3px; display: block; }
.captcha-row .captcha-refresh { font-size: 24px; line-height: 1; text-decoration: none; color: #555; }
.captcha-row input[type="text"] { width: 150px !important; height: 38px; margin: 0; }
.captcha-row input[type="submit"] { height: 38px; margin: 0; padding: 0 20px; cursor: pointer; }

/* ---- Tombol kembali ke atas ------------------------------------------------ */
.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 44px; height: 44px; line-height: 42px; text-align: center; font-size: 22px;
    border-radius: 50%; background: #3a3a3a; color: #fff; text-decoration: none; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s, background .2s; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.to-top.tampil { opacity: .9; visibility: visible; }
.to-top:hover { background: #1b9ad6; color: #fff; }

/* Input email & url tampil sama seperti input teks */
input[type="email"], input[type="url"] { border: 1px solid #e7e7e7; background: #fcfcfc; color: #909090; font: 11px/17px 'OpenSansRegular'; }
#contact-form .contact-form textarea { width: 100% !important; }