/* =====================================================================
   ornamen.css — muat SETELAH style.css dan revamp.css
   Isi: daun emas (gold leaf), bunga cat air, pembatas ornamen,
        kelopak jatuh, efek kilau emas, dan 4 tema baru:
        rustic, floral, modern, minimalis.
   Hapus file ini + tag <link>-nya (dan ornamen.js) = kembali ke tampilan sebelumnya.
   ===================================================================== */

/* ---------- 1. PENGATUR ORNAMEN (bisa diubah per tema) ---------- */
:root{
  --wc-op:.55;          /* kepekatan bunga cat air */
  --leaf-op:.9;         /* kepekatan daun emas */
  --wc-d:block;         /* block / none */
  --leaf-d:block;
  --petal-d:block;
  --wc1:#e58a8a;--wc2:#d4af37;--wc3:#f5e08a;   /* warna cat air (tema merah emas) */
}
body[data-theme="sage"]     {--wc1:#cfe0c8;--wc2:#9fc4a0;--wc3:#f0dc8c}
body[data-theme="navy"]     {--wc1:#9fb4dc;--wc2:#b8c4d6;--wc3:#eef2fa}
body[data-theme="blush"]    {--wc1:#e8a4ae;--wc2:#f2c4c6;--wc3:#b76e79}
body[data-theme="hitam"]    {--wc1:#d4af37;--wc2:#8a6f1f;--wc3:#f0d777;--wc-op:.4}
body[data-theme="ivory"]    {--wc1:#d9a1a1;--wc2:#e9cfc8;--wc3:#b8935a}
body[data-theme="sagecream"]{--wc1:#a9bda0;--wc2:#cfd9c6;--wc3:#b87850}

/* ---------- 2. TEMA BARU ---------- */
/* Rustic Kraft: kertas kraft hangat, emas tembaga */
body[data-theme="rustic"]{
  --bg1:#F3E7D3;--bg2:#E3CFAE;--text:#4A3626;--head:#6B4426;
  --gold:#9A6424;--gold-l:#C9974A;--btn-text:#fff;
  --card-bg:rgba(255,250,240,.72);--input-bg:#FFFBF3;--input-text:#4A3626;
  --glow:rgba(176,122,46,.14);--shade:rgba(74,54,38,.2);
  --ui-bg:#FFFBF3;--ui-fg:#8A5A22;--alt:rgba(139,99,57,.10);
  --bf-a:#B5651D;--bf-as:#F3E7D3;--bf-b:#7B8B5A;--bf-bs:#F3E7D3;--bf-body:#4A3626;
  --wc1:#c9855a;--wc2:#8f9a6a;--wc3:#e0b873;--wc-op:.5
}
/* Floral Watercolor: pink, lavender, hijau lembut */
body[data-theme="floral"]{
  --bg1:#FFF8FB;--bg2:#F3E4F0;--text:#4D3A4F;--head:#8A4F7D;
  --gold:#9E6F48;--gold-l:#D2A97F;--btn-text:#fff;
  --card-bg:rgba(255,255,255,.74);--input-bg:#fff;--input-text:#4D3A4F;
  --glow:rgba(176,128,90,.12);--shade:rgba(77,58,79,.16);
  --ui-bg:#fff;--ui-fg:#8A4F7D;--alt:rgba(201,179,224,.16);
  --bf-a:#E8A7C0;--bf-as:#fff;--bf-b:#C9B3E0;--bf-bs:#FFF8FB;--bf-body:#8A4F7D;
  --wc1:#e8a7c0;--wc2:#a8c4a0;--wc3:#c9b3e0;--wc-op:.85
}
/* Modern Gold: putih bersih, tegas, aksen emas */
body[data-theme="modern"]{
  --bg1:#FAFAF8;--bg2:#ECECE8;--text:#2B2B2B;--head:#1A1A1A;
  --gold:#9A7A2B;--gold-l:#C9A24B;--btn-text:#111;
  --card-bg:rgba(255,255,255,.85);--input-bg:#fff;--input-text:#2B2B2B;
  --glow:rgba(154,122,43,.08);--shade:rgba(0,0,0,.14);
  --ui-bg:#fff;--ui-fg:#9A7A2B;--alt:rgba(0,0,0,.035);
  --bf-a:#C9A24B;--bf-as:#fff;--bf-b:#2B2B2B;--bf-bs:#C9A24B;--bf-body:#1A1A1A;
  --r:6px;--wc-op:0;--wc-d:none;--leaf-op:.6;--petal-d:none
}
/* Minimalis: putih, garis tipis, tanpa ornamen berat */
body[data-theme="minimalis"]{
  --bg1:#FFFFFF;--bg2:#F4F4F2;--text:#333;--head:#111;
  --gold:#7E6F4C;--gold-l:#B5A57F;--btn-text:#fff;
  --card-bg:#fff;--input-bg:#fff;--input-text:#333;
  --glow:rgba(0,0,0,.03);--shade:rgba(0,0,0,.10);
  --ui-bg:#fff;--ui-fg:#7E6F4C;--alt:rgba(0,0,0,.025);
  --bf-a:#B5A57F;--bf-as:#fff;--bf-b:#333;--bf-bs:#fff;--bf-body:#111;
  --r:2px;--wc-d:none;--leaf-d:none;--petal-d:none
}
body[data-theme="modern"] .btn,
body[data-theme="minimalis"] .btn{border-radius:3px}
body[data-theme="modern"] #frame .corner{opacity:.3}
body[data-theme="modern"] #cover .corner{opacity:.4}
body[data-theme="minimalis"] #frame .corner{opacity:.14}
body[data-theme="minimalis"] #cover .corner{opacity:.25}
body[data-theme="minimalis"] .photo-arch,
body[data-theme="minimalis"] .photo-round{border-radius:0}
body[data-theme="minimalis"] .card{box-shadow:none}
/* Rustic: tekstur kertas + kartu berjahit */
body[data-theme="rustic"]::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.45;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.35%200%200%200%200%20.25%200%200%200%200%20.15%200%200%200%20.55%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E")}
body[data-theme="rustic"] .card{border-style:dashed;border-width:1.5px;
  border-color:color-mix(in srgb,var(--gold) 55%,transparent)}

/* ---------- 3. EFEK EMAS (daun, pembatas) ---------- */
@keyframes orn-leaf{
  from{rotate:calc(var(--r0,0deg) - 1.8deg)}
  to  {rotate:calc(var(--r0,0deg) + 1.8deg)}}
@keyframes orn-bloom{from{transform:scale(1)}to{transform:scale(1.05)}}
@keyframes orn-fall{
  0%  {transform:translate3d(0,-6vh,0) rotate(0);opacity:0}
  10% {opacity:.7}
  85% {opacity:.6}
  100%{transform:translate3d(var(--drift,30px),108vh,0) rotate(540deg);opacity:0}}

#content{overflow-x:clip}   /* ornamen yang melebar tidak membuat layar bisa digeser ke samping */

/* daun emas: .leaf (di hero) dan ::after di tiap section */
.leaf,
#content section.wrap::after{
  content:"";position:absolute;pointer-events:none;z-index:-1;
  width:clamp(110px,30vw,240px);aspect-ratio:264/90;
  opacity:var(--leaf-op);display:var(--leaf-d);
  background:linear-gradient(115deg,var(--gold) 0%,var(--gold-l) 30%,var(--gold) 52%,var(--gold-l) 78%,var(--gold) 100%) 0 0/220% 100%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20264%2090'%3E%3Cpath%20d='M4%2072C70%2070%20140%2052%20234%2014'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'/%3E%3Cg%20fill='%23000'%3E%3Cpath%20transform='translate(32%2070)%20rotate(-57)%20scale(1.1)'%20d='M0%200C7-10%2022-10%2032%200%2022%2010%207%2010%200%200Z'/%3E%3Cpath%20transform='translate(65%2066)%20rotate(24)%20scale(1.05)'%20d='M0%200C7-10%2022-10%2032%200%2022%2010%207%2010%200%200Z'/%3E%3Cpath%20transform='translate(100%2059)%20rotate(-65)%20scale(1.0)'%20d='M0%200C7-10%2022-10%2032%200%2022%2010%207%2010%200%200Z'/%3E%3Cpath%20transform='translate(136%2049)%20rotate(20)%20scale(0.95)'%20d='M0%200C7-10%2022-10%2032%200%2022%2010%207%2010%200%200Z'/%3E%3Cpath%20transform='translate(175%2036)%20rotate(-68)%20scale(0.85)'%20d='M0%200C7-10%2022-10%2032%200%2022%2010%207%2010%200%200Z'/%3E%3Cpath%20transform='translate(212%2023)%20rotate(15)%20scale(0.75)'%20d='M0%200C7-10%2022-10%2032%200%2022%2010%207%2010%200%200Z'/%3E%3Cpath%20transform='translate(232%2015)%20rotate(-22)%20scale(0.9)'%20d='M0%200C7-10%2022-10%2032%200%2022%2010%207%2010%200%200Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20264%2090'%3E%3Cpath%20d='M4%2072C70%2070%20140%2052%20234%2014'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'/%3E%3Cg%20fill='%23000'%3E%3Cpath%20transform='translate(32%2070)%20rotate(-57)%20scale(1.1)'%20d='M0%200C7-10%2022-10%2032%200%2022%2010%207%2010%200%200Z'/%3E%3Cpath%20transform='translate(65%2066)%20rotate(24)%20scale(1.05)'%20d='M0%200C7-10%2022-10%2032%200%2022%2010%207%2010%200%200Z'/%3E%3Cpath%20transform='translate(100%2059)%20rotate(-65)%20scale(1.0)'%20d='M0%200C7-10%2022-10%2032%200%2022%2010%207%2010%200%200Z'/%3E%3Cpath%20transform='translate(136%2049)%20rotate(20)%20scale(0.95)'%20d='M0%200C7-10%2022-10%2032%200%2022%2010%207%2010%200%200Z'/%3E%3Cpath%20transform='translate(175%2036)%20rotate(-68)%20scale(0.85)'%20d='M0%200C7-10%2022-10%2032%200%2022%2010%207%2010%200%200Z'/%3E%3Cpath%20transform='translate(212%2023)%20rotate(15)%20scale(0.75)'%20d='M0%200C7-10%2022-10%2032%200%2022%2010%207%2010%200%200Z'/%3E%3Cpath%20transform='translate(232%2015)%20rotate(-22)%20scale(0.9)'%20d='M0%200C7-10%2022-10%2032%200%2022%2010%207%2010%200%200Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  animation:shine 9s linear infinite,orn-leaf 7s ease-in-out infinite alternate}
.leaf-hl{left:-.5rem;top:19%;--r0:-6deg;rotate:-6deg}
.leaf-hr{right:-.5rem;bottom:17%;--r0:6deg;rotate:6deg;scale:-1 -1}

/* section: daun bergantian kiri/kanan di bagian atas */
#content section.wrap{--r0:0deg}
#content>section.wrap:nth-of-type(odd)::after {top:.3rem;left:-.4rem}
#content>section.wrap:nth-of-type(even)::after{top:.3rem;right:-.4rem;scale:-1 1}

/* pembatas ornamen: di bawah judul tiap section, di hero, dan di footer */
.divider,
#content .wrap>h2.script::after{
  background:linear-gradient(90deg,var(--gold),var(--gold-l),var(--gold)) 0 0/200% 100%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2020'%3E%3Cpath%20d='M0%2010H58M142%2010H200'%20stroke='%23000'%20stroke-width='1'%20fill='none'/%3E%3Cpath%20d='M100%203L106.5%2010%20100%2017%2093.5%2010Z'/%3E%3Cpath%20d='M60%2010C66%204%2074%204%2082%2010%2074%2016%2066%2016%2060%2010Z'/%3E%3Cpath%20d='M140%2010C134%204%20126%204%20118%2010%20126%2016%20134%2016%20140%2010Z'/%3E%3Ccircle%20cx='88'%20cy='10'%20r='1.6'/%3E%3Ccircle%20cx='112'%20cy='10'%20r='1.6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2020'%3E%3Cpath%20d='M0%2010H58M142%2010H200'%20stroke='%23000'%20stroke-width='1'%20fill='none'/%3E%3Cpath%20d='M100%203L106.5%2010%20100%2017%2093.5%2010Z'/%3E%3Cpath%20d='M60%2010C66%204%2074%204%2082%2010%2074%2016%2066%2016%2060%2010Z'/%3E%3Cpath%20d='M140%2010C134%204%20126%204%20118%2010%20126%2016%20134%2016%20140%2010Z'/%3E%3Ccircle%20cx='88'%20cy='10'%20r='1.6'/%3E%3Ccircle%20cx='112'%20cy='10'%20r='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:shine 8s linear infinite}
.divider{display:block;width:min(220px,60%);height:18px;margin:1.3rem auto 0}
#content .wrap>h2.script::after{content:"";display:block;width:150px;height:16px;margin:.7rem auto 0}

/* ---------- 4. BUNGA CAT AIR ---------- */
/* bunga SVG (hero & footer) */
.wc{position:absolute;pointer-events:none;z-index:-1;width:min(62vw,340px);height:auto;
  opacity:var(--wc-op);display:var(--wc-d);animation:orn-bloom 10s ease-in-out infinite alternate;will-change:transform}
.wc-a{top:5%;right:-16%}
.wc-b{bottom:3%;left:-16%;rotate:200deg}
.wc-c{bottom:0;left:50%;translate:-50% 0;width:min(50vw,260px)}

/* noda cat air lembut di tiap section (tanpa gambar) */
#content section.wrap::before,
#content .hero::after{
  content:"";position:absolute;inset:-1.5rem -1rem;z-index:-1;pointer-events:none;
  opacity:var(--wc-op);display:var(--wc-d);
  background:
    radial-gradient(40% 30% at 4% 10%,color-mix(in srgb,var(--wc1) 70%,transparent),transparent 72%),
    radial-gradient(30% 24% at 16% 0%,color-mix(in srgb,var(--wc3) 60%,transparent),transparent 72%),
    radial-gradient(38% 30% at 97% 96%,color-mix(in srgb,var(--wc2) 70%,transparent),transparent 72%),
    radial-gradient(28% 22% at 86% 100%,color-mix(in srgb,var(--wc1) 55%,transparent),transparent 72%)}
#content .hero::after{inset:0}

/* ---------- 5. KELOPAK JATUH ---------- */
#petals{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden;display:var(--petal-d)}
#petals i{position:absolute;top:0;opacity:0;border-radius:100% 0 100% 0;
  background:linear-gradient(135deg,color-mix(in srgb,var(--wc1) 80%,#fff),var(--wc1));
  animation:orn-fall linear infinite;will-change:transform}

/* ---------- 6. LAYAR LEBAR ---------- */
@media (min-width:900px){
  .wc{width:min(30vw,440px)}
  .wc-c{width:min(24vw,300px)}
  .leaf-hl{top:22%}
  .leaf-hr{bottom:20%}
  #content>section.wrap:nth-of-type(odd)::after{top:1.2rem}
  #content>section.wrap:nth-of-type(even)::after{top:1.2rem}
}

/* ---------- 7. GERAK DIKURANGI ---------- */
@media (prefers-reduced-motion:reduce){
  #petals{display:none}
  .wc,.leaf,.divider,
  #content section.wrap::after,
  #content .wrap>h2.script::after{animation:none}
}

/* ---------- 8. HP: TOMBOL MUSIK DI POJOK ATAS, MENU BAWAH PENUH ---------- */
@media (max-width:899px){
  #musicBtn{top:12px;right:12px;bottom:auto;width:42px;height:42px;font-size:1.15rem;
    background:color-mix(in srgb,var(--ui-bg) 88%,transparent);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 18px var(--shade)}
  #topnav{right:12px;justify-content:space-between}
  #topnav{gap:0;padding:.35rem}
  #topnav a{flex:1 1 auto;text-align:center;padding:.5rem .5rem;font-size:.72rem;letter-spacing:.02em}
}