/* ===========================
   AD CAMPAIGN MANAGER — frontend
=========================== */

.sk-ad{
    max-width:820px;
    margin:34px auto;
    display:flex;
    align-items:stretch;
    gap:0;
    background:#fff;
    border:1px solid rgba(200,169,107,.35);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 10px 34px rgba(23,48,79,.08);
}

.sk-ad-media{
    flex:0 0 260px;
    min-height:170px;
    background:#f3efe7;
}
.sk-ad-media img{
    width:100%;height:100%;
    object-fit:cover;display:block;
}

.sk-ad-body{
    flex:1;
    padding:26px 30px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.sk-ad-headline{
    font-family:Georgia,'Times New Roman',serif;
    font-size:21px;
    color:#17304f;
    font-weight:600;
    line-height:1.35;
    margin-bottom:8px;
}

.sk-ad-text{
    font-size:14px;
    line-height:1.75;
    color:#4b5563;
    margin:0 0 16px;
}

.sk-ad-actions{ display:flex;gap:12px;align-items:center;flex-wrap:wrap; }

.sk-ad-cta{
    display:inline-block;
    background:linear-gradient(135deg,#17304f,#244a76);
    color:#fff;
    font-weight:600;
    font-size:13.5px;
    letter-spacing:.04em;
    padding:12px 28px;
    border-radius:50px;
    text-decoration:none;
    transition:transform .2s ease,box-shadow .2s ease;
}
.sk-ad-cta:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(23,48,79,.28);
    color:#c8a96b;
}

.sk-ad-social{
    font-size:12.5px;
    color:#6b7280;
    text-decoration:none;
    border-bottom:1px solid #d1d5db;
    padding-bottom:1px;
}
.sk-ad-social:hover{ color:#c8a96b;border-color:#c8a96b; }

/* compact variants */
.sk-ad-text_cta,.sk-ad-inline{
    display:block;
    text-align:center;
    padding:18px 24px;
    border-radius:12px;
}
.sk-ad-text_cta .sk-ad-headline{ font-size:17px; }
.sk-ad-text_cta .sk-ad-media{ display:none; }

/* sticky bottom — floating pill (rounded navy bar + gold CTA) */
.sk-ad-sticky-wrap{
    position:fixed;
    left:50%;bottom:22px;
    transform:translateX(-50%);
    z-index:9998;
    width:max-content;
    max-width:calc(100vw - 32px);
}
.sk-ad-sticky-wrap .sk-ad{
    margin:0;
    display:flex;align-items:center;gap:22px;
    background:linear-gradient(135deg,#17304f,#122540);
    border-radius:60px;
    border:1px solid rgba(200,169,107,.35);
    box-shadow:0 12px 40px rgba(0,0,0,.35);
    padding:12px 44px 12px 30px;
}
.sk-ad-sticky-wrap .sk-ad-body{
    padding:0;flex-direction:row;align-items:center;gap:20px;
}
.sk-ad-sticky-wrap .sk-ad-headline{
    color:#f8f4ee;font-family:Georgia,'Times New Roman',serif;
    font-size:15px;font-weight:500;margin:0;white-space:nowrap;
}
.sk-ad-sticky-wrap .sk-ad-text,.sk-ad-sticky-wrap .sk-ad-media,
.sk-ad-sticky-wrap .sk-ad-social{display:none;}
.sk-ad-sticky-wrap .sk-ad-cta{
    background:linear-gradient(135deg,#d4af37,#c9a227);
    color:#122540;padding:11px 26px;font-size:13px;
    white-space:nowrap;
}
.sk-ad-sticky-wrap .sk-ad-cta:hover{
    color:#122540;background:#e0b93c;transform:translateY(-1px);
}
.sk-ad-sticky-close{
    position:absolute;top:50%;right:14px;
    transform:translateY(-50%);
    background:none;border:none;color:rgba(226,232,240,.7);
    font-size:18px;cursor:pointer;line-height:1;padding:4px 6px;
}
.sk-ad-sticky-close:hover{color:#c8a96b;}

/* vertical side pill — satu kolom ramping, teks tegak berbaris */
.sk-ad-rail-wrap{
    position:fixed;
    left:16px;top:50%;
    transform:translateY(-50%);
    z-index:9997;
}
.sk-ad-rail-wrap .sk-ad{
    margin:0;
    display:flex;flex-direction:column;align-items:center;gap:16px;
    background:linear-gradient(180deg,#17304f,#0e1d33);
    border-radius:36px;
    border:1px solid rgba(200,169,107,.4);
    box-shadow:0 10px 34px rgba(0,0,0,.3);
    padding:48px 10px 16px;
    width:64px;
    text-align:center;
}
/* ornament emas di atas pill */
.sk-ad-rail-wrap .sk-ad::before{
    content:'';
    width:7px;height:7px;
    background:#c8a96b;
    transform:rotate(45deg);
    flex:0 0 auto;
}
.sk-ad-rail-wrap .sk-ad-body{
    padding:0;flex-direction:column;align-items:center;gap:16px;
    width:100%;
}
.sk-ad-rail-wrap .sk-ad-headline{
    color:#f8f4ee;font-family:Georgia,'Times New Roman',serif;
    font-size:12.5px;font-weight:600;margin:0;
    writing-mode:vertical-rl;
    text-orientation:upright;
    letter-spacing:.1em;
    white-space:nowrap;
    overflow:hidden;
    max-height:220px;
}
.sk-ad-rail-wrap .sk-ad-text{display:none;}
.sk-ad-rail-wrap .sk-ad-media{display:none;}
.sk-ad-rail-wrap .sk-ad-social{display:none;}
.sk-ad-rail-wrap .sk-ad-actions{ margin:0; }
.sk-ad-rail-wrap .sk-ad-cta{
    background:linear-gradient(135deg,#d4af37,#c9a227);
    color:#122540;padding:16px 9px;font-size:11.5px;font-weight:700;
    writing-mode:vertical-rl;
    text-orientation:upright;
    letter-spacing:.08em;
    border-radius:30px;
    white-space:nowrap;
    overflow:hidden;
    max-height:200px;
}
.sk-ad-rail-wrap .sk-ad-cta:hover{color:#122540;background:#e0b93c;}
.sk-ad-rail-wrap .sk-ad-sticky-close{
    top:8px;left:50%;transform:translateX(-50%);right:auto;
    color:rgba(226,232,240,.55);font-size:15px;
}

/* mirror: pill vertikal kanan */
.sk-ad-rail-wrap.sk-ad-rail-right{ left:auto;right:18px; }
.sk-ad-rail-wrap.sk-ad-rail-right .sk-ad{
    background:linear-gradient(180deg,#122540,#17304f);
    border-left:1px solid rgba(200,169,107,.4);
    border-right:1px solid rgba(200,169,107,.35);
}

/* right-side floating pill — anchored kanan bawah, melintang */
.sk-ad-side-wrap{
    position:fixed;
    right:22px;bottom:96px;
    z-index:9997;
    max-width:340px;
}
.sk-ad-side-wrap .sk-ad{
    margin:0;
    display:flex;align-items:center;gap:16px;
    background:linear-gradient(135deg,#17304f,#122540);
    border-radius:20px;
    border:1px solid rgba(200,169,107,.4);
    box-shadow:0 12px 36px rgba(0,0,0,.32);
    padding:16px 40px 16px 20px;
}
.sk-ad-side-wrap .sk-ad-body{
    padding:0;flex-direction:column;align-items:flex-start;gap:10px;
}
.sk-ad-side-wrap .sk-ad-headline{
    color:#f8f4ee;font-family:Georgia,'Times New Roman',serif;
    font-size:14.5px;font-weight:500;margin:0;line-height:1.45;
}
.sk-ad-side-wrap .sk-ad-text{display:none;}
.sk-ad-side-wrap .sk-ad-media{display:none;}
.sk-ad-side-wrap .sk-ad-social{display:none;}
.sk-ad-side-wrap .sk-ad-cta{
    background:linear-gradient(135deg,#d4af37,#c9a227);
    color:#122540;padding:9px 20px;font-size:12.5px;
}
.sk-ad-side-wrap .sk-ad-cta:hover{color:#122540;background:#e0b93c;}
.sk-ad-side-wrap .sk-ad-sticky-close{right:10px;}

/* sidebar/popup placeholders render same card */
.sk-ad-sidebar,.sk-ad-popup{ flex-direction:column; }
.sk-ad-sidebar .sk-ad-media,.sk-ad-popup .sk-ad-media{ flex:none;height:160px; }

@media (max-width:640px){
    .sk-ad{ flex-direction:column;margin:26px 14px; }
    .sk-ad-media{ flex:none;height:160px; }
    .sk-ad-body{ padding:20px 22px; }
    .sk-ad-sticky-wrap{ width:calc(100vw - 24px);bottom:12px; }
    .sk-ad-sticky-wrap .sk-ad{ gap:12px;padding:10px 40px 10px 18px; }
    .sk-ad-sticky-wrap .sk-ad-body{ gap:10px; }
    .sk-ad-sticky-wrap .sk-ad-headline{ font-size:13px;white-space:normal; }
    .sk-ad-sticky-wrap .sk-ad-cta{ padding:9px 18px;font-size:12px; }
    .sk-ad-side-wrap{ right:12px;bottom:88px;max-width:calc(100vw - 60px); }
    .sk-ad-side-wrap .sk-ad{ padding:12px 36px 12px 16px; }
    .sk-ad-rail-wrap{ left:8px; }
    .sk-ad-rail-wrap.sk-ad-rail-right{ left:auto;right:8px; }
    .sk-ad-rail-wrap .sk-ad{ width:76px;padding:44px 10px 14px;gap:12px; }
    .sk-ad-rail-wrap .sk-ad-headline{ font-size:12px;max-height:170px; }
    .sk-ad-rail-wrap .sk-ad-cta{ padding:8px 10px;font-size:11px; }
}