/*
 * Kolase foto hero: satu foto utama dan dua foto pendamping.
 * Satu sumber aturan mencegah benturan dengan desain ketupat sebelumnya.
 */
.eg-hero-gallery{
    position:relative;z-index:2;min-width:0;height:100%;
    padding:24px 42px 24px 26px;
    display:grid;
    grid-template-columns:minmax(0,1.32fr) minmax(230px,.88fr);
    align-items:center;gap:24px;overflow:visible;
    background:
        radial-gradient(ellipse at 79% 16%,#f35b3812 0 13%,transparent 35%),
        radial-gradient(ellipse at 31% 91%,#17457412 0 15%,transparent 39%),
        linear-gradient(135deg,#fffaf7 0%,#f8f4ef 54%,#eef3f7 100%);
}
.eg-hero-gallery:before,.eg-hero-gallery:after{
    content:"";position:absolute;pointer-events:none;border-radius:50%;
    border:1px solid #17457417;
}
.eg-hero-gallery:before{
    width:230px;height:110px;right:11%;top:-64px;transform:rotate(-12deg);
}
.eg-hero-gallery:after{
    width:180px;height:82px;left:18%;bottom:-51px;
    border-color:#f35b3820;transform:rotate(13deg);
}
.eg-hero-stack{
    width:100%;height:calc(100% + 32px);min-width:0;min-height:0;
    display:grid;grid-template-rows:repeat(2,minmax(0,1fr));
    align-self:center;align-items:stretch;gap:20px;
}
.eg-hero-tile{
    position:relative;isolation:isolate;width:100%;height:100%;
    min-width:0;min-height:0;margin:0;padding:0;overflow:hidden;
    border:5px solid #fff;border-radius:30px;background:#fff;
    box-shadow:0 13px 24px #071d3b2e,0 3px 7px #071d3b1c;
    transform:rotate(1.15deg);transform-origin:center;
}
.eg-hero-stack .eg-hero-tile:last-child{transform:rotate(-1.3deg)}
.eg-hero-feature{
    height:88%;align-self:center;border-width:6px;border-radius:34px;
    box-shadow:0 16px 30px #071d3b33,0 4px 8px #071d3b1c;
    transform:rotate(-1.4deg);
}
.eg-hero-tile:after{
    content:"";position:absolute;z-index:2;inset:0;border-radius:inherit;
    box-shadow:inset 0 0 0 1px #071d3b18;pointer-events:none;
}
.eg-hero-tile img{
    display:block;position:absolute;z-index:1;inset:0;
    width:100%;height:100%;max-width:none;max-height:none;
    object-fit:cover;object-position:center;transform:none;
}
.eg-copy h1{max-width:560px}
.eg-copy-footer small{display:block;margin-top:3px;color:#cbd7e6;font-size:9px;line-height:1.3}

@media(min-width:1101px){
    .eg-hero{
        height:363px!important;
        max-height:363px!important;
        grid-template-columns:39% 61%!important;
    }
    .eg-hero-gallery{
        grid-template-columns:minmax(0,1.34fr) minmax(250px,.86fr);
        padding-left:18px;
        padding-right:32px;
    }
}
@media(max-width:1100px){
    .eg-hero-gallery{grid-template-columns:minmax(0,1.25fr) minmax(185px,.75fr);gap:17px;padding:22px 28px 22px 18px}
    .eg-hero-stack{height:calc(100% + 24px);gap:15px}
    .eg-hero-tile{border-width:4px;border-radius:24px}
    .eg-hero-feature{height:86%;border-width:5px;border-radius:28px}
}
@media(max-width:760px){
    .eg-hero-gallery{height:360px;grid-template-columns:minmax(0,1.3fr) minmax(125px,.7fr);gap:14px;padding:26px 24px}
    .eg-hero-stack{gap:14px}
    .eg-hero-feature{height:84%}
}
@media(max-width:560px){
    .eg-hero-gallery{height:305px;grid-template-columns:minmax(0,1.22fr) minmax(105px,.78fr);gap:11px;padding:23px 16px}
    .eg-hero-stack{display:grid;height:calc(100% + 18px);gap:11px}
    .eg-hero-tile{border-width:3px;border-radius:18px;transform:rotate(1deg)}
    .eg-hero-stack .eg-hero-tile:last-child{transform:rotate(-1deg)}
    .eg-hero-feature{height:82%;border-width:4px;border-radius:21px;transform:rotate(-1.1deg)}
}

/* Transisi tiga dimensi antara hero dengan blok statistik. */
.eg-stats{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    border-top:0!important;
    padding-top:60px!important;
    background:
        radial-gradient(ellipse at 8% 78%,#f35b3820 0 10%,transparent 32%),
        radial-gradient(ellipse at 91% 25%,#17457420 0 12%,transparent 34%),
        radial-gradient(ellipse at 62% 115%,#e5a52c1c 0 13%,transparent 35%),
        linear-gradient(125deg,#fff8f3 0%,#edf4fb 48%,#fff2e9 100%)!important;
    box-shadow:inset 0 12px 24px #071d3b10!important;
}
.eg-stats:before{
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    left:4%;
    right:4%;
    height:22px;
    border-radius:0 0 22px 22px;
    background:linear-gradient(90deg,#071d3b 0 24%,#174574 24% 52%,#f35b38 52% 78%,#e3a431 78% 100%);
    box-shadow:0 7px 0 #071d3b24,0 13px 22px #071d3b26,inset 0 -5px 7px #00000026,inset 0 3px 3px #ffffff38;
    clip-path:polygon(0 0,100% 0,97.8% 100%,2.2% 100%);
}
.eg-stats:after{
    content:"";
    position:absolute;
    z-index:-1;
    width:240px;
    height:86px;
    right:7%;
    top:32px;
    border:2px solid #17457418;
    border-radius:50%;
    transform:rotate(-8deg);
    box-shadow:-610px 54px 0 8px #f35b380b,-280px -26px 0 3px #e3a4310d;
}
@media(max-width:900px){
    .eg-stats{padding-top:44px!important}
}
@media(max-width:560px){
    .eg-stats{padding-top:35px!important}
}