/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

  /* tambahan */
:root{
  --hk-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --hk-heading: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

body, .elementor, .site, .site-content {
  font-family: var(--hk-body) !important;
  font-weight: 400;
}

h1,h2,h3,h4,h5,h6,.elementor-heading-title {
  font-family: var(--hk-heading) !important;
  font-weight: 600;          /* variable axis wght bergerak mengikuti nilai ini */
}

/* Inter opsz akan otomatis mengikuti size jika font-optical-sizing:auto;
   kamu juga bisa paksa opsz manual (opsional):
.elementor-heading-title { font-variation-settings: "wght" 650, "opsz" 18; } */



@font-face {
  font-family: 'Space Grotesk';
  src: url('https://hanskristo.com/wp-content/uploads/2025/10/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('https://hanskristo.com/wp-content/uploads/2025/10/Inter-VariableFont_opszwght.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('https://hanskristo.com/wp-content/uploads/2025/10/Inter-Italic-VariableFont_opszwght.ttf') format('truetype');
  font-style: italic;
  font-display: swap;
}


body {
  background-color: black; /* Test styling */
}

.maroon-box {
  background-color: #400000; /* Warna maroon */
  aspect-ratio: 16 / 5;      /* Proporsi lebar x tinggi */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  box-sizing: border-box;
}


@media (min-width: 768px) and (max-width: 1024px) {
  /* Global container padding */
  .elementor-container, .elementor-section-wrap {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Headings */
  h1 {
    font-size: 28px !important;
  }

  h2, h3 {
    font-size: 24px !important;
  }

  /* Paragraph */
  .elementor-widget-text-editor p {
    font-size: 16px !important;
    line-height: 1.75 !important;
  }

  /* Section padding */
  .elementor-section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  /* Gallery: 2 columns on tablet */
  .elementor-gallery .elementor-gallery-item {
    width: 48% !important;
    margin: 1%;
  }

  /* Video responsiveness */
  .elementor-widget-video iframe,
  .elementor-widget-video video {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }

  /* Image responsiveness */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  .hero-image {
    max-width: 80%;
    margin: 0 auto;
    display: block;
  }

  .hero-scroll-text {
    max-height: 350px; /* kamu bisa atur tinggi ideal */
    overflow-y: auto;
    padding: 16px;
    margin-top: 16px;
    background-color: rgba(0, 0, 0, 0.4); /* optional dark bg transparan */
    color: #fff;
    font-size: 16px;
    line-height: 1.7;
    border-radius: 8px;
  }

  .hero-scroll-text::-webkit-scrollbar {
    width: 6px;
  }

  .hero-scroll-text::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 3px;
  }

}


@media (max-width: 768px) {
  /* Global container padding */
  .elementor-container, .elementor-section-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Headings */
  h1, h2, h3 {
    font-size: 22px !important;
    line-height: 1.4 !important;
  }

  /* Paragraphs and rich text */
  .elementor-widget-text-editor p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    letter-spacing: 0.4px;
  }

  /* Section spacing */
  .elementor-section {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  /* Gallery: force single column */
  .elementor-gallery .elementor-gallery-item {
    width: 100% !important;
    margin-bottom: 12px;
  }

  /* Image responsiveness */
  img {
    max-width: 100%;
    height: auto !important;
  }

  /* Fix video block to stay in screen */
  .elementor-widget-video iframe,
  .elementor-widget-video video {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }

  /* Make grid layouts stack vertically */
  .elementor-container.elementor-grid {
    display: block !important;
  }

  /* Newsletter / text highlight blocks */
  .elementor-widget-text-editor {
    padding: 12px !important;
  }

  /* Optional: center-align texts on small screen */
  .elementor-widget-text-editor,
  .elementor-widget-heading {
    text-align: center !important;
  }
}


.kotakkebawah {
  display: flex;
  flex-direction: column; /* Default (horizontal) */
}





/* Hilangkan sisa spasi title blocksy */
.blocksy-page-title {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hilangkan padding atas dari konten utama */
.site-content,
.ct-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Pastikan section pertama di Elementor mepet ke atas */
.elementor-section.elementor-top-section:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.page-id-9 .blocksy-page-title,
body.page-id-9 .ct-container,
body.page-id-9 .site-content,
body.page-id-9 .elementor-section.elementor-top-section:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

header.site-header {
  position: relative !important;
}
 
.ct-panel-content .ct-header-text img {
    content: url('http://hanskristo.com/wp-content/uploads/2025/07/Hanskristologo-01-1.svg') !important;
    width: 230px !important;        /* coba 300px */
    max-width: none !important;     /* hilangkan batas max */
    height: auto !important;
    display: block;
    margin: 0 auto;                 /* supaya center */
}

.ct-panel-content .ct-header-text {
    max-width: none !important;
    text-align: center !important;

/* Gallery grid fix */
.gallery-grid .elementor-gallery__container {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* jumlah kolom responsif */
  gap: 10px; /* jarak antar gambar */
}

.gallery-grid .elementor-gallery__image {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1; /* paksa kotak */
  overflow: hidden;
}

.gallery-grid .elementor-gallery__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
	
@media (min-width: 835px) and (max-width: 1024px) {
  .kotakkebawah {
    display: flex;
    flex-direction: column; /* ubah jadi vertical biar tidak timpang */
    gap: 20px;
  }

  .ct-container {
    max-width: 95% !important; /* supaya lebih rapat di iPad Pro */
    margin: 0 auto;
  }
}
	
	.kotakkebawah {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
	
/* Container dasar */
.hover1, .hover2, .hover3 {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}

/* Zoom efek container */
.hover1:hover,
.hover2:hover,
.hover3:hover {
  transform: scale(1.02); /* efek zoom ringan */
}

/* Overlay warna */
.hover1::before,
.hover2::before,
.hover3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, 0.25); /* default merah hover1 */
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.hover2::before {
  background: rgba(0, 255, 0, 0.25); /* hijau hover2 */
}

.hover3::before {
  background: rgba(0, 0, 255, 0.25); /* biru hover3 */
}

/* Aktifkan overlay saat hover */
.hover1:hover::before,
.hover2:hover::before,
.hover3:hover::before {
  opacity: 1;
}

/* Pastikan konten di atas overlay */
.hover1 > *,
.hover2 > *,
.hover3 > * {
  position: relative;
  z-index: 2;
}
	
	
	
.digitalpaintingimg {
  position: relative;
  overflow: hidden;
}

.digitalpaintingimg img {
  transition: transform 0.4s ease;
}

.digitalpaintingimg:hover img {
  transform: scale(1.05);
}

.digitalpaintingimg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.digitalpaintingimg:hover::before {
  opacity: 1;
}


@media (max-width: 1024px) and (orientation: portrait) {
  .headkotak { 
    display: flex !important;
    flex-direction: column !important;
  }
}


/* Mobile: pilih otomatis 1x/2x sesuai DPR */
@media (max-width: 767px){
  .hero{
    min-height: 80svh; /* kurangi area paint biar LCP lebih cepat */
    background-image: image-set(
      url('/wp-content/uploads/2025/10/hero-fallback-500.webp') 1x,
      url('/wp-content/uploads/2025/10/hero-fallback-800.webp') 2x
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* jangan fixed; bikin berat */
  }
}

@media (max-width:767px){
  .hero .elementor-background-video-container,
  .hero .elementor-background-video-embed,
  .hero video{ display:none !important; }
}