/*
Theme Name: Rentalan
Version: 1.0
Theme URI: http://www.oketheme.com/themes/rentalan-theme
Author: Tri Yuli Kurniawan
Author URI: http://www.oketheme.com
Description: Rentalan adalah tema WordPress serbaguna yang dirancang untuk berbagai bisnis rental, mulai dari kendaraan, peralatan camping, alat berat, dan berbagai jenis rental lainnya. Tema ini menawarkan desain responsif, sistem pemesanan yang efisien, payment gateway, user interface yang mudah, SEO-friendly dan tentu saja free update dan full support!
Tags: rentalan, oketheme, rental, penyewaan, service, booking, booking service
Requires at least: 5.0
Requires PHP: 8.2
*/

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

:root {
    --color1: #4d48bc;
    --color2: #48d183;
    --colorbg: #fafafa;
    --colorborder: #f5f5f5;
    --colorbody: #333333;
    --colordark: #222222;
    --colorlight: #fefefe;
    --colorwhite: #ffffff;
    --maxwidth: 1300px;
    --bradius: 20px;
    --inbradius: calc(var(--bradius) / 2);
    --autopad: calc((100% - var(--maxwidth)) / 2);
}

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

body {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    line-height: 1.6em;
    color: var(--colorbody);
    background: var(--colorlight);
    margin: 0;
}

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

ul,
li {
    margin: 0;
    padding: 0;
}

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

a{
    color: var(--color1);
    transition: .5s;
}

a:hover {
    color: var(--color2);
}

a:active,
a:hover,
a:link,
a:visited {
    text-decoration: none;
}

/* ============================== */
/* HEADING */
/* ============================== */

h1 {
    font-size: 1.6em;
}

h2 {
    font-size: 1.4em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5 {
    font-size: 1em;
}

h1,
h2,
h3,
h4,
h5 {
    margin: 20px 0;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--color1);
}
b {
    font-weight: 600;
}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
    margin-top: 0;
}

/* ============================== */
/* FORM, INPUT, SELECT, TEXTAREA, RADIO & BUTTON */
/* ============================== */

input:not([type='radio']):not([type='checkbox']),
button,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

input[readonly],
textarea[readonly] {
    background: var(--colorbg)!important;
    color: #AAA!important;
}


input:not([type='radio']):not([type='checkbox']):not([type='submit']):not([type='image']),
select,
textarea {
    padding: .5em 1em;
    outline: 0;
    background: var(--colorbg);
    color: var(--colorbody);
    border: 1px solid var(--colorborder);
    border-radius: var(--inbradius);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.027);
}

.bttn,
.button-primary,
input[type='submit'],
button {
    cursor: pointer;
    padding: .7em 1.1em;
    background: var(--color1);
    border: 0;
    outline: 0;
    color: var(--colorwhite);
    transition: .5s;
    display: inline-flex;
    border-radius: var(--inbradius);
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1em;
}
.bttn:hover,
.button-primary:hover,
.form-submit input:hover,
button:hover {
    color: var(--colorwhite);
    background: var(--color2);
}
.bttn:focus {
    color: var(--colorwhite);
}

.underlink {
    padding-bottom: 5px;
    border-bottom: 1px dashed var(--color1);
    font-weight: 500;
    text-transform: uppercase;
    font-size: .8em;
    letter-spacing: .1em;
}

input[type=text]:focus,
select:focus,
textarea:focus {
    background: #FCFCFC;
}

textarea::placeholder,
input::placeholder {
    color: #AAA;
}

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

blockquote {
    font-size: 110%;
    width: 95%;
    margin: 20px auto;
    padding: 10px 40px;
    border: 1px solid var(--colorborder);
    position: relative;
    background: var(--colorbg);
    border-radius: var(--bradius);
}

blockquote::before {
    font-family: arial, sans-serif;
    content: "\201C";
    color: var(--color1);
    font-size: 6em;
    position: absolute;
    left: 0;
    top: 15px;
}

