@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=DM+Sans:wght@400;500;600;700&display=swap');

:root{font-family:'DM Sans',Arial,sans-serif;color:#093426;background:#211a16;font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;padding:16px;background:radial-gradient(circle at 50% 0,#54493b,#211a16 70%)}
body.embedded{padding:0;background:transparent}
button,input{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.shell{position:relative;isolation:isolate;display:flex;flex-direction:column;max-width:1450px;min-height:calc(100dvh - 32px);margin:auto;padding:38px 38px 14px;border:1px solid #dfbb74;border-radius:22px;overflow:hidden;background:linear-gradient(90deg,#fff8ebee 0%,#fff8ebd8 35%,#fff8eb6b 62%,#fff8eb22 100%),url('/assets/confectionery-backdrop.jpg') center / cover no-repeat;box-shadow:0 28px 75px #0008}
.embedded .shell{width:100%;max-width:none;min-height:100dvh;margin:0;border:0;border-radius:0;box-shadow:none}
.layout{display:grid;grid-template-columns:minmax(360px,.40fr) minmax(590px,.60fr);gap:12px;align-items:center;flex:1 0 auto}
.story{--story-card-width:475px;position:relative;z-index:1;align-self:center;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:0 4px}
.brand{width:min(100%,240px);margin:0 auto 2px}
.brand-logo{display:block;width:100%;height:auto}
.campaign-heading{width:100%;margin:0;container-type:inline-size}
.offer{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(31px,3.5vw,52px);font-weight:700;line-height:.96;letter-spacing:-.025em;color:#976019;margin:0;text-shadow:0 1px 1px #fff9}
.offer span{font-size:.85em;color:#083524}
.ornament{display:block;width:58%;margin:0 auto 4px;font-family:Georgia,serif;font-size:25px;color:#b27b2c;line-height:1;position:relative}
.ornament:before,.ornament:after{content:'';height:1px;background:#b88948;position:absolute;top:50%;width:40%}
.ornament:before{left:0}.ornament:after{right:0}
h1,h2,p{margin-top:0}
h1,h2{font-family:'Cormorant Garamond',Georgia,serif}
h1{font-size:clamp(18px,2.4vw,34px);font-size:clamp(18px,8cqw,42px);white-space:nowrap;font-weight:600;font-style:italic;line-height:1.15;color:#710d24;margin:0 0 10px}
h1 em{font-weight:700}
.eligibility{width:min(100%,var(--story-card-width));display:inline-flex;align-items:center;gap:10px;padding:8px 12px;background:#fffaeee3;border:1px solid #c89d4e;border-radius:12px;color:#4d3522;font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;line-height:1.05;text-align:left;box-shadow:0 7px 18px #65430f19}
.eligibility strong{font-size:15px;font-family:'DM Sans',Arial,sans-serif;font-weight:600}
.gift-mark{color:#a67520;width:34px;height:34px;flex:none}
.action-panel{width:min(100%,var(--story-card-width));min-height:120px;text-align:left;margin:0 auto;padding:14px 18px 11px;border:1px solid #d7ba82;border-radius:14px;background:#fffaf0ed;box-shadow:0 9px 30px #3a270e18}
.action-panel:has(#locked-view:not([hidden])){min-height:0}
#locked-view h2{margin:0}
.action-panel h2{font-size:31px;line-height:1;margin:0 0 4px;color:#173a27}
.action-panel p{font-size:12px;line-height:1.45;color:#6f5849;margin:0}
.primary{min-height:39px;border:1px solid #bd903c;border-radius:7px;background:linear-gradient(#0c4b34,#063421);color:#fff7df;padding:7px 13px;font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 3px 0 #032b1b}
.primary:hover{background:#0d6040}
.primary:disabled{opacity:.55;cursor:wait}
.primary span{margin-left:5px;font-size:16px}
.status{min-height:16px!important;margin:8px 0 0!important;font-size:11px!important;color:#17613c!important}
.status:empty{display:none}
.status.error{color:#a41f28!important}
.won-tag{display:block;color:#98702b;font-size:10px;font-weight:700;letter-spacing:.15em;margin-bottom:4px}
#result-view h2{font-size:27px;line-height:1.02}
#countdown{display:inline-block;margin:6px 0 5px;padding:4px 11px;border-radius:999px;background:#8c1427;color:#fff;font-size:12px;font-weight:700;letter-spacing:.03em;font-variant-numeric:tabular-nums}
#countdown.expired{background:#6f5849}
.code-box.expired{opacity:.55}
.code-box.expired #coupon-code{text-decoration:line-through}
.code-box{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px dashed #bd914b;background:#fffdf8;border-radius:7px;margin:7px 0 0;padding:6px 7px 6px 11px}
#coupon-code{font-size:12px;letter-spacing:.05em;font-weight:700;color:#0b422e;word-break:break-all;-webkit-user-select:all;user-select:all}
#copy-button{border:0;border-radius:5px;background:#8c1427;color:#fff;padding:7px 10px;font-size:11px;white-space:nowrap}
.respin-button{display:block;width:100%;margin-top:6px;border:1px solid #0b5a3c;border-radius:7px;background:#fff;color:#0b5a3c;padding:9px 12px;font-size:12px;font-weight:700}
.respin-button[hidden]{display:none}
.gift-state{margin-top:6px!important;padding:8px 12px;border:1px solid #c99b4c;border-radius:7px;background:#fff6df;color:#684b1e!important;font-size:12px!important;font-weight:700;text-align:center}
.gift-state.success{border-color:#1d704b;background:#e9f6eb;color:#0c5133!important}
.gift-state.error{border-color:#b04747;background:#fff0eb;color:#9a2626!important}
.wheel-section{position:relative;align-self:center;text-align:center;padding:4px 0 0}
.wheel-frame{position:relative;width:min(100%,730px);aspect-ratio:1;margin:auto;border-radius:50%;border:8px solid #bd8226;background:radial-gradient(circle at 35% 20%,#fff3c2 0,#daa73c 47%,#a26714 82%,#f7d577 100%);box-shadow:0 0 0 3px #f8dfa0,inset 0 0 0 3px #fff1b5,inset 0 0 16px #5d330b,0 21px 35px #2d210c6e}
.wheel-frame:before{content:'';position:absolute;inset:10px;border-radius:50%;border:2px solid #fff1ba;z-index:1;pointer-events:none}
.wheel-bulbs{position:absolute;inset:0;z-index:5;pointer-events:none}
.bulb{position:absolute;width:9px;height:9px;border-radius:50%;background:#fff7cb;box-shadow:0 0 0 2px #ad7519,0 0 8px 3px #fff8b3}
.pointer{position:absolute;z-index:7;top:-21px;left:50%;width:55px;height:83px;transform:translateX(-50%);background:linear-gradient(90deg,#945815,#ffe69c 38%,#d99d2c 65%,#6c3e0d);clip-path:polygon(50% 100%,3% 22%,8% 8%,25% 0,75% 0,92% 8%,97% 22%);filter:drop-shadow(0 3px 3px #5b360e)}
.pointer:after{content:'';position:absolute;inset:5px;clip-path:inherit;background:linear-gradient(90deg,#c5902c,#fff2b6 46%,#bd8228)}
.wheel-face{position:absolute;inset:27px;border-radius:50%;border:3px solid #74500d;overflow:hidden;background:conic-gradient(#fff5df 0deg 36deg,#820d29 36deg 72deg,#fff5df 72deg 108deg,#064b34 108deg 144deg,#820d29 144deg 180deg,#fff5df 180deg 216deg,#064b34 216deg 252deg,#fff5df 252deg 288deg,#820d29 288deg 324deg,#064b34 324deg 360deg);box-shadow:inset 0 0 0 4px #e0af48,inset 0 0 23px #1f110445;transition:transform .2s}
.wheel-face:before{content:'';position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(transparent 0deg 35.6deg,#b8892e 35.6deg 36deg);pointer-events:none}
.wheel-face.spinning{transition:transform 4.6s cubic-bezier(.12,.83,.12,1)}
.wheel-prize{position:absolute;z-index:1;inset:0;text-align:center;pointer-events:none;font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(10px,1.25vw,17px);font-weight:700;line-height:.9;letter-spacing:-.01em}
.wheel-prize[data-tone="dark"]{color:#fff7e7;text-shadow:0 1px 3px #0009}
.wheel-prize[data-tone="light"]{color:#123422;text-shadow:0 1px #fff9}
.wheel-prize-label{position:absolute;width:15.5%;transform:translate(-50%,-50%) rotate(var(--tilt,0deg));display:grid;justify-items:center;gap:2px}
.wheel-prize-name{display:block;text-wrap:balance}
.prize-art{position:absolute;display:grid;place-items:center;transform:translate(-50%,-50%) rotate(var(--tilt,0deg));width:clamp(70px,7.3vw,105px);height:clamp(55px,6.2vw,90px);overflow:visible;background:none}
.prize-art img{display:block;width:100%;height:100%;object-fit:contain;transform:scale(var(--prize-image-scale,1));transform-origin:center;filter:drop-shadow(0 2px 2px #170b0866)}
.discount-art{font-family:'Cormorant Garamond',Georgia,serif;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1;white-space:nowrap;font-size:clamp(34px,4vw,56px);font-weight:700;line-height:1;color:#f9dda0;text-shadow:0 2px 0 #995d1c,0 4px 8px #160705bd}
.wheel-trigger{position:absolute;z-index:6;top:50%;left:50%;transform:translate(-50%,-50%);width:23%;aspect-ratio:1;border-radius:50%;border:7px solid #d7a33f;background:radial-gradient(circle at 30% 20%,#0b6846 0,#06422e 51%,#02281c 100%);box-shadow:0 0 0 3px #fff2bc,0 6px 16px #1e100b9c,inset 0 0 0 2px #fce8a4;color:#fff8e8;font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(20px,3vw,40px);font-weight:700;text-shadow:0 2px 2px #001a11;letter-spacing:.01em;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;text-align:center;line-height:1}
.wheel-trigger.is-long{font-size:clamp(13px,1.8vw,24px)}
.wheel-trigger:before,.wheel-trigger:after{content:'✦';display:block;color:#d5ad56;font-family:Georgia,serif;font-size:17px;line-height:.7}
.wheel-trigger.is-complete span,.wheel-trigger.is-complete:after{display:none}
.wheel-trigger.is-complete:before{font-size:clamp(24px,4vw,40px);line-height:1}
.wheel-trigger:hover,.wheel-trigger.is-ready{background:radial-gradient(circle at 30% 20%,#127b53,#06422e 70%)}
.wheel-trigger:focus-visible{outline:4px solid #fff;outline-offset:5px}
.wheel-trigger:disabled{cursor:default}
.wheel-caption{font-size:11px;line-height:1.4;color:#2b3a26;background:#fffae8c4;border-radius:50px;padding:5px 14px;display:inline-block;margin:15px auto 0}
.wheel-caption[hidden]{display:none}
footer{position:relative;z-index:1;font-size:10px;line-height:1.4;color:#543f2f;text-align:center;margin:7px auto 0;text-shadow:0 1px #fff9}
footer[hidden]{display:none}
@media(max-width:1180px){.shell{padding:25px 22px 12px}.layout{grid-template-columns:minmax(300px,.43fr) minmax(450px,.57fr)}.wheel-frame{width:min(100%,590px)}.offer{font-size:clamp(29px,3.4vw,47px)}}
@media(max-width:860px){body{padding:8px}.shell{padding:18px 15px 15px;min-height:calc(100dvh - 16px)}.layout{display:flex;flex-direction:column;gap:14px;min-height:0;flex:0 0 auto}.story{--story-card-width:570px;width:100%;gap:8px}.wheel-section{width:100%}.wheel-frame{width:min(100%,570px)}}
@media(max-width:540px){body{padding:0}.shell{padding:12px 11px 14px;border-radius:0}.brand{width:min(100%,200px)}.offer{font-size:37px}.eligibility{font-size:17px}.eligibility strong{font-size:12px}.action-panel{padding:12px;min-height:0}.action-panel h2{font-size:27px}.primary{width:100%}.wheel-frame{width:min(100%,430px);border-width:6px}.wheel-face{inset:18px}.bulb{width:6px;height:6px}.pointer{width:38px;height:58px;top:-17px}.wheel-prize{font-size:clamp(8px,2.25vw,12px)}.wheel-prize-label{--prize-label-radius:23%;width:15.5%;gap:0}.prize-art{--prize-art-radius:39%;width:19.8%;height:16.2%}.prize-art img{filter:drop-shadow(0 1px 1px #170b0833)}.prize-art img[src="/assets/cutout-findik-kremasi.png"]{transform:scale(.77)}.discount-art{font-size:clamp(25px,7vw,34px)}.wheel-trigger{border-width:4px;font-size:clamp(20px,6vw,30px)}.wheel-trigger:before,.wheel-trigger:after{font-size:12px}.wheel-trigger.is-long{font-size:clamp(12px,3.6vw,18px)}.wheel-caption{font-size:10px}}
@media(max-width:640px){.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;container-type:inline-size}.story,.campaign-heading{display:contents}.brand{display:none}.ornament{order:1}h1{order:2;margin-bottom:0;text-align:center}.wheel-section{order:3;padding-top:24px}.eligibility{order:4;margin-inline:auto}.action-panel{order:5}#result-view h2{font-size:21px;line-height:1.15}.action-panel h2{font-size:22px}#locked-view h2{font-size:19px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.wheel-face.spinning{transition-duration:.01ms}}
