.gift-page{max-width:1240px;margin:auto;padding:14px 22px 56px;color:var(--ink)}
.gift-topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:10px 0 14px;background:linear-gradient(var(--bg) 78%,transparent)}
.gift-back{height:44px;display:inline-flex;align-items:center;gap:6px;padding:0 14px;text-decoration:none;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:14px;font-weight:850}
.gift-title{flex:1;min-width:0}.gift-title b{display:block;font-size:18px}.gift-title small{display:block;color:var(--muted);font-size:11px}
.gift-hero{display:grid;grid-template-columns:1fr 220px;gap:18px;align-items:center;padding:28px;border-radius:30px;border:1px solid var(--line);background:radial-gradient(circle at 82% 12%,#ffe7a8 0,transparent 30%),radial-gradient(circle at 10% 90%,#ffd9e7 0,transparent 26%),var(--panel);box-shadow:var(--shadow)}
.gift-kicker{display:inline-block;font-size:11px;letter-spacing:.14em;font-weight:900;color:#8c6300;background:#fff4c7;border:1px solid #f4d66f;border-radius:999px;padding:7px 10px}
.gift-hero h1{font-size:clamp(28px,5vw,48px);line-height:1.04;margin:10px 0}.gift-hero p{max-width:760px;color:var(--muted);line-height:1.6;margin:0}
.gift-progress-card{background:rgba(255,255,255,.86);border:1px solid #f1dfb4;border-radius:22px;padding:18px;text-align:center;box-shadow:0 12px 26px rgba(68,54,20,.08)}
html[data-theme="dark"] .gift-progress-card{background:rgba(32,28,43,.9)}.gift-progress-card span,.gift-progress-card small{display:block;color:var(--muted)}.gift-progress-card strong{display:block;font-size:44px;line-height:1;margin:8px 0;color:#ff8a00}
.gift-tabs{display:flex;gap:8px;margin:18px 0 10px;overflow:auto}.gift-tab{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:15px;padding:11px 16px;font-weight:900;cursor:pointer;white-space:nowrap}.gift-tab.active{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--panel)),var(--panel));border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.gift-panel{display:none}.gift-panel.active{display:block}.gift-section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:20px 0 13px}.gift-section-head h2{margin:0 0 4px}.gift-section-head p{margin:0;color:var(--muted);font-size:13px}
.gift-add,.gift-save,.gift-upload-main{border:0;border-radius:15px;padding:12px 16px;font-weight:900;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--accent),#8a6cff);box-shadow:0 9px 18px rgba(90,66,170,.2);text-decoration:none}
.reward-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.reward-card{display:grid;grid-template-columns:180px 1fr;min-height:220px;background:var(--panel);border:1px solid var(--line);border-radius:23px;overflow:hidden;box-shadow:0 9px 24px rgba(34,31,49,.07)}
.reward-photo{position:relative;min-height:220px;background:linear-gradient(145deg,#f5d97c,#f7b2c4);overflow:hidden}.reward-photo img{width:100%;height:100%;object-fit:cover;display:block}.reward-photo .photo-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:58px;background:linear-gradient(145deg,#ffe7a6,#ffc3d9)}
.reward-photo label{position:absolute;left:10px;bottom:10px;z-index:4;background:rgba(27,23,39,.78);color:#fff;border-radius:11px;padding:7px 10px;font-size:11px;font-weight:850;cursor:pointer}
.reward-form{padding:16px;display:grid;gap:10px}.reward-form label{font-size:11px;color:var(--muted);font-weight:850}.reward-form input,.reward-form textarea{width:100%;margin-top:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:12px;padding:9px 10px;outline:none}.reward-form textarea{min-height:58px;resize:vertical}
.reward-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}.reward-status{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:850;color:var(--muted)}.reward-status.ready{color:#16825a}.reward-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}.reward-delete{border:0;background:#fff0f0;color:#b4323a;border-radius:11px;padding:8px 10px;font-weight:800;cursor:pointer}.reward-given{display:flex;gap:6px;align-items:center;font-size:11px!important;color:var(--ink)!important}
.gift-savebar{margin-top:15px;display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:13px 15px;background:var(--panel);border:1px solid var(--line);border-radius:18px}.gift-savebar span{margin-right:auto;color:var(--muted);font-size:12px}.gift-save.saved{background:linear-gradient(135deg,#23ad74,#14895b)}
.privacy-note{padding:12px 14px;border-radius:15px;background:#eef9f5;border:1px solid #c7eadb;color:#23684e;font-size:12px;line-height:1.5;margin-bottom:12px}html[data-theme="dark"] .privacy-note{background:#18382d;color:#b8eed9;border-color:#2c5e4d}
.card-toolbar{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:12px 0;font-size:13px;color:var(--muted)}.soft-danger{border:1px solid #f1c6c8;background:#fff4f4;color:#a73b42;border-radius:12px;padding:8px 10px;font-weight:800;cursor:pointer}
.collection-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:14px}.collection-card{position:relative;aspect-ratio:2.5/3.5;border-radius:20px;overflow:hidden;border:4px dashed #cfcad8;background:#ece9f2;box-shadow:inset 0 4px 8px rgba(0,0,0,.04),0 8px 18px rgba(35,31,52,.05);perspective:1000px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.collection-card:hover{transform:translateY(-4px)}.collection-card.has-photo{border-style:solid;border-color:var(--accent);background:#fff;box-shadow:0 10px 24px rgba(49,40,94,.12);transform-style:preserve-3d}.collection-card.has-photo:hover{transform:translateY(-8px) rotateY(8deg) rotateX(4deg);box-shadow:-6px 18px 25px rgba(0,0,0,.18)}.collection-card.has-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,transparent 20%,rgba(255,255,255,.55) 40%,rgba(255,255,255,.88) 50%,rgba(255,255,255,.55) 60%,transparent 80%);background-size:200% 200%;opacity:0;pointer-events:none;z-index:3;transition:opacity .25s}.collection-card.has-photo:hover::before{opacity:1;animation:giftHolo 2s linear infinite}.collection-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;border-radius:14px;z-index:1}.collection-card.has-photo img{display:block}.collection-card .placeholder{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:14px;color:#8f8b98;z-index:0}.collection-card .placeholder b{display:block;font-size:clamp(30px,3vw,42px);margin-bottom:8px}.collection-card .placeholder span{display:block;font-weight:900;color:#5c5868}.collection-card .placeholder small{display:block;margin-top:4px;font-size:11px;color:#8b8698}.collection-card.has-photo .placeholder{display:none}.collection-card .slot-no{position:absolute;left:8px;top:8px;background:rgba(26,23,36,.76);color:#fff;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:900;z-index:4;letter-spacing:.08em}.collection-card .remove-photo{position:absolute;right:7px;top:7px;border:0;width:29px;height:29px;border-radius:50%;background:rgba(190,48,59,.94);color:white;font-weight:900;cursor:pointer;display:none;z-index:4;box-shadow:0 6px 14px rgba(190,48,59,.25)}.collection-card.has-photo .remove-photo{display:block}.collection-card .card-caption{position:absolute;left:10px;right:10px;bottom:10px;border-radius:14px;padding:9px 10px;background:rgba(255,255,255,.88);backdrop-filter:blur(6px);font-size:11px;color:#4d4860;font-weight:800;z-index:4;display:none}.collection-card.has-photo .card-caption{display:block}.sticky-save{position:sticky;bottom:10px;z-index:20;box-shadow:0 12px 32px rgba(28,24,42,.15)}@keyframes giftHolo{0%{background-position:100% 100%}100%{background-position:0 0}}
.gift-foot{text-align:center;color:var(--muted);font-size:11px;line-height:1.55;padding:28px 10px 0}
@media(max-width:920px){.reward-grid{grid-template-columns:1fr}.collection-grid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:700px){.gift-page{padding:10px 13px 42px}.gift-hero{grid-template-columns:1fr;padding:20px}.gift-progress-card{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:9px;text-align:left}.gift-progress-card strong{font-size:36px}.reward-card{grid-template-columns:130px 1fr}.reward-photo{min-height:210px}.collection-grid{grid-template-columns:repeat(4,1fr)}.gift-section-head{align-items:flex-start;flex-direction:column}.card-head .gift-upload-main{width:100%;text-align:center}.gift-back span{display:none}}
@media(max-width:430px){.reward-card{grid-template-columns:1fr}.reward-photo{height:180px;min-height:0}.collection-grid{grid-template-columns:repeat(3,1fr)}.reward-row{grid-template-columns:1fr}}

/* ===== CARD COLLECTION 150 + REWARD STATE ===== */
.collection-card{border:4px dashed #cfcad8;background:#e8e6ec;}
.collection-card:hover{transform:translateY(-3px)}
.collection-card img{display:none!important}
.collection-card .placeholder{display:grid!important}
.collection-card .card-caption{display:none!important}
.collection-card.has-photo .remove-photo{display:block}
.collection-card.has-photo:not(.collected) .remove-photo{opacity:.82}
.collection-card.collected{border-style:solid;border-color:var(--accent);background:#fff;box-shadow:0 10px 24px rgba(49,40,94,.14);transform-style:preserve-3d}
.collection-card.collected img{display:block!important}
.collection-card.collected .placeholder{display:none!important}
.collection-card.collected .card-caption{display:block!important}
.collection-card.collected::before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,transparent 20%,rgba(255,255,255,.55) 40%,rgba(255,255,255,.88) 50%,rgba(255,255,255,.55) 60%,transparent 80%);background-size:200% 200%;opacity:0;pointer-events:none;z-index:3;transition:opacity .25s}
@media(hover:hover){.collection-card.collected:hover{transform:translateY(-8px) rotateY(8deg) rotateX(4deg);box-shadow:-6px 18px 25px rgba(0,0,0,.18)}.collection-card.collected:hover::before{opacity:1;animation:giftHolo 2s linear infinite}}
.collection-card.just-saved{animation:slotCelebrate 1.1s cubic-bezier(.18,.9,.25,1.15) 1;box-shadow:0 0 0 4px rgba(255,209,102,.45),0 14px 26px rgba(255,159,28,.32)}
.collection-card.just-saved::after{content:"✨ BARU!";position:absolute;top:6px;right:6px;z-index:6;background:linear-gradient(180deg,#fff8d6,#ffd166);color:#8a4b00;font-size:.62rem;font-weight:900;padding:4px 7px;border-radius:999px;box-shadow:0 4px 10px rgba(0,0,0,.18);animation:newBadgePop .7s ease-out}
@keyframes slotCelebrate{0%{transform:scale(.65) rotate(-7deg)}45%{transform:scale(1.1) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
@keyframes newBadgePop{0%{transform:scale(.2);opacity:0}100%{transform:scale(1);opacity:1}}
/* Visual Card Collection mengikuti kartu V19 sumber: slot abu-abu putus-putus, kartu terbuka putih + bingkai oranye. */
.collection-card{background:#e0e0e0;border-color:#bdbdbd;border-radius:15px;box-shadow:inset 0 4px 6px rgba(0,0,0,.05)}
.collection-card.collected{border:4px solid #FF9F1C;background:#fff;box-shadow:0 4px 8px rgba(0,0,0,.1)}
.collection-card img{border-radius:10px}
.collection-card .slot-no{background:rgba(1,22,39,.76)}


/* ===== FIX: uploaded Card Collection photos are always visible =====
   Uploaded photos are parent-prepared artwork and must preview even before
   the reward slot is earned; reward state remains separate from photo state. */
.collection-card.has-photo img{display:block!important;opacity:1!important;visibility:visible!important}
.collection-card.has-photo .placeholder{display:none!important}
.collection-card.has-photo .card-caption{display:block!important}
.collection-card.has-photo{border-style:solid;border-color:var(--accent);background:#fff}
.collection-card.has-photo:not(.collected){filter:none}