blockquote::after {
    content: '';
}

code {
    background: var(--colorbg);
    border: 1px solid var(--colorborder);
    padding: 15px;
    display: block;
    border-radius: var(--inbradius);
}

/* ============================== */
/* FIXED IMAGE STYLES - YANG INI YANG BENAR */
/* ============================== */

/* 1. RESET DASAR UNTUK SEMUA GAMBAR */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 2. FIX UNTUK WORDPRESS IMAGES KHUSUS */
.wp-post-image,
.size-medium,
.attachment-medium {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    
    /* Aspect ratio fix */
    aspect-ratio: 400/267;
}

/* 3. HAPUS SEMUA HEIGHT FORCED */
.wp-post-image,
.attachment-medium,
.size-medium {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
}

/* 4. LOADING ANIMATION YANG BENAR */
.wp-post-image {
    background-color: #f5f5f5;
    background-image: linear-gradient(90deg, #f5f5f5 0%, #e8e8e8 50%, #f5f5f5 100%);
    background-size: 200% 100%;
}

/* Animasi hanya untuk gambar yang belum load */
.wp-post-image:not([src]),
.wp-post-image[src=""],
.wp-post-image[data-src] {
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Hentikan animasi saat gambar selesai load */
.wp-post-image[src]:not([src=""]) {
    animation: none;
    background: none;
}

/* 5. FIX CONTAINER UNTUK THUMBNAILS */
.post-thumbnail,
article > a,
.loop-item > a {
    display: block;
    overflow: hidden;
    position: relative;
    aspect-ratio: 400/267;
}

.post-thumbnail img,
article > a img,
.loop-item > a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.post-thumbnail:hover img,
article > a:hover img,
.loop-item > a:hover img {
    transform: scale(1.05);
}

/* 6. FIX SIZE KHUSUS UNTUK GAMBAR */
/* Gambar 400x267 */
img[src*="400x267"],
.wp-post-image[src*="400x267"] {
    max-width: min(100%, 400px) !important;
}

/* Gambar 648x432 */
img[src*="648x432"],
.wp-post-image[src*="648x432"] {
    max-width: min(100%, 648px) !important;
}

/* 7. MEDIA QUERIES UNTUK RESPONSIVE */
@media (max-width: 767px) {
    .wp-post-image,
    .size-medium,
    .attachment-medium {
        max-width: min(100%, 400px) !important;
        margin: 0 auto;
    }
}

@media (min-width: 768px) {
    .wp-post-image,
    .size-medium,
    .attachment-medium {
        max-width: min(100%, 648px) !important;
        margin: 0 auto;
    }
    
    /* Desktop container */
    .post-thumbnail,
    article > a,
    .loop-item > a {
        aspect-ratio: 648/432;
    }
}

/* 8. WP RESET IMAGE & CAPTION */
.wp-caption,
img,
img.alignnone,
p img {
    max-width: 100%;
}

a img {
    border: none;
}

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.aligncenter {
    display: block;
    margin: 10px auto;
}

img.alignright {
    display: inline;
    float: right;
    margin: 0 0 5px 5px;
}

img.alignleft {
    display: inline;
    float: left;
    margin: 0 5px 5px 0;
}

.wp-caption img {
    margin: 0;
    padding: 0;
    border: none;
}

.wp-caption p.wp-caption-text {
    font-size: .8em;
    margin: 0;
    text-align: center;
}

.wp-caption.aligncenter {
    display: block;
    margin: 10px auto;
}

.wp-caption.alignleft {
    float: left;
    margin: 5px 10px 5px 0;
}

.wp-caption.alignright {
    float: right;
    margin: 5px 0 5px 10px;
}

/* ============================== */
/* BLINKER ANIMATION */
/* ============================== */

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.blink {
    animation: blinker 1s linear infinite;
}

/* ============================== */
/* MOVEINRIGT ANIMATION */
/* ============================== */

@keyframes moveInRight {
    0% {
        opacity: 0;
        transform: translateX(-50px)
    }

    80% {
        transform: translateX(10px)
    }

    100% {
        opacity: 1;
        transform: translateX(0px)
    }
}

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

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

::-webkit-scrollbar-track {
    background: var(--colorborder);
}

::-webkit-scrollbar-thumb {
    background: var(--color1);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color2);
}

body ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* ============================== */
/* FONTS SIZE & COLOR */
/* ============================== */

.small {
    font-size: .8em!important;
}

.medium {
    font-size: .9em!important;
}

.big {
    font-size: 1.5em!important;
}

.jumbo {
    font-size: 2.7em!important;
}

.hidden {
    font-size: 0;
}

.color1 {
    color: var(--color1);
}
.color2 {
    color: var(--color2);
}
.swap {
    background: var(--color2);
}
.swap.hover:hover {
    background: var(--color1);
}

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

.info,
.notice,
.sukses,
.warning {
    width: 100%;
    padding: 15px;
    background: var(--colorlight);
    border: 1px solid var(--colorborder);
    overflow: hidden;
    border-radius: var(--inbradius);
}

.notice {
    background: #FFFFEC;
    border-color: #FFB973;
    color: #FF8000;
}

.warning {
    background: #ffe2e2;
    border-color: #f7b1b1;
    color: red;
}

.sukses {
    background: #D9F4DB;
    border-color: #4CAF50;
    color: #4CAF50;
}

/* ============================== */
/* EXTRA */
/* ============================== */

.latin {
    font-size: 130%;
    font-weight: 500;
}

.rounded {
    border-radius: var(--bradius);
}

.circle {
    border-radius: 50%;
}

.nm {
    margin: 0 !important;
}

.nm-top {
    margin-top: 0 !important;
}

.nm-bottom {
    margin-bottom: 0 !important;
}

.nolist {
    list-style: none;
}

.center {
    text-align: center;
}

.coret {
    text-decoration: line-through;
}

.elipsis {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.relative {
    position: relative;
}

/* ============================== */
/* FLEX */
/* ============================== */

.flex-container {
    display: flex;
}
.flex-container.column {
    flex-direction: column;
}
.flex-container.column.nm > * {
    margin: 0;
}

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

.grid-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}
.grid-container.two-col {
    grid-template-columns: repeat(2, 1fr);
}
.grid-container.three-col {
    grid-template-columns: repeat(3, 1fr);
}
.grid-container.four-col {
    grid-template-columns: repeat(4, 1fr);
}

/* ============================== */
/* GAP */
/* ============================== */

.gap-5 {
    gap: 5px!important;
}
.gap-10 {
    gap: 10px!important;
}
.gap-15 {
    gap: 15px!important;
}
.gap-20 {
    gap: 20px!important;
}
.gap-30 {
    gap: 30px!important;
}
.gap-40 {
    gap: 40px!important;
}
.gap-50 {
    gap: 50px!important;
}

/* ============================== */
/* ALIGN */
/* ============================== */

.align-center {
    align-items: center!important;
}
.align-start {
    align-items: flex-start!important;
}
.align-end {
    align-items: flex-end!important;
}
.align-baseline {
    align-items: baseline!important;
}

/* ============================== */
/* OBJECT FIT COVER */
/* ============================== */

.ofc img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* ============================== */
/* ---------------- END RESET ---------------- */
/* ============================== */

/* OWL SLIDER */

.megaslider .owl-controls .owl-buttons div {
    background: var(--colorbg);
    border-radius: var(--inbradius);
}

.megaslider .owl-controls .owl-buttons .owl-prev {
    left: 80px;
}

.megaslider .owl-controls .owl-buttons .owl-next {
    right: 80px;
}

.megaslider.owl-carousel .owl-buttons .owl-prev,.megaslider.owl-carousel .owl-buttons .owl-next {
    transition: .5s;
    opacity: .05;
}

.megaslider.owl-carousel:hover .owl-buttons .owl-prev {
    left: 50px;
    opacity: .5;
}

.megaslider.owl-carousel:hover .owl-buttons .owl-next {
    right: 50px;
    opacity: .5;
}

/* ============================== */
/* POPUP - FANCYBOX*/
/* ============================== */

.popup {
    min-width: 300px;
    max-width: 780px;
    display: none;
    border-radius: var(--bradius);
    padding: 15px;
    background: var(--colorlight);
}

.popup a {
    outline: none;
}

.popup ul li {
    padding: 10px 0;
    border-bottom: 1px solid var(--colorbg);
}

.popup iframe, .popup img {
    border-radius: var(--inbradius);
}

.popup blockquote {
    font-style: unset;
    padding: 0;
    border: none;
    background: none;
    margin: 0 auto!important;
}

.popup blockquote::before {
    content: '';
}

.fancybox-button:hover svg {
    color: var(--colorwhite);
}
.fancybox-close-small {
    background: var(--colorlight);
    transition: .3s;
}

/* ============================== */
/* Tabset Custom */
/* ============================== */

.tab-panel {
    border-radius: var(--bradius);
    background: var(--colorlight);
    border-color: var(--colorborder);
}
.tabset > label {
    border-top-right-radius: var(--inbradius);
    border-top-left-radius: var(--inbradius);
    padding-top: 5px;
}
.tabset label.edit-post a{
    color: #ccc;
}
.tabset label.edit-post:hover a{
    color: var(--color1);
}
.tabset label:first-of-type {
    margin-left: 20px;
}
.tabset > input:checked + label {
    background: var(--colorlight);
    border-color: var(--colorborder);
    border-bottom: 1px solid var(--colorlight);
}
.tabset > label:hover,
.tabset > input:focus + label,
.tabset > input:checked + label {
    color: var(--color1);
}
.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
    background: var(--color2);
}

