*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;font-family:Inter,Arial,sans-serif;background:linear-gradient(145deg,#e8edf2,#dfe6ec);color:#192230;position:relative;overflow-x:hidden}
.site-background{position:fixed;inset:0;z-index:-3;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:.70;transform:scale(1.015);pointer-events:none}
body.has-bg{background:#dfe6ec}
body.has-bg::before{content:"";position:fixed;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(8,17,30,.05),rgba(8,17,30,.10));pointer-events:none}
.light-sweep{position:fixed;z-index:-1;top:-20%;bottom:-20%;left:-48%;width:26%;pointer-events:none;transform:skewX(-18deg);background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.08) 30%,rgba(255,255,255,.48) 50%,rgba(255,255,255,.08) 70%,rgba(255,255,255,0) 100%);filter:blur(8px);animation:sentosaShine 5.8s linear infinite}
@keyframes sentosaShine{0%{left:-48%;opacity:0}8%{opacity:.8}52%{opacity:.95}85%{opacity:.45}100%{left:128%;opacity:0}}
@media (prefers-reduced-motion:reduce){.light-sweep{animation:none;display:none}}
.page-shell{min-height:100vh;padding:30px;border:1px solid rgba(217,224,234,.72);background:rgba(245,248,251,.12);backdrop-filter:blur(1.2px);-webkit-backdrop-filter:blur(1.2px)}
.brand-row{height:150px;display:flex;align-items:flex-start}.brand-logo{width:auto;height:auto;max-width:200px;max-height:300px;object-fit:contain;object-position:left top}
.upload-card{width:min(880px,92vw);margin:45px auto 80px;text-align:center}.top-banner-box{width:100%;min-height:92px;border:1px solid rgba(185,200,216,.78);background:rgba(255,255,255,.30);border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 8px 25px rgba(40,66,95,.07);backdrop-filter:blur(2px)}.top-banner-box span{font-size:13px;font-weight:800;letter-spacing:1px;color:rgba(35,58,76,.58)}.top-banner-box img{display:block;width:100%;max-height:220px;object-fit:contain}.top-banner-box.has-image{background:rgba(255,255,255,.12)}
.file-row{margin-top:28px;height:62px;border:1px solid #9fb1c3;border-radius:10px;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:space-between;padding-left:18px;overflow:hidden;text-align:left;color:#69798b}.pick-btn{height:100%;display:flex;align-items:center;padding:0 22px;border-left:1px solid #9fb1c3;background:linear-gradient(135deg,#eef5ff,#fff8df);font-weight:800;cursor:pointer;color:#173e61}.upload-btn{margin:20px auto 0;min-width:210px;padding:14px 24px;border:none;border-radius:10px;background:linear-gradient(135deg,#c7a55b,#6c8fa6);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 10px 22px rgba(74,101,120,.18)}.hint{font-size:12px;color:#516475;margin-top:9px;background:rgba(255,255,255,.78);display:inline-block;padding:4px 10px;border-radius:999px}
.partner-strip{width:min(1400px,96vw);margin:0 auto 18px;border:1px solid #0f2744;background:linear-gradient(180deg,rgba(0,0,0,.48),rgba(0,0,0,.38));padding:18px 24px;border-radius:12px;box-shadow:0 12px 28px rgba(8,22,38,.16)}.partner-title{text-align:center;font-weight:800;margin-bottom:16px;color:#d9e4ef;letter-spacing:.6px;text-transform:uppercase;font-size:13px}.logos-strip{display:flex;align-items:center;justify-content:center;gap:42px;flex-wrap:wrap}.site-logo-item{display:flex;align-items:center;justify-content:center;min-height:96px}.site-logo-item img{max-width:250px;max-height:80px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.25))}
.result,.error{margin:20px auto 0;padding:16px;border-radius:10px;background:rgba(255,255,255,.94);border:1px solid #cdd8e3}.error{color:#a72e2e;border-color:#e6b1b1;background:#fff7f7}.hidden{display:none}.link-box{display:flex;margin-top:10px}.link-box input{flex:1;padding:11px;border:1px solid #c5d0dc;border-radius:8px 0 0 8px}.link-box button{border:0;padding:0 18px;background:#284d69;color:#fff;border-radius:0 8px 8px 0}.result img{margin-top:14px;max-width:100%;max-height:260px;object-fit:contain;border-radius:8px}.site-logo-link{display:flex;align-items:center;justify-content:center;text-decoration:none;padding:5px 8px;border-radius:9px;transition:transform .16s ease,filter .16s ease,opacity .16s ease;opacity:.94}.site-logo-link:hover{transform:translateY(-2px);filter:brightness(1.06);opacity:1}.site-logo-link img{display:block}
@media(max-width:900px){.partner-strip{padding:16px 14px}.logos-strip{gap:24px}.site-logo-item img{max-height:80px;max-width:220px}}
@media(max-width:600px){.page-shell{padding:18px}.brand-row{height:110px}.brand-logo{max-width:160px;max-height:220px}.upload-card{margin:25px auto 50px}.top-banner-box{min-height:72px}.file-row{height:auto;min-height:58px;flex-direction:column;align-items:stretch;padding:0}.file-row span{padding:15px}.pick-btn{border-left:0;border-top:1px solid #9fb1c3;justify-content:center;padding:14px}.partner-strip{width:min(100%,96vw)}.partner-title{font-size:12px}.logos-strip{gap:16px;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}.site-logo-item{flex:0 0 auto}.site-logo-item img{max-width:180px;max-height:70px}.light-sweep{width:40%;animation-duration:6.5s}}


/* V11: optional top banner, responsive transparent logo strip, drag/drop & paste UI */
.top-banner-box{margin-bottom:0}
.file-row{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.file-row.dragover{border-color:#c5a45f;box-shadow:0 0 0 4px rgba(197,164,95,.18);background:rgba(255,255,255,.98)}
.file-row.uploading{opacity:.78;pointer-events:none}
.partner-strip{width:min(1180px,calc(100vw - 48px));padding:14px 20px;background:rgba(0,0,0,.20);border-color:rgba(24,52,78,.65);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px)}
.logos-strip{gap:34px;row-gap:20px}
.site-logo-item{min-height:52px;max-width:125px}
.site-logo-item img{max-width:125px;max-height:40px;width:auto;height:auto;object-fit:contain}
.site-logo-link{max-width:125px;max-height:40px;padding:2px 4px}
@media(max-width:900px){
  .partner-strip{width:min(94vw,980px);padding:13px 16px}
  .logos-strip{gap:24px;row-gap:16px}
  .site-logo-item{min-height:46px;max-width:112px}
  .site-logo-item img{max-width:112px;max-height:36px}
  .site-logo-link{max-width:112px;max-height:36px}
}
@media(max-width:600px){
  .partner-strip{width:calc(100vw - 28px);padding:12px 10px;border-radius:10px}
  .logos-strip{display:flex;justify-content:center;overflow:visible;flex-wrap:wrap;gap:14px 18px;padding:0}
  .site-logo-item{flex:0 1 auto;min-height:40px;max-width:95px}
  .site-logo-item img{max-width:95px;max-height:30px}
  .site-logo-link{max-width:95px;max-height:30px}
  .partner-title{margin-bottom:12px}
}

/* V12 public hamburger + image converter */
.hamburger-btn{position:fixed;top:22px;right:26px;z-index:70;width:48px;height:44px;border:1px solid rgba(255,255,255,.42);border-radius:10px;background:rgba(7,18,31,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;box-shadow:0 9px 24px rgba(0,0,0,.16)}
.hamburger-btn span{display:block;width:22px;height:2px;border-radius:2px;background:#fff;transition:transform .2s ease,opacity .2s ease}
.hamburger-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.hamburger-btn.open span:nth-child(2){opacity:0}.hamburger-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.public-menu{display:none;position:fixed;right:26px;top:74px;z-index:69;width:210px;padding:8px;border:1px solid rgba(255,255,255,.26);border-radius:12px;background:rgba(6,17,30,.91);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 18px 42px rgba(0,0,0,.26)}
.public-menu.open{display:block}.public-menu a{display:block;padding:13px 14px;border-radius:8px;color:#dce7f0;font-size:13px;font-weight:850;letter-spacing:.45px}.public-menu a:hover,.public-menu a.active{background:linear-gradient(135deg,rgba(197,165,92,.32),rgba(102,142,169,.28));color:#fff}
.converter-page{padding-bottom:70px}.converter-card{width:min(880px,92vw);margin:25px auto 40px;padding:24px;border:1px solid rgba(196,211,223,.58);border-radius:18px;background:rgba(245,248,251,.54);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);box-shadow:0 24px 55px rgba(15,31,48,.14)}
.converter-title{text-align:center;margin-bottom:20px}.converter-title h1{margin:0 0 8px;font-size:30px;letter-spacing:1px}.converter-title p{margin:0;color:#52677a;font-size:14px}
.converter-dropzone{min-height:150px;border:2px dashed rgba(82,111,136,.55);border-radius:14px;background:rgba(255,255,255,.76);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center;transition:.18s ease;cursor:pointer}.converter-dropzone.dragover{border-color:#bf9a50;background:rgba(255,250,237,.93);box-shadow:0 0 0 5px rgba(191,154,80,.14)}.converter-dropzone strong{font-size:16px}.converter-dropzone span{font-size:12px;color:#7b8b99}.secondary-pick{margin-top:5px;border:1px solid #8fa5b8;border-radius:8px;background:#fff;padding:9px 15px;color:#284861;font-weight:800;cursor:pointer}
.converter-preview{margin:18px auto 5px;display:flex;align-items:center;gap:16px;padding:13px;border-radius:12px;background:rgba(255,255,255,.70)}.converter-preview img{width:92px;height:74px;object-fit:contain;border-radius:8px;background:rgba(240,244,247,.8)}.converter-meta{font-size:13px;color:#526879}.format-label{margin:22px 0 10px;font-size:12px;font-weight:850;letter-spacing:.7px;color:#42596c;text-align:center}.format-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:620px;margin:0 auto}.format-btn{padding:12px 8px;border:1px solid #d1d9e1;border-radius:7px;background:rgba(255,255,255,.88);color:#414b55;font-weight:800;cursor:pointer;transition:.16s ease}.format-btn:hover{border-color:#91a9bc;transform:translateY(-1px)}.format-btn.active{background:linear-gradient(135deg,#c5a45d,#7599b2);border-color:transparent;color:#fff;box-shadow:0 7px 18px rgba(75,102,123,.18)}
.convert-action{display:block;margin:22px auto 0;min-width:230px;padding:13px 20px;border:0;border-radius:9px;background:linear-gradient(135deg,#c6a35a,#7095ae);color:#fff;font-weight:900;cursor:pointer}.convert-action:disabled{opacity:.48;cursor:not-allowed}.convert-progress{text-align:center;margin-top:16px;padding:10px;font-size:13px;color:#4e6476}.convert-result{margin-top:18px;padding:16px;border-radius:12px;border:1px solid rgba(190,205,217,.86);background:rgba(255,255,255,.92);text-align:center}.result-stats{display:grid;gap:5px;margin-bottom:13px}.result-stats span{font-size:13px;color:#607384}.download-btn{display:inline-block;padding:11px 18px;border-radius:8px;background:#244e6b;color:#fff;text-decoration:none;font-weight:850}
@media(max-width:600px){.hamburger-btn{top:15px;right:14px;width:44px;height:40px}.public-menu{right:14px;top:62px;width:190px}.converter-card{padding:17px;margin-top:10px}.converter-title h1{font-size:24px}.format-grid{grid-template-columns:repeat(3,1fr);gap:7px}.format-btn{padding:11px 5px;font-size:12px}.converter-preview{align-items:flex-start}.converter-preview img{width:75px;height:62px}}


/* V14 converter layout refinement */
.converter-page .brand-row{height:92px}
.converter-card{margin:-6px auto 40px;padding:22px 24px 24px}
.converter-dropzone{min-height:105px;padding:16px;gap:9px}
.converter-dropzone strong{font-size:17px;letter-spacing:.4px}
.converter-dropzone span{display:none!important}
.converter-workspace{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:16px;align-items:stretch;margin:16px auto 4px}
.converter-workspace.hidden{display:none!important}
.converter-preview-panel{min-height:150px;padding:12px;border-radius:12px;background:rgba(255,255,255,.74);display:flex;align-items:center;gap:14px;overflow:hidden}
.converter-preview-panel img{width:150px;height:124px;object-fit:contain;border-radius:8px;background:rgba(244,247,249,.78);flex:0 0 auto}
.converter-meta{font-size:13px;color:#526879;line-height:1.55;word-break:break-word}
.converter-format-panel{padding:14px;border-radius:12px;background:rgba(255,255,255,.74);display:flex;flex-direction:column;justify-content:center;gap:9px}
.converter-format-panel label{font-size:12px;font-weight:900;letter-spacing:.7px;color:#41586b}
.format-select{width:100%;padding:12px 13px;border:1px solid #b8c7d3;border-radius:9px;background:#fff;color:#263a49;font-weight:800;outline:none;cursor:pointer}
.format-select:focus{border-color:#bf9b53;box-shadow:0 0 0 3px rgba(191,155,83,.14)}
.format-label,.format-grid{display:none!important}
.public-menu a{text-decoration:none!important;color:#d8dde4!important;font-weight:900!important;letter-spacing:.4px;text-shadow:0 1px 0 #fff,0 -1px 0 rgba(0,0,0,.72),1px 0 0 rgba(255,255,255,.16);}
.public-menu a:hover,.public-menu a.active{color:#f0f2f5!important;text-decoration:none!important}
@media(max-width:760px){
  .converter-page .brand-row{height:80px}
  .converter-card{margin:-8px auto 32px;padding:16px}
  .converter-workspace{grid-template-columns:1fr}
  .converter-preview-panel img{width:108px;height:88px}
  .converter-preview-panel{min-height:112px}
  .converter-format-panel{padding:12px}
}

/* V15 Black Gold actions + converter sponsor strip */
.upload-btn,.convert-action,.download-btn,.secondary-pick,.link-box button{
  background:linear-gradient(135deg,#050505 0%,#161616 46%,#7a5512 73%,#d8b85b 100%)!important;
  color:#fff!important;
  border:1px solid #b58b31!important;
  box-shadow:0 8px 22px rgba(39,27,5,.24)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.55)
}
.upload-btn:hover,.convert-action:hover,.download-btn:hover,.secondary-pick:hover,.link-box button:hover{filter:brightness(1.08)}
.convert-action:disabled{opacity:.48!important;filter:grayscale(.25)}
.converter-partner-strip{margin-top:24px!important;margin-bottom:18px!important}
@media(max-width:600px){.converter-partner-strip{margin-top:18px!important}}


/* V18 silver-black controls */
.pick-btn,
.secondary-pick{
  background:linear-gradient(135deg,#f5f6f7 0%,#c9cdd1 28%,#6f7479 58%,#1c1f22 100%)!important;
  color:#101214!important;
  border-color:#80858a!important;
  text-shadow:0 1px 0 rgba(255,255,255,.70)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 5px 14px rgba(0,0,0,.16)!important;
}
.pick-btn:hover,.secondary-pick:hover{filter:brightness(1.04)!important}
.format-select{
  background:linear-gradient(135deg,#f5f6f7 0%,#d7dadd 35%,#858a8f 70%,#272a2d 100%)!important;
  color:#121416!important;
  border:1px solid #7d8287!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 5px 14px rgba(0,0,0,.14)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.55)
}
.format-select:focus{border-color:#4f555a!important;box-shadow:0 0 0 3px rgba(96,101,106,.18)!important}
.format-select option{background:#e6e8ea;color:#111}

/* V19: Silver Gold only for Convert Link pick button + format dropdown.
   Convert Gambar pick button restored to original style. */
.pick-btn{
  background:linear-gradient(135deg,#f7f7f5 0%,#d8d8d2 28%,#b7a56b 58%,#7d6424 78%,#d7b85a 100%)!important;
  color:#18202a!important;
  border-color:#b89b4d!important;
  text-shadow:0 1px 0 rgba(255,255,255,.78)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 5px 14px rgba(76,60,20,.18)!important;
}
.pick-btn:hover{filter:brightness(1.05)!important}
.secondary-pick{
  background:#fff!important;
  color:#284861!important;
  border:1px solid #8fa5b8!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
.secondary-pick:hover{background:#f7fafc!important;filter:none!important}
.format-select{
  background:linear-gradient(135deg,#f8f8f5 0%,#deded8 34%,#c8b873 67%,#8a7029 100%)!important;
  color:#17202a!important;
  border:1px solid #b99b4b!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 5px 14px rgba(91,73,26,.16)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.62)!important;
}
.format-select:focus{border-color:#c7a64d!important;box-shadow:0 0 0 3px rgba(199,166,77,.18)!important}
.format-select option{background:#f2f1eb;color:#15191d}