:root{--text:#111827;--muted:#6b7280;--ring:#1118271a;--blur:10px}
*{box-sizing:border-box}html{scroll-behavior:smooth}html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--text);
background-image:linear-gradient(#ffffffcc,#ffffffcc),url('https://falconfreight.com/wp-content/uploads/2025/06/Crago-airport-e1749800436769.webp');background-size:cover;background-attachment:fixed;background-position:center}
.container{max-width:820px;margin:0 auto;padding:24px 20px 96px}
.header{display:flex;align-items:center;justify-content:center;gap:14px;margin:12px 0 6px}.header img.logo{width:160px;height:auto}
.subtitle{color:var(--muted);font-size:14px;margin:0 0 8px 4px}
.cta-bar{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 10px}
.cta-bar a{appearance:none;border:1px solid #e5e7eb;background:#fff;color:#111827;font-weight:700;border-radius:9999px;padding:10px 14px;text-decoration:none}
.cta-bar a:hover{transform:translateY(-1px)} .cta-wa:hover{background:#25D366;color:#fff;border-color:#25D366}
.address{margin:6px auto 14px;padding:10px 12px;width:min(760px,96%);display:flex;gap:10px;align-items:center;justify-content:space-between;
backdrop-filter:blur(var(--blur));background:#ffffffd9;border:1px solid #e9eaee;border-radius:12px;box-shadow:0 6px 18px var(--ring)}
.address code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;color:#374151;overflow-wrap:anywhere}
.btn-copy{border:0;background:#111827;color:#fff;border-radius:10px;padding:8px 10px;cursor:pointer;font-weight:600}.btn-copy:focus{outline:3px solid #93c5fd;outline-offset:2px}
.links{margin-top:12px;display:flex;flex-direction:column;gap:12px}
.link-row{display:flex;align-items:center;gap:12px;padding:14px 14px;width:100%;backdrop-filter:blur(var(--blur));background:#ffffffd9;border:1px solid #e9eaee;border-radius:14px;box-shadow:0 8px 24px var(--ring);cursor:pointer}
.link-icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;overflow:hidden;background:#f3f4f6;border:1px solid #e5e7eb;flex:0 0 auto}
.link-icon img{width:100%;height:100%;object-fit:contain}
.link-main{display:flex;flex-direction:column;gap:2px;min-width:0}.link-main .title{font-weight:800}.link-main .url{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actions{margin-left:auto;display:flex;align-items:center;gap:8px}
button.share-btn{appearance:none;border:1px solid #e5e7eb;background:#fff;color:#111827;font-weight:700;border-radius:999px;padding:10px 14px;text-decoration:none;cursor:pointer;transition:transform .08s ease,border-color .08s ease,background .08s ease,color .08s ease}
button.share-btn:hover{transform:translateY(-1px);background:#25D366;color:#fff;border-color:#25D366}
.link-row.lion{--brand:#e60012}.link-row.jnt{--brand:#d10000}.link-row.idexp{--brand:#ed1c24}.link-row.sapx{--brand:#7b2cbf}.link-row.ninja{--brand:#ff6a00}.link-row.pos{--brand:#ff6a00}.link-row.maps{--brand:#16a34a}.link-row.web{--brand:#0096FF}
.link-row:hover{border-color:var(--brand);background:#ffffffee}.link-row:hover .title{color:var(--brand)}
.footer{margin-top:24px;text-align:center;color:var(--muted);font-size:12px}.footer a{color:#111827;font-weight:700;text-decoration:none}.footer a:hover{text-decoration:underline}
.small{font-size:12px;color:var(--muted)}
/* Floating buttons */
.fabs{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:50}
.fab{width:56px;height:56px;border-radius:999px;display:grid;place-items:center;background:#ffffff;box-shadow:0 10px 30px #1118272a;border:1px solid #e5e7eb;cursor:pointer;text-decoration:none}
.fab:hover{transform:translateY(-1px)}
.fab.wa:hover{background:#25D366;color:#fff;border-color:#25D366}
.fab.gmaps:hover{background:#111827;color:#fff;border-color:#111827}
.fab.web:hover{background:#111827;color:#fff;border-color:#111827}

.fab span{font-size:24px}
@media (max-width:520px){.actions button{padding:9px 12px;font-size:13px}.header img.logo{width:150px}}

/* ====== Added by ChatGPT (hover effects, preloader, utilities) ====== */
:root{ --kre-red: #e60012; --kre-white:#ffffff; }

/* Vibrate effect on link rows */
@keyframes kre-shake {
  10%, 90% { transform: translate3d(-1px, 0, 0) rotate(0.1deg); }
  20%, 80% { transform: translate3d(2px, 0, 0) rotate(-0.1deg); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0) rotate(0.2deg); }
  40%, 60% { transform: translate3d(3px, 0, 0) rotate(-0.2deg); }
}
.link-row:hover {
  background: var(--kre-red) !important;
  border-color: var(--kre-red) !important;
  color: var(--kre-white) !important;
  animation: kre-shake 0.35s linear both;
}
.link-row:hover .title,
.link-row:hover .url { color: var(--kre-white) !important; }
.link-row:hover .link-icon { background: #fff !important; border-color: #fff !important; }
.link-row:hover .link-icon img { filter: brightness(0) saturate(100%) invert(10%) sepia(93%) saturate(5988%) hue-rotate(346deg) brightness(96%) contrast(114%); }
.link-row:hover .actions .share-btn { background:#fff !important; color:var(--kre-red) !important; border-color:#fff !important; }
/* Pastikan button share tetap hijau saat hover */
.link-row .actions .share-btn:hover { background:#25D366 !important; color:#fff !important; border-color:#25D366 !important; }
/* Fix icon hilang pada hover di idexp, sapx, maps, wa */
.link-row.idexp:hover .link-icon img,
.link-row.sapx:hover .link-icon img,
.link-row.maps:hover .link-icon img,
.link-row.wa:hover .link-icon img { filter:none !important; }

/* ======= Preloader ======= */
#kre-preloader{position:fixed;inset:0;z-index:9999;background:var(--kre-red);display:grid;place-items:center;transition:opacity .4s ease,visibility .4s ease}
#kre-preloader.hidden{opacity:0;visibility:hidden}
.kre-words{display:flex;gap:clamp(12px,3vw,28px);font-weight:900;color:var(--kre-white);font-size:clamp(40px,9vw,96px);line-height:1}
.kre-mask{overflow:hidden}
.kre-word{transform:translateY(100%)}
@keyframes kre-reveal{to{transform:translateY(0%)}}
.kre-word.kubu{animation:kre-reveal .4s ease-out forwards;animation-delay:.5s}
.kre-word.raya{animation:kre-reveal .4s ease-out forwards;animation-delay:.9s}
.kre-word.express{animation:kre-reveal .4s ease-out forwards;animation-delay:1.3s}
html.preload-lock,html.preload-lock body{height:100%;overflow:hidden}
.actions .share-btn{will-change:transform}
.kre-word{transform:translateY(100%);display:inline-block}
@keyframes kre-release{0%{transform:translateY(100%)}100%{transform:translateY(0%)}}
.kre-word.kubu{animation:kre-release .4s ease-out forwards;animation-delay:.5s}
.kre-word.raya{animation:kre-release .4s ease-out forwards;animation-delay:.9s}
.kre-word.express{animation:kre-release .4s ease-out forwards;animation-delay:1.3s}

/* ===== Wave animation for titles on hover ===== */
@keyframes kre-wave {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-5px); }
  50%  { transform: translateY(0); }
  75%  { transform: translateY(5px); }
  100% { transform: translateY(0); }
}

/* Terapkan pada kelas-kelas yang diminta */
.link-row.lion:hover .title span,
.link-row.jnt:hover .title span,
.link-row.idexp:hover .title span,
.link-row.sapx:hover .title span,
.link-row.ninja:hover .title span,
.link-row.pos:hover .title span,
.link-row.maps:hover .title span,
.link-row.web:hover .title span,
.link-row.wa:hover .title span{
  display:inline-block;
  animation: kre-wave .6s ease-in-out infinite;
  will-change: transform;
}

/* Stagger delay (cukup sampai 30 huruf; lanjutkan pola jika perlu) */
.link-row .title span:nth-child(1){animation-delay:0s}
.link-row .title span:nth-child(2){animation-delay:.04s}
.link-row .title span:nth-child(3){animation-delay:.08s}
.link-row .title span:nth-child(4){animation-delay:.12s}
.link-row .title span:nth-child(5){animation-delay:.16s}
.link-row .title span:nth-child(6){animation-delay:.20s}
.link-row .title span:nth-child(7){animation-delay:.24s}
.link-row .title span:nth-child(8){animation-delay:.28s}
.link-row .title span:nth-child(9){animation-delay:.32s}
.link-row .title span:nth-child(10){animation-delay:.36s}
.link-row .title span:nth-child(11){animation-delay:.40s}
.link-row .title span:nth-child(12){animation-delay:.44s}
.link-row .title span:nth-child(13){animation-delay:.48s}
.link-row .title span:nth-child(14){animation-delay:.52s}
.link-row .title span:nth-child(15){animation-delay:.56s}
.link-row .title span:nth-child(16){animation-delay:.60s}
.link-row .title span:nth-child(17){animation-delay:.64s}
.link-row .title span:nth-child(18){animation-delay:.68s}
.link-row .title span:nth-child(19){animation-delay:.72s}
.link-row .title span:nth-child(20){animation-delay:.76s}
.link-row .title span:nth-child(21){animation-delay:.80s}
.link-row .title span:nth-child(22){animation-delay:.84s}
.link-row .title span:nth-child(23){animation-delay:.88s}
.link-row .title span:nth-child(24){animation-delay:.92s}
.link-row .title span:nth-child(25){animation-delay:.96s}
.link-row .title span:nth-child(26){animation-delay:1.00s}
.link-row .title span:nth-child(27){animation-delay:1.04s}
.link-row .title span:nth-child(28){animation-delay:1.08s}
.link-row .title span:nth-child(29){animation-delay:1.12s}
.link-row .title span:nth-child(30){animation-delay:1.16s}