/* ============================== */
/* BG Transparent */
/* ============================== */

.bgtrans:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .2;
    filter: grayscale(1);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* ============================== */
/* HSCROLL */
/* ============================== */

.hscroll {
    overflow-x: auto;
    white-space: nowrap; 
}
.hscroll::-webkit-scrollbar {
    display: none;
}

/* ============================== */
/* SEO */
/* ============================== */

.xeo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ============================== */
/* FIXES LAINNYA */
/* ============================== */

/* Memperbesar area klik khusus link author di meta data */
span.author a {
    padding: 10px 5px;
    margin: -10px -5px;
}

/* CSS untuk logo khusus */
.site-logo img,
#logo img {
    width: 300px;
    height: 70px;
}

/* FIX untuk Footer Layout Shift */
#footer {
    position: relative;
    min-height: 50px;
}

#footer::before {
    content: "";
    display: block;
    height: 40px;
    visibility: hidden;
    pointer-events: none;
}

/* Setelah konten dinamis dimuat (contoh dengan kelas .loaded) */
#footer.loaded::before {
    visibility: visible;
    background: transparent;
}

/* ⚡ EMERGENCY CSS OVERRIDE - TAMBAHKAN PALING BAWAH ⚡ */

/* HAPUS SEMUA HEIGHT FORCED - LEVEL 9999 */
img.wp-post-image,
.wp-post-image,
.size-medium,
.attachment-medium,
.attachment-medium.size-medium.wp-post-image,
article img,
.loop img,
.post-thumbnail img,
.entry-content img,
body .wp-post-image,
html .wp-post-image,
* > .wp-post-image {
    /* HAPUS height forced */
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    
    /* FIX aspect ratio */
    aspect-ratio: 400/267 !important;
    
    /* Force display block */
    display: block !important;
    
    /* Reset position */
    position: static !important;
}

