@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;700&family=Scheherazade+New:wght@400;700&family=Amiri:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,200..900;1,7..72,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {
	font-family: "Literata", "noto serif", serif;
	
}
a {
    	color: #B08642!important;
}


a:hover, a:focus {	
color:#865C18!important;
background-color: #fff!important;

}

.site-title {
	font-family: 'Playfair Display', 'Lora', serif;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.entry-title {
	font-family: 'Lora','Playfair Display', serif;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: #B08642!important;
	text-align: center;
	font-size: 32px; /* Playfair sudah cukup "besar" secara visual, tidak perlu dinaikkan setinggi Cormorant */
}

.entry-title, .widecolumn h2
{
	margin-bottom: 10px;
	
}

.entry-meta {
	font-size: 14px;
	text-align: center;
}

/* ==========================================
   CUSTOM ARABIC FONTS (Diperkuat untuk Mobile)
========================================== */

.font-amiri, 
.font-amiri p, 
.font-amiri span {
    font-family: 'Amiri', 'Traditional Arabic', 'Times New Roman', serif !important;
    font-size: 24px !important; /* Ditingkatkan agar lebih jelas di HP */
    direction: rtl !important;
    unicode-bidi: embed !important;
    line-height: 2 !important;
    text-align: center;
}

.font-lateef, 
.font-lateef p, 
.font-lateef span {
    font-family: 'Lateef', 'Traditional Arabic', serif !important;
    font-size: 26px !important; /* Lateef karakternya lebih kecil, jadi dibuat sedikit lebih besar */
    direction: rtl !important;
    unicode-bidi: embed !important;
    line-height: 1.8 !important;
    text-align: center;
}
.font-noto, 
.arabic-noto, 
.font-noto p, 
.arabic-noto p, 
.font-noto span, 
.arabic-noto span {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif !important;
    font-size: 25px !important;
    direction: rtl !important;
    unicode-bidi: embed !important;
    text-align: center;
    line-height: 2 !important;
}

.font-jelas, 
.arab, 
.font-jelas p, 
.arab p, 
 .font-jelas span, 
.arab span {
    font-family: 'Scheherazade New', 'Amiri', 'Traditional Arabic', serif !important;
    font-size: 25px !important; /* Ukuran pas dan sangat nyaman dibaca */
    direction: rtl !important;
    unicode-bidi: embed !important;
    line-height: 2.2 !important;
    text-align: center;
}

.hentry{
	padding-top: 6.0909%;
}

/* ==========================================
   ENTRY-CONTENT & QUOTE (REVISI — konsolidasi, tanpa duplikat)
   Catatan: sebelumnya blockquote didefinisikan 2x dengan font-size
   berbeda (19px lalu 15px) sehingga saling bentrok. Sekarang hanya
   ada satu definisi supaya hasilnya konsisten.
========================================== */


.entry-content, cite, .wp-block-pullquote {
    font-size: 18px; /* naik dari 17.5px, sedikit lebih nyaman di mobile */
    font-family: 'Literata','PT Serif', serif!important;
    color: #222;
    line-height: 1.75; /* diturunkan dari 1.85, biar paragraf tidak terlalu "mengambang" */
  font-style: normal;
}

.entry-content p {
    margin-bottom: 22px;
    font-size: 18px; /* dikunci eksplisit agar seragam dengan aturan di atas */
    color: #222;
}

.entry-content p.has-drop-cap:first-letter {
    font-size: 62px;
    margin: 10px 10px 15px 0;
    line-height: 0.8;
}

/* Hierarki heading — sebelumnya h2/h3/h4 semua 25px (rata, tanpa tingkatan).
   Sekarang dibedakan agar pembaca bisa scan struktur artikel. */
.entry-content h2 {
    color: #444;
    font-size: 28px;
    font-family: 'Lora', serif;
    font-weight: 600;
    line-height: 1.4;
	letter-spacing: 0.03em;
    margin: 40px 0 18px;
}
.entry-content h3 {
    color: #444;
    font-size: 23px;
    font-family: 'Lora', 'Playfair Display', serif;
    font-weight: 600;
    line-height: 1.4;
    margin: 32px 0 16px;
}
.entry-content h4 {
    color: #444;
    font-size: 20px;
    font-family: 'Lora', 'Playfair Display',  serif;
    font-weight: 500;
    line-height: 1.4;
    margin: 28px 0 14px;
}

/* Blockquote & wp-block-quote — SATU-SATUNYA definisi (jangan digandakan lagi) */
blockquote, .wp-block-quote {
    position: relative;
    border: none;
    padding: 4px 0 20px 45px;
    margin: 2em 0;
    font-size: 19px; /* sengaja lebih besar dari body text (18px) */
    line-height: 1.75;
    color: #333;
}

blockquote:before, .wp-block-quote:before {
    content: "\201D";
    color: #B08642;
    font-size: 60px; /* diturunkan dari 75px, supaya tidak kepotong/nabrak teks di layar sempit */
    position: absolute;
    left: 0px;
    top: -8px;
    line-height: 1;
}

.wp-block-pullquote:before {
	 content: none;
}

.wp-block-quote p, .wp-block-pullquote p {
	margin-bottom: 20px;
}

/* ==========================================
   CALLOUT INSTAGRAM (trik :has — hasil diskusi panjang, JANGAN DIUBAH)
   Tujuan: supaya embed Instagram bisa dibungkus rapi dalam blockquote
   tanpa perlu kode embed panjang dari Instagram. Dibungkus di dalam
   @supports supaya validator CSS lama tidak menganggap :has() invalid.
========================================== */
@supports (selector(:has(p))) {
    
    /* Hilangkan kutip jika di dalam ada is-callout */
    blockquote:has(.is-callout):before,
    .wp-block-quote:has(.is-callout):before {
        content: none !important;
    }

    /* Beri garis jika di dalam ada is-callout */
    blockquote:has(.is-callout),
    .wp-block-quote:has(.is-callout) {
        border-left: 4px solid #B08642 !important;
        padding: 10px 0 10px 25px !important;
    }
}

/* Style isi teks callout-nya */
.is-callout {
    font-style: normal !important;
    font-size: 1em !important;
    color: #444 !important;
    line-height: 1.6 !important;
    display: block; /* Memastikan dia mengambil ruang yang benar */
}

.entry-content ul {
		margin-top: 0!important;
}
.entry-content li {

  padding-left: 0.4em;   /* ruang untuk bullet */
	  margin: 0 0 10px 17px;
}

ul > li > ul {
	margin-top: 10px!important;
}
ul > li > ul > li {
	margin:10px 0 0 0px!important;
}

.instagram-media  {
	  margin-left: auto !important;
    margin-right: auto !important;
}

.arti-doa {
	text-align: center;
	 max-width:540px;  
		  margin-left: auto !important;
    margin-right: auto !important;
}

.small-ig
{
	font-size: 14px!important;
	line-height: 1.4em;
		max-width: 520px!important;
	margin-left: auto !important;
    margin-right: auto !important;
	text-align: center;
	margin-bottom:28px!important;
}

/* Style khusus untuk YouTube Shorts/Video Vertikal agar ke tengah */
/* Untuk Desktop & Tablet (Layar di atas 600px) */
@media screen and (min-width: 600px) {
    .yt-shorts-container {
        width: 540px; /* Di laptop ukurannya tetap segini */
        margin: 20px auto; 
    }
}

/* Untuk Mobile (Layar di bawah 600px) */
@media screen and (max-width: 599px) {
    .yt-shorts-container {
        width: 90%; /* Di HP, ambil hampir seluruh lebar layar agar puas nontonnya */
        margin: 10px auto;
    }
}

/* Base style yang berlaku untuk keduanya */
.yt-shorts-wrapper {
    position: relative;
    padding-bottom: 177.77%; /* Rasio 9:16 (Vertikal) */
    height: 0;
    overflow: hidden;
    border-radius: 15px;
}

.yt-shorts-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Menghilangkan tanda hubung pemutus kata */
* {
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;
    -moz-hyphens: none !important;
    
    /* Memastikan kata tidak dipaksa pecah di tengah */
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* ==========================================
   VIDEO CONTAINER STYLES (4:5 & 9:16)
========================================== */

/* Container pembatas ukuran embed video 4:5 */
.video-potrait {
    width: 432px;
    max-width: 100%; /* Supaya tetap aman dan responsif di layar HP */
    aspect-ratio: 4 / 5; /* Menjaga rasio 4:5 yang pas */
    margin: 20px auto; /* Posisi otomatis di tengah */
    overflow: hidden;
    border-radius: 12px; /* Sudut melengkung yang halus */
}

/* Container pembatas ukuran embed video 9:16 */
.video-story {
    width: 432px;
    max-width: 100%; /* Supaya tetap aman dan responsif di layar HP */
    aspect-ratio: 9 / 16; /* Menjaga rasio 9:16 yang pas */
    margin: 20px auto; /* Posisi otomatis di tengah */
    overflow: hidden;
    border-radius: 12px; /* Sudut melengkung yang halus */
}

/* Memastikan iframe/video di dalam container 4:5 memenuhi ruang */
.video-potrait iframe,
.video-potrait video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border: none;
}

/* Memastikan iframe/video di dalam container 9:16 memenuhi ruang */
.video-story iframe,
.video-story video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border: none;
}