/* ============================================
   Kartu "Ayat Hari Ini" -- sepuluh gaya visual, dipakai bergantian.
   Desain yang sama dengan kartu Instagram (1080x1350) tetapi digambar
   dengan CSS: seluruh ukuran dinyatakan dalam satuan --u = lebar kartu/1080
   (container query unit), jadi bentuknya identik di HP maupun komputer.
   --t = --u dikali faktor kecil/besar hasil js/ayat-hari-ini.js agar teks
   panjang tetap muat dan teks pendek terisi.
   ============================================ */
.ayat-wadah { container-type: inline-size; width: 100%; max-width: 500px; margin: 0 auto; }
.ayat-kartu { --u: calc(100cqw / 1080); --t: calc(var(--u) * var(--k, 1)); }
.ayat-kartu{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(170 * var(--u)) calc(110 * var(--u)) calc(190 * var(--u))}
.ayat-kartu .bg{position:absolute;inset:0;z-index:0}
.ayat-kartu .in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:100%}
.ayat-kartu .tema{font:600 calc(24 * var(--t))/1.5 Poppins;letter-spacing:.28em;text-transform:uppercase;margin-bottom:calc(46 * var(--t))}
.ayat-kartu .ref{margin-bottom:calc(38 * var(--t))}
.ayat-kartu .kut{width:100%}
.ayat-kartu .rh{margin-top:calc(52 * var(--t));width:100%}
.ayat-kartu .rh .lb{display:flex;align-items:center;justify-content:center;gap:.7em;font:400 calc(22 * var(--t))/1 Poppins;margin-bottom:calc(18 * var(--t))}
.ayat-kartu .rh .lb::before,.ayat-kartu .rh .lb::after{content:"";width:3.2em;height:1px;background:currentColor;opacity:.6}
.ayat-kartu .ft{position:absolute;z-index:3;left:0;right:0;bottom:calc(62 * var(--u));display:flex;align-items:center;justify-content:center;gap:calc(18 * var(--u));font:500 calc(24 * var(--u))/1.2 Poppins;letter-spacing:.04em}
.ayat-kartu .ft .lg{width:calc(64 * var(--u));height:calc(64 * var(--u));border-radius:50%;background:#fff;padding:calc(5 * var(--u));box-shadow:0 max(1px,calc(2 * var(--u))) calc(10 * var(--u)) rgba(0,0,0,.18)}
.ayat-kartu .ft .lg img{width:100%;height:100%;object-fit:contain}
.ayat-kartu .ft b{font-weight:600;display:block}
.ayat-kartu .ft span{opacity:.75;font-size:calc(21 * var(--u))}
.ayat-kartu .ft .tx{text-align:left}
.ayat-kartu.s1{background:linear-gradient(160deg,#fbf3e2,#f3dfae 60%,#e9c77d)}
.ayat-kartu.s1 .bg{background:radial-gradient(circle at 50% 0,rgba(255,255,255,.85),transparent 55%)}
.ayat-kartu.s1 .bg::after{content:"";position:absolute;inset:calc(44 * var(--u));border:max(1px,calc(2 * var(--u))) solid #b99559;outline:max(1px,calc(1 * var(--u))) solid rgba(185,149,89,.5);outline-offset:calc(10 * var(--u))}
.ayat-kartu.s1 .tema{color:#96702f}
.ayat-kartu.s1 .ref{font:700 calc(74 * var(--t))/1.1 'Playfair Display';color:#1A3A6B}
.ayat-kartu.s1 .kut{font:italic 500 calc(50 * var(--t))/1.4 'Playfair Display';color:#3b3328}
.ayat-kartu.s1 .rh .lb{color:#96702f}
.ayat-kartu.s1 .rh p{font:500 calc(36 * var(--t))/1.45 Poppins;color:#1A3A6B}
.ayat-kartu.s1 .ft{color:#5b4a2a}
.ayat-kartu.s2{background:linear-gradient(180deg,#0d1b3a,#1a3a6b 80%)}
.ayat-kartu.s2 .bg{background-image:radial-gradient(max(1px,calc(2 * var(--u))) max(1px,calc(2 * var(--u))) at 12% 18%,#fff8,transparent),radial-gradient(max(1px,calc(3 * var(--u))) max(1px,calc(3 * var(--u))) at 80% 12%,#ffe9a8,transparent),radial-gradient(max(1px,calc(2 * var(--u))) max(1px,calc(2 * var(--u))) at 30% 70%,#fff7,transparent),radial-gradient(max(1px,calc(2 * var(--u))) max(1px,calc(2 * var(--u))) at 90% 60%,#fff8,transparent),radial-gradient(max(1px,calc(3 * var(--u))) max(1px,calc(3 * var(--u))) at 65% 85%,#ffe9a8aa,transparent),radial-gradient(max(1px,calc(2 * var(--u))) max(1px,calc(2 * var(--u))) at 8% 88%,#fff6,transparent),radial-gradient(max(1px,calc(2 * var(--u))) max(1px,calc(2 * var(--u))) at 50% 6%,#fff8,transparent),radial-gradient(circle at 80% 8%,rgba(255,226,150,.28),transparent 28%)}
.ayat-kartu.s2 .tema{color:#e8c77d}
.ayat-kartu.s2 .ref{font:700 calc(70 * var(--t))/1.1 'Cormorant Garamond';color:#f1d38b}
.ayat-kartu.s2 .kut{font:italic 500 calc(54 * var(--t))/1.38 'Cormorant Garamond';color:#fff}
.ayat-kartu.s2 .rh .lb{color:#e8c77d}
.ayat-kartu.s2 .rh p{font:400 calc(35 * var(--t))/1.45 Poppins;color:#dfe8f7}
.ayat-kartu.s2 .ft{color:#dfe8f7}
.ayat-kartu.s3{background:linear-gradient(170deg,#e7efe2,#bcd3b4 70%,#9fc093)}
.ayat-kartu.s3 .bg svg{position:absolute;opacity:.5}
.ayat-kartu.s3 .tema{color:#3d6b3a}
.ayat-kartu.s3 .ref{font:700 calc(70 * var(--t))/1.1 Lora;color:#26471f}
.ayat-kartu.s3 .kut{font:italic 500 calc(48 * var(--t))/1.45 Lora;color:#25361f}
.ayat-kartu.s3 .rh .lb{color:#3d6b3a}
.ayat-kartu.s3 .rh p{font:500 calc(35 * var(--t))/1.45 Poppins;color:#26471f}
.ayat-kartu.s3 .ft{color:#2c4a28}
.ayat-kartu.s4{background:radial-gradient(circle at 50% 35%,#8c2a39,#5e1623 80%)}
.ayat-kartu.s4 .bg::before, .ayat-kartu.s4 .bg::after{content:"";position:absolute;width:calc(260 * var(--u));height:calc(260 * var(--u));border:max(1px,calc(3 * var(--u))) solid #d8b26a;opacity:.7}
.ayat-kartu.s4 .bg::before{left:calc(50 * var(--u));top:calc(50 * var(--u));border-right:0;border-bottom:0}
.ayat-kartu.s4 .bg::after{right:calc(50 * var(--u));bottom:calc(50 * var(--u));border-left:0;border-top:0}
.ayat-kartu.s4 .tema{color:#e8c77d}
.ayat-kartu.s4 .ref{font:700 calc(72 * var(--t))/1.1 'Playfair Display';color:#f4d99a}
.ayat-kartu.s4 .kut{font:italic 500 calc(48 * var(--t))/1.42 'Playfair Display';color:#fdf1dc}
.ayat-kartu.s4 .rh .lb{color:#e8c77d}
.ayat-kartu.s4 .rh p{font:400 calc(34 * var(--t))/1.45 Poppins;color:#f7e6cc}
.ayat-kartu.s4 .ft{color:#f7e6cc}
.ayat-kartu.s5{background:linear-gradient(180deg,#cfe6fb,#fdeede 75%,#ffd9bd)}
.ayat-kartu.s5 .bg::before{content:"";position:absolute;width:calc(520 * var(--u));height:calc(520 * var(--u));border-radius:50%;background:rgba(255,255,255,.55);left:calc(-140 * var(--u));top:calc(-120 * var(--u));filter:blur(calc(8 * var(--u)))}
.ayat-kartu.s5 .bg::after{content:"";position:absolute;width:calc(420 * var(--u));height:calc(420 * var(--u));border-radius:50%;background:rgba(255,206,160,.5);right:calc(-120 * var(--u));bottom:calc(-100 * var(--u));filter:blur(calc(10 * var(--u)))}
.ayat-kartu.s5 .tema{color:#e0763a}
.ayat-kartu.s5 .ref{font:600 calc(68 * var(--t))/1.12 Poppins;color:#17365d}
.ayat-kartu.s5 .kut{font:500 calc(48 * var(--t))/1.45 Poppins;color:#2a3d57}
.ayat-kartu.s5 .rh .lb{color:#e0763a}
.ayat-kartu.s5 .rh p{font:italic 500 calc(36 * var(--t))/1.45 Lora;color:#17365d}
.ayat-kartu.s5 .ft{color:#2a3d57}
.ayat-kartu.s6{background:#f4ecda}
.ayat-kartu.s6 .bg{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .35  0 0 0 0 .2  0 0 0 .22 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");box-shadow:inset 0 0 calc(220 * var(--u)) rgba(120,85,40,.28)}
.ayat-kartu.s6 .tema{color:#8a6a3a}
.ayat-kartu.s6 .ref{font:700 calc(70 * var(--t))/1.1 'Cormorant Garamond';color:#3b2a14}
.ayat-kartu.s6 .kut{font:italic 600 calc(54 * var(--t))/1.38 'Cormorant Garamond';color:#3b2a14}
.ayat-kartu.s6 .rh .lb{display:none}
.ayat-kartu.s6 .rh p{font:700 calc(56 * var(--t))/1.2 Caveat;color:#a2432d;transform:rotate(-1.5deg)}
.ayat-kartu.s6 .ft{color:#5a4529}
.ayat-kartu.s7{background:linear-gradient(165deg,#3a2a6b,#a1466a 55%,#f0955e)}
.ayat-kartu.s7 .bg::before{content:"\201C";position:absolute;left:calc(36 * var(--u));top:calc(-30 * var(--u));font:700 calc(380 * var(--u))/1 'Playfair Display';color:rgba(255,255,255,.14)}
.ayat-kartu.s7 .tema{color:#ffd9a8}
.ayat-kartu.s7 .ref{font:700 calc(70 * var(--t))/1.1 'Playfair Display';color:#fff}
.ayat-kartu.s7 .kut{font:italic 500 calc(49 * var(--t))/1.42 'Playfair Display';color:#fff4ea}
.ayat-kartu.s7 .rh .lb{color:#ffd9a8}
.ayat-kartu.s7 .rh p{font:500 calc(35 * var(--t))/1.45 Poppins;color:#fff}
.ayat-kartu.s7 .ft{color:#fff}
.ayat-kartu.s8{background:#fff}
.ayat-kartu.s8 .bg::before{content:"";position:absolute;left:calc(120 * var(--u));right:calc(120 * var(--u));top:calc(120 * var(--u));height:max(1px,calc(3 * var(--u)));background:#111}
.ayat-kartu.s8 .bg::after{content:"";position:absolute;left:calc(120 * var(--u));right:calc(120 * var(--u));bottom:calc(150 * var(--u));height:max(1px,calc(1 * var(--u)));background:#bbb}
.ayat-kartu.s8 , .ayat-kartu.s8{align-items:flex-start;text-align:left}
.ayat-kartu.s8 .in{align-items:flex-start}
.ayat-kartu.s8 .rh .lb{justify-content:flex-start}
.ayat-kartu.s8 .rh .lb::before{display:none}
.ayat-kartu.s8 .tema{color:#777;font-weight:500}
.ayat-kartu.s8 .ref{font:700 calc(82 * var(--t))/1.05 Montserrat;color:#111;letter-spacing:-.02em}
.ayat-kartu.s8 .kut{font:300 calc(50 * var(--t))/1.42 Montserrat;color:#222}
.ayat-kartu.s8 .rh .lb{color:#b0322a}
.ayat-kartu.s8 .rh p{font:500 calc(36 * var(--t))/1.45 Montserrat;color:#111}
.ayat-kartu.s8 .ft{color:#444}
.ayat-kartu.s9{background:#0e3b3d}
.ayat-kartu.s9 .bg{background:conic-gradient(from 180deg at 50% -8%,transparent 0deg,rgba(255,229,160,.16) 8deg,transparent 18deg,rgba(255,229,160,.12) 30deg,transparent 42deg,rgba(255,229,160,.16) 54deg,transparent 66deg,rgba(255,229,160,.12) 78deg,transparent 90deg,transparent 270deg,rgba(255,229,160,.12) 282deg,transparent 294deg,rgba(255,229,160,.16) 306deg,transparent 318deg,rgba(255,229,160,.12) 330deg,transparent 342deg)}
.ayat-kartu.s9 .bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% -5%,rgba(255,232,170,.5),transparent 42%)}
.ayat-kartu.s9 .tema{color:#f3d58c}
.ayat-kartu.s9 .ref{font:700 calc(70 * var(--t))/1.1 'Cormorant Garamond';color:#f6dc97}
.ayat-kartu.s9 .kut{font:italic 500 calc(53 * var(--t))/1.4 'Cormorant Garamond';color:#fff}
.ayat-kartu.s9 .rh .lb{color:#f3d58c}
.ayat-kartu.s9 .rh p{font:400 calc(35 * var(--t))/1.45 Poppins;color:#d9ecea}
.ayat-kartu.s9 .ft{color:#d9ecea}
.ayat-kartu.s10{background:#fff8f2}
.ayat-kartu.s10 .bg::before{content:"";position:absolute;width:calc(640 * var(--u));height:calc(640 * var(--u));border-radius:50%;background:#ffd3dc;left:calc(-210 * var(--u));top:calc(-170 * var(--u));filter:blur(calc(30 * var(--u)));opacity:.85}
.ayat-kartu.s10 .bg::after{content:"";position:absolute;width:calc(640 * var(--u));height:calc(640 * var(--u));border-radius:50%;background:#cfe4ff;right:calc(-210 * var(--u));bottom:calc(-190 * var(--u));filter:blur(calc(30 * var(--u)));opacity:.9}
.ayat-kartu.s10 .bg i{position:absolute;width:calc(420 * var(--u));height:calc(420 * var(--u));border-radius:50%;background:#fff1b8;right:calc(-100 * var(--u));top:calc(90 * var(--u));filter:blur(calc(40 * var(--u)));opacity:.8}
.ayat-kartu.s10 .tema{color:#c0467a}
.ayat-kartu.s10 .ref{font:700 calc(70 * var(--t))/1.1 'Playfair Display';color:#35264d}
.ayat-kartu.s10 .kut{font:italic 500 calc(49 * var(--t))/1.45 Lora;color:#35264d}
.ayat-kartu.s10 .rh .lb{color:#c0467a}
.ayat-kartu.s10 .rh p{font:500 calc(35 * var(--t))/1.45 Poppins;color:#35264d}
.ayat-kartu.s10 .ft{color:#4a3a63}