/* FIX CONTAINER HEIGHT */
.post-thumbnail,
article > a,
.loop-item > a,
.hentry .post-thumbnail {
    height: auto !important;
    min-height: auto !important;
    aspect-ratio: 400/267 !important;
    display: block !important;
    overflow: hidden !important;
}

/* FORCE IMAGE INSIDE CONTAINER */
.post-thumbnail img,
article > a img,
.loop-item > a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* ============================== */
/* FIX PARENT CONTAINER - TAMBAHKAN PALING BAWAH */
/* ============================== */

/* 1. FIX ARTICLE/POST CONTAINER */
article.hentry,
article.post,
.loop article,
.article-loop .post,
.entry,
.type-post {
    /* Hapus semua height restrictions */
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    
    /* Reset display */
    display: block !important;
    overflow: visible !important;
}

/* 2. FIX GRID/FLEX PARENT */
.grid-container article,
.flex-container article,
.row > article,
.column > article,
[class*="col-"] > article {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 3. FIX POST THUMBNAIL CONTAINER */
.post-thumbnail,
.entry-thumbnail,
article > a.pigura,
article > figure,
.entry-image,
article > .post-thumbnail {
    /* Hapus height */
    height: auto !important;
    min-height: auto !important;
    
    /* Set aspect ratio */
    aspect-ratio: 400/267 !important;
    
    /* Container styling */
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    
    /* Reset margin/padding */
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. FIX IMAGE INSIDE CONTAINER */
.post-thumbnail .wp-post-image,
.entry-thumbnail .wp-post-image,
article > a.pigura .wp-post-image,
article > figure .wp-post-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    
    /* Reset */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 5. FIX FOR DESKTOP */
@media (min-width: 768px) {
    .post-thumbnail,
    .entry-thumbnail,
    article > a.pigura {
        aspect-ratio: 648/432 !important;
    }
}

/* 6. FIX LAYOUT ISSUES */
.loop,
.posts-grid,
.blog-grid,
.articles-grid {
    /* Grid container harus stretch */
    align-items: stretch !important;
}

/* 7. NUCLEAR OPTION - Hapus semua height 220px */
[style*="height:220px"],
[style*="height: 220px"],
[style*="height=220"],
[style*="height= 220"] {
    height: auto !important;
    min-height: auto !important;
}

/* 8. FIX INLINE STYLES VIA ATTRIBUTE SELECTOR */
[style] {
    /* Jangan hapus semua, tapi perbaiki yang height:220px */
}

/* 9. FIX SPECIFIC CLASSES YANG MUNGKIN ADA */
.pigura,
.thumbnail,
.post-image,
.featured-image,
.entry-image {
    height: auto !important;
    aspect-ratio: 400/267 !important;
}

/* 10. FIX WORDPRESS CORE CLASSES */
.wp-post-image,
.attachment-post-thumbnail,
.size-post-thumbnail {
    /* Pastikan tidak ada parent yang mengatur height */
    container-type: inline-size;
}

/* Update pada kontainer utama */
.wa-container { 
    position: fixed; 
    bottom: 20px; /* Turunkan sedikit agar lebih pas di jempol */
    right: 20px; 
    z-index: 10000; 
    font-family: Arial, sans-serif; 
    /* Tambahkan ini untuk mencegah overflow */
    max-width: 100vw; 
}

/* Update pada Popup */
.wa-popup { 
    position: absolute; 
    bottom: 70px; 
    right: 0; 
    width: 300px; 
    background: white; 
    border-radius: 12px; 
    box-shadow: 0 8px 24px rgba(0,0,0,0.2); 
    display: none; 
    flex-direction: column; 
    overflow: hidden; 
    animation: wa-slide 0.3s ease;
}

/* PERBAIKAN KHUSUS MOBILE */
@media (max-width: 480px) { 
    .wa-container {
        right: 15px; /* Lebih mepet ke pinggir di HP */
        bottom: 15px;
    }
    .wa-popup { 
        width: 85vw; /* Gunakan unit VW agar lebarnya mengikuti layar HP */
        max-width: 320px;
        right: 0; 
    } 
}