/* Dobipa tanıtım sitesi. Renkler uygulamanın "sıcak" paletiyle aynı (src/styles/theme.css). */
:root{
  --font:'Nunito','Arial Rounded MT Bold','Trebuchet MS',sans-serif;
  --paper:#FFFBF5;--card:#FFFFFF;--ink:#221E1B;--muted:#221E1BA6;
  --tomato:#C2410C;--tomato-shadow:#8E2F08;--pepper:#2F7D45;--eggplant:#6D3FA6;--yellow:#FFD260;
  --line:#EFE6DC;--card-edge:#D8C8B8;--peach:#FFF2E8;--sage:#F1F7ED;--lilac:#F4EEFB;
  --outline:#2A1D16;--warn:#B42318;--warn-bg:#FDECEA;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#1C1A18;--card:#262320;--ink:#F4EFE9;--muted:#F4EFE9A6;
    --tomato:#FF7A4D;--tomato-shadow:#C2410C;--pepper:#6BD891;--eggplant:#B892F0;
    --line:#36322E;--card-edge:#151311;--peach:#3B2C25;--sage:#253329;--lilac:#2E2738;
    --outline:#0F0D0C;--warn:#FF8A7A;--warn-bg:#3A2220;
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-weight:600;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:var(--tomato);font-weight:800;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--pepper);outline-offset:3px;border-radius:10px}
.skip{position:absolute;left:16px;top:-60px;background:var(--card);padding:10px 14px;border-radius:12px;z-index:20}
.skip:focus{top:12px}

.top,main>section,.foot{width:min(100% - 32px,1120px);margin-inline:auto}
h2{font-size:clamp(30px,6vw,52px);line-height:1.05;letter-spacing:-.04em;font-weight:900}
h3{font-size:21px;font-weight:900;letter-spacing:-.02em}
.section-lead{font-size:18px;max-width:34em;margin-top:12px;color:var(--muted)}
.section-lead strong{color:var(--ink);font-weight:900}

/* Üst çubuk */
.top{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.wordmark{display:inline-flex;align-items:center;gap:10px;font-size:28px;font-weight:900;letter-spacing:-.06em;color:var(--ink);text-decoration:none}
.logo-face{width:40px;height:40px;border-radius:50%;border:3px solid var(--outline);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.wordmark:hover .logo-face{transform:rotate(-12deg) scale(1.1)}
.top nav{display:flex;gap:18px}
.top nav a{color:var(--muted);text-decoration:none;font-size:15px}
.top nav a:hover{color:var(--ink)}
@media (max-width:560px){.top nav{display:none}}

/* Ortak maskot: kap kaydırma için, img ezilip uzama için */
.mascot{position:relative;display:block;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mascot img{width:100%;transform-origin:50% 92%;will-change:transform}
.mascot::after{content:"";position:absolute;left:24%;right:24%;bottom:5%;height:8%;border-radius:50%;background:var(--ink);opacity:.12;z-index:-1;transform-origin:center}
.mascot.boing img{animation:boing .62s cubic-bezier(.3,.7,.4,1)}
.mascot.boing::after{animation:shadow .62s cubic-bezier(.3,.7,.4,1)}
@keyframes boing{
  0%{transform:translateY(0) scale(1,1)}
  14%{transform:translateY(0) scale(1.12,.86)}
  42%{transform:translateY(-30%) scale(.9,1.1)}
  68%{transform:translateY(0) scale(1.12,.88)}
  84%{transform:translateY(0) scale(.97,1.03)}
  100%{transform:translateY(0) scale(1,1)}
}
@keyframes shadow{0%,14%,68%,100%{transform:scale(1);opacity:.12}42%{transform:scale(.55);opacity:.05}}

/* Hero */
.hero{padding:8px 0 56px;position:relative;isolation:isolate;overflow-x:clip}
.brand{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;margin-top:8px}
.syl{display:flex;flex-direction:column;align-items:center;min-width:0}
.syl .mascot{width:min(100%,250px);margin-bottom:-6%;z-index:1}
.letters{font-size:min(23vw,290px);line-height:.78;font-weight:900;letter-spacing:-.07em;padding-right:.07em}
.do .letters{color:var(--tomato)}
.bi .letters{color:var(--pepper)}
.pa .letters{color:var(--eggplant)}
.drop img{animation:drop .9s cubic-bezier(.3,.7,.4,1) var(--d) both}
.drop::after{animation:dropShadow .9s ease-out var(--d) both}
@keyframes drop{
  0%{transform:translateY(-120%) scale(.9,1.12);opacity:0}
  45%{transform:translateY(0) scale(1.16,.84);opacity:1}
  62%{transform:translateY(-14%) scale(.95,1.06)}
  80%{transform:translateY(0) scale(1.05,.95)}
  100%{transform:translateY(0) scale(1,1)}
}
@keyframes dropShadow{0%{transform:scale(.3);opacity:0}45%,100%{transform:scale(1);opacity:.12}}
.hero-copy{display:grid;gap:18px;margin-top:40px;max-width:640px}
.hero h1{font-size:clamp(30px,5.4vw,50px);line-height:1.08;letter-spacing:-.04em;font-weight:900}
.lead{font-size:19px;color:var(--muted);max-width:32em}
.scroll-hint{margin-top:48px;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:10px}
.scroll-hint::before{content:"";width:18px;height:28px;border:2.5px solid currentColor;border-radius:10px;background:radial-gradient(circle at 50% 30%,currentColor 2.5px,transparent 3px);animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{50%{background-position:0 6px}}
@media (min-width:900px){
  .hero-copy{grid-template-columns:1.2fr 1fr;max-width:none;align-items:end;column-gap:48px}
  .hero-copy .lead{grid-column:2;grid-row:1}
  .hero-copy .stores{grid-column:1/-1}
}

/* Mağaza rozetleri */
.stores{display:flex;flex-wrap:wrap;gap:12px}
.store{display:inline-flex;align-items:center;gap:10px;min-height:58px;padding:6px 22px 6px 16px;border-radius:18px;background:var(--ink);color:var(--paper);font-size:19px;font-weight:900;line-height:1.1;border-bottom:5px solid var(--tomato);cursor:default}
.store>span{display:flex;flex-direction:column;justify-content:center}
.store small{font-size:12px;font-weight:800;opacity:.75}
.store-logo{width:26px;height:26px;flex:none;fill:currentColor}

/* Müzik şeridi */
main>.band{width:100%;max-width:none;overflow:hidden;background:var(--tomato);border-block:3px solid var(--outline);transform:rotate(-2deg);margin:8px 0 24px}
.band-track{display:flex;width:max-content;animation:bandMove 28s linear infinite}
.band-unit{display:flex;align-items:center;gap:16px;padding:10px 8px;white-space:nowrap}
.band b{color:#FFF7EF;font-size:clamp(18px,3vw,26px);font-weight:900;letter-spacing:-.02em}
.note-sym{color:var(--yellow);font-size:28px;font-weight:900;display:inline-block;animation:noteBob 1s ease-in-out infinite}
.dancer{width:48px;height:48px;animation:dance .5s ease-in-out infinite alternate;transform-origin:50% 90%}
.band-unit .dancer:nth-of-type(2){animation-delay:.17s}.band-unit .dancer:nth-of-type(3){animation-delay:.34s}
@keyframes bandMove{to{transform:translateX(-50%)}}
@keyframes dance{from{transform:rotate(-10deg) translateY(0)}to{transform:rotate(10deg) translateY(-6px)}}
@keyframes noteBob{50%{transform:translateY(-6px) rotate(-12deg)}}
.band:hover .band-track{animation-play-state:paused}

/* Ekip */
.team{padding:72px 0 40px}
.crew{display:grid;gap:20px;margin-top:40px}
.member{border-radius:32px;padding:20px 24px 28px;display:grid;justify-items:start;gap:4px}
.member .mascot{width:150px;margin:-56px 0 6px}
.domi{background:var(--peach)}
.biber{background:var(--sage)}
.patlican{background:var(--lilac)}
.role{font-weight:900;font-size:15px}
.domi .role{color:var(--tomato)}.biber .role{color:var(--pepper)}.patlican .role{color:var(--eggplant)}
.member p:last-child{color:var(--muted);margin-top:6px}
@media (min-width:760px){.crew{grid-template-columns:repeat(3,1fr);margin-top:72px}.member:nth-child(2){margin-top:28px;margin-bottom:-28px}}

/* Girişte zıplayarak gelme */
[data-hop]{opacity:0;transform:translateY(40px)}
[data-hop].in{animation:hopIn .7s cubic-bezier(.3,.7,.4,1) var(--hop-delay,0s) both}
@keyframes hopIn{
  0%{opacity:0;transform:translateY(40px) scale(.94,1.06)}
  50%{opacity:1;transform:translateY(-14px) scale(.98,1.03)}
  75%{transform:translateY(0) scale(1.03,.97)}
  100%{opacity:1;transform:none}
}

/* Nasıl çalışır */
.how{padding:96px 0 64px}
.steps-track{position:relative;margin-top:40px;padding-left:76px}
.traveler{position:absolute;left:0;top:0;width:76px;z-index:2;pointer-events:none;will-change:transform}
.steps{display:grid;gap:22px;counter-reset:none}
.step{position:relative;padding:22px 22px 24px;border:2px solid var(--line);border-radius:24px;background:var(--card);box-shadow:0 5px 0 var(--card-edge);transition:border-color .25s,box-shadow .25s}
.step.active{border-color:var(--tomato);box-shadow:0 5px 0 var(--tomato-shadow)}
.num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--peach);color:var(--tomato);font-weight:900;font-size:20px;margin-bottom:10px}
.step.active .num{background:var(--tomato);color:var(--paper)}
.step p{color:var(--muted);margin-top:4px}
@media (min-width:860px){
  .steps-track{padding-left:0;padding-top:120px}
  .traveler{width:110px}
  .steps{grid-template-columns:repeat(3,1fr)}
}

/* Özellik sahneleri */
.chapter{padding:96px 0 8px;text-align:left}
.chapter h2{font-size:clamp(38px,8vw,80px)}
.feature{display:grid;gap:32px;align-items:center;padding:56px 0}
.feature-copy{display:grid;gap:14px;max-width:34em}
.feature-copy p{font-size:18px;color:var(--muted)}
.feature-art{position:relative;border-radius:36px;padding:28px;display:grid;place-items:center}
.feature-art .mascot{width:min(70%,260px)}
.note{font-size:15px!important;color:var(--ink)!important;border-left:4px solid var(--tomato);padding-left:12px}
@media (min-width:860px){
  .feature{grid-template-columns:1fr 1fr;gap:64px;padding:80px 0}
}

.safety .feature-art{background:var(--peach)}
.allergens{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
.allergens li{padding:6px 12px;border-radius:999px;background:var(--card);border:2px solid var(--line);font-weight:800;font-size:14px;text-decoration:line-through;text-decoration-color:var(--tomato);text-decoration-thickness:3px}

.toggles{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.pill{display:inline-block;padding:9px 16px;border-radius:14px;border:2px solid var(--line);background:var(--card);font-weight:900;box-shadow:0 4px 0 var(--line)}
.pill.on{border-color:var(--pepper);background:var(--sage);color:var(--pepper);box-shadow:0 4px 0 var(--pepper)}
.pill.on::before{content:"✓ "}

.scan{border-radius:36px;background:var(--sage);padding:28px;display:grid;gap:18px}
.product{position:relative;background:var(--card);border-radius:20px;padding:22px 28px;border:2px solid var(--line);overflow:hidden}
.barcode{width:100%;height:80px}
.barcode path{stroke:var(--ink);stroke-width:3}
.laser{position:absolute;left:12px;right:12px;top:50%;height:3px;border-radius:3px;background:var(--tomato);box-shadow:0 0 0 3px #C2410C33;opacity:0}
.scan.in .laser{animation:laser 1.6s ease-in-out infinite}
.scan.in .product{animation:beep 1.6s step-end infinite}
@keyframes beep{0%,100%{border-color:var(--line)}48%{border-color:var(--pepper)}56%{border-color:var(--line)}}
@keyframes laser{0%{top:15%;opacity:1}50%{top:85%;opacity:1}100%{top:15%;opacity:1}}
.scan-title{font-weight:900;font-size:17px}
.scan-result{display:grid;gap:8px}
.warn{padding:10px 14px;border-radius:14px;background:var(--warn-bg);color:var(--warn);font-weight:800;opacity:0;transform:scale(.9)}
.warn::before{content:"! ";font-weight:900}
.scan.in .warn{animation:pop .45s cubic-bezier(.3,1.6,.5,1) both}
.scan.in .salt{animation-delay:1.7s}
.scan.in .allergen{animation-delay:2s}
@keyframes pop{to{opacity:1;transform:none}}
.scan-foot{font-size:13px;color:var(--muted)}

/* İçerik karşılaştırma */
.compare-art{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;background:var(--peach);border-radius:36px;padding:28px 20px 90px}
.pack{background:var(--card);border:2px solid var(--line);border-radius:22px;padding:16px;box-shadow:0 5px 0 var(--card-edge);transition:transform .45s cubic-bezier(.3,1.6,.5,1),border-color .3s,box-shadow .3s}
.pack h3{font-size:16px}
.pack h3 span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--ink);color:var(--paper);font-size:13px;margin-left:4px}
.ingredients{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0;min-height:96px;align-content:flex-start}
.ingredients li{padding:5px 10px;border-radius:999px;background:var(--sage);font-size:13px;font-weight:800;opacity:0;transform:scale(.6);transition:opacity .2s,transform .35s cubic-bezier(.3,1.6,.5,1),background .3s,color .3s}
.ingredients li.on{opacity:1;transform:none}
.compare.flagged .ingredients li.bad{background:var(--warn-bg);color:var(--warn);animation:nudge .5s ease}
.compare.flagged .ingredients li.bad::before{content:"! "}
.verdict{font-weight:900;font-size:14px;opacity:0;transition:opacity .3s}
.compare.decided .verdict{opacity:1}
.verdict.good{color:var(--pepper)}.verdict.meh{color:var(--warn)}
.pack-a.win{transform:translateY(-12px) rotate(-1.5deg);border-color:var(--pepper);box-shadow:0 8px 0 var(--pepper)}
.compare-mascot{position:absolute;width:110px;left:8%;bottom:-6px;opacity:0;transition:opacity .3s}
.compare.decided .compare-mascot{opacity:1}
@keyframes nudge{20%{transform:rotate(-3deg)}40%{transform:rotate(3deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(1deg)}}
@media (max-width:420px){.compare-art{grid-template-columns:1fr}}

/* Kalori halkası */
.kcal-art{background:var(--lilac);border-radius:36px;padding:28px;display:grid;justify-items:center;gap:14px}
.ring-wrap{position:relative;width:min(100%,300px);aspect-ratio:1}
.kcal-ring{width:100%;transform:rotate(-90deg);overflow:visible}
.kcal-ring circle{fill:none;stroke-width:12;stroke-linecap:round}
.ring-track{stroke:var(--card)}
.ring-plan{stroke:var(--eggplant);stroke-dasharray:0 100}
.ring-extra{stroke:var(--tomato);stroke-dasharray:0 100}
.ring-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding-top:34%}
.kcal-num{font-size:clamp(28px,7vw,40px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.ring-center span{font-size:13px;font-weight:800;color:var(--muted)}
.ring-mascot{position:absolute;left:50%;top:9%;width:46%;transform:translateX(-50%)}
.ring-mascot img{transition:opacity .25s}
.ring-mascot .pm-thumbs{position:absolute;inset:0;opacity:0}
.ring-mascot.happy .pm-thumbs{opacity:1}
.ring-mascot.happy .pm-notes{opacity:0}
.kcal-legend{display:flex;gap:14px;font-size:13px;font-weight:800;color:var(--muted)}
.kcal-legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.lg-plan::before{background:var(--eggplant)}.lg-extra::before{background:var(--tomato)}
.health-points{display:grid;gap:8px}
.health-points li{position:relative;padding-left:30px;font-weight:800}
.health-points li::before{content:"✓";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:7px;background:var(--pepper);color:var(--paper);display:grid;place-items:center;font-size:13px;font-weight:900}
.bar.limit i::after{background:var(--pepper)}
.bar.limit span::after{content:" sınır";font-size:11px;color:var(--muted);font-weight:700}
.plate{width:100%;max-width:340px;background:var(--card);border-radius:22px;padding:18px;border:2px solid var(--line);display:grid;gap:10px}
.plate-title{font-size:13px;color:var(--muted);font-weight:800}
.bar{display:grid;grid-template-columns:118px 1fr;align-items:center;gap:10px;font-size:14px;font-weight:800}
.bar i{height:12px;border-radius:12px;background:var(--line);position:relative;overflow:hidden}
.bar i::after{content:"";position:absolute;inset:0;background:var(--eggplant);border-radius:inherit;transform:scaleX(var(--f,0));transform-origin:left;transition:transform .3s ease-out}
@media (min-width:860px){.nutrition .feature-art{order:0}.conditions .feature-copy{order:0}}

/* Liste ve kavanoz */
.pantry-art{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;align-items:center;background:var(--peach);border-radius:36px;padding:28px}
.list{position:relative;background:var(--card);border-radius:22px;padding:16px 18px;border:2px solid var(--line)}
.tapper{position:absolute;left:14px;top:0;width:44px;z-index:3;pointer-events:none;opacity:0;transform:translate(0,calc(var(--ty,40px) - 34px));transition:transform .3s cubic-bezier(.3,1.2,.5,1),opacity .3s}
.tapper.show{opacity:1}
.tapper svg{width:100%;display:block;filter:drop-shadow(0 3px 0 #0003)}
.tapper.tap svg{animation:penWrite .5s cubic-bezier(.4,0,.3,1)}
@keyframes penWrite{0%{transform:translate(0,0)}12%{transform:translate(4px,4px)}80%{transform:translate(var(--len,160px),2px)}100%{transform:translate(var(--len,160px),-6px) rotate(8deg)}}
.list li .strike{position:absolute;left:28px;top:52%;height:3px;width:calc(100% - 28px);border-radius:3px;background:var(--pepper);transform:scaleX(0);transform-origin:left;transition:transform .42s cubic-bezier(.4,0,.3,1) .05s}
.list li.got .strike{transform:scaleX(1)}
.fly-chip img{width:30px;height:30px;margin:-6px 6px -8px -6px;vertical-align:middle}
.fly-chip{position:fixed;z-index:50;pointer-events:none;padding:6px 12px;border-radius:999px;background:var(--pepper);color:var(--paper);font:900 14px var(--font);box-shadow:0 4px 0 #0003;transition:transform .7s cubic-bezier(.5,-.3,.6,1),opacity .7s}
.list li.got{animation:gotHop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes gotHop{40%{transform:translateX(6px) scale(1.03)}}
.cabinet-slot{position:relative}
.burst-label{position:absolute;left:50%;top:-18px;z-index:20;white-space:nowrap;padding:8px 16px;border-radius:16px;background:var(--tomato);color:#FFF;font-weight:900;font-size:15px;transform:translateX(-50%) scale(0) rotate(-6deg);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.cabinet-slot.burst .burst-label{transform:translateX(-50%) scale(1) rotate(-6deg)}
.site-cabinet.boom{animation:boom .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes boom{0%{transform:scale(1)}15%{transform:scale(1.08,.9)}30%{transform:scale(.94,1.08) rotate(-2deg)}45%{transform:scale(1.04,.97) rotate(2deg)}60%{transform:rotate(-1deg)}100%{transform:none}}
.pop-item{position:fixed;z-index:60;width:var(--s,46px);pointer-events:none;overflow:visible;animation:popOut var(--t,1.1s) cubic-bezier(.2,.7,.4,1) forwards}
@keyframes popOut{0%{transform:translate(-50%,-50%) scale(.4);opacity:1}55%{transform:translate(calc(-50% + var(--dx)*.75),calc(-50% + var(--dy))) rotate(calc(var(--r)*.6)) scale(1.1);opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + 260px)) rotate(var(--r)) scale(.9);opacity:0}}
.site-cabinet.bump{animation:cabBump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes cabBump{35%{transform:scale(1.03,.97)}70%{transform:scale(.99,1.02)}}
.list-head{display:flex;justify-content:space-between;font-weight:900;margin-bottom:8px}
.count{color:var(--pepper)}
.list li{display:flex;justify-content:space-between;gap:8px;padding:7px 0 7px 30px;position:relative;border-top:2px dashed var(--line);font-weight:800;transition:color .2s}
.list li span{color:var(--muted);font-weight:700}
.list li::before{content:"";position:absolute;left:0;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:7px;border:2.5px solid var(--card-edge);transition:background .2s,border-color .2s}
.list li.got{color:var(--muted)}
.list li.got::before{background:var(--pepper);border-color:var(--pepper);animation:tick .35s cubic-bezier(.3,1.6,.5,1)}
.list li.got::after{content:"✓";position:absolute;left:4px;top:50%;margin-top:-12px;color:var(--paper);font-weight:900;font-size:15px}
@keyframes tick{0%{transform:scale(.5)}100%{transform:scale(1)}}
.skipped{font-size:13px;color:var(--muted);margin-top:8px}
@media (max-width:640px){.pantry-art{grid-template-columns:1fr;padding:24px 16px}.cabinet-slot{max-width:340px;margin-inline:auto;width:100%}}

/* Dolap: SKT kurtarma etiketleri */
.rescues{display:grid;gap:8px;margin-top:8px}
.rescues li{justify-self:start;padding:8px 14px;border-radius:999px;background:var(--peach);color:var(--tomato);font-weight:900;opacity:0;transform:translateY(10px) scale(.9);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.rescues li.on{opacity:1;transform:none}

/* Para kavanozu: yapışkan sahne */
.money{height:280vh;width:100%!important;max-width:none!important;position:relative}
.money-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;justify-items:center;align-content:start;padding:9vh 16px 0;text-align:center;background:var(--paper)}
.money-copy{display:grid;gap:12px;max-width:640px;position:relative;z-index:3;background:var(--paper);border-radius:28px;padding:14px 18px;box-shadow:0 0 24px 18px var(--paper)}
.money-copy p{font-size:18px;color:var(--muted)}
.money-jar{width:min(34vw,24vh,210px);margin-top:3vh;position:relative;z-index:1;overflow:visible}
.mjar-glass{fill:none;stroke:var(--outline);stroke-width:6;stroke-linejoin:round}
.mjar-lid{fill:var(--pepper);stroke:var(--outline);stroke-width:6}
.mjar-slot{fill:var(--outline)}
.mjar-shine{stroke:#FFFFFF;stroke-opacity:.7;stroke-width:8;stroke-linecap:round}
.mjar-fill{transform:translateY(230px);will-change:transform}
.mjar-fill rect{fill:#F2B632}
.mjar-fill circle{fill:#FFD260;stroke:#C98E1A;stroke-width:3}
.money-jar.full{animation:jarHop .5s cubic-bezier(.3,.7,.4,1)}
@keyframes jarHop{40%{transform:translateY(-10px) scale(.96,1.05)}70%{transform:scale(1.04,.96)}}
.rain{position:absolute;inset:0;pointer-events:none;z-index:2}
.coin{position:absolute;top:-60px;width:var(--s,34px);height:var(--s,34px);border-radius:50%;background:#FFD260;border:3px solid #C98E1A;box-shadow:inset 0 -4px 0 #F2B632;display:grid;place-items:center;font:900 calc(var(--s,34px)*.5) var(--font);color:#A86E0C;animation:fall var(--t,1.4s) cubic-bezier(.45,0,.9,.6) forwards}
@keyframes fall{to{transform:translateY(var(--y,100vh)) rotate(var(--r,360deg))}}
.coin.up{top:auto;bottom:var(--pool,0px);animation:splash .9s cubic-bezier(.2,.8,.4,1) forwards}
@keyframes splash{0%{transform:translate(0,30px) scale(.6)}45%{transform:translate(calc(var(--dx)*.6),var(--h,-160px)) rotate(180deg)}100%{transform:translate(var(--dx),40px) rotate(360deg);opacity:.2}}
.pool{position:absolute;left:0;right:0;bottom:0;height:var(--pool,0px);z-index:2}
.pool::before{content:"";position:absolute;inset:0;z-index:2;background:
  radial-gradient(circle at 18px 18px,#FFD260 0 13px,#C98E1A 13px 16px,transparent 17px) 0 0/36px 30px,
  radial-gradient(circle at 18px 18px,#FFE08A 0 13px,#C98E1A 13px 16px,transparent 17px) 18px 15px/36px 30px,
  #F2B632}
.pool::after{content:"";position:absolute;left:0;right:0;top:-14px;height:28px;z-index:2;background:radial-gradient(circle at 18px 14px,#FFD260 0 12px,#C98E1A 12px 15px,transparent 16px) 0 0/30px 28px repeat-x}
.swimmers{position:absolute;left:0;right:0;top:0;display:flex;justify-content:center;gap:2vw;z-index:1;transform:translateY(-74%);opacity:0;transition:opacity .4s}
.pool.deep .swimmers{opacity:1}
.swimmer{width:min(27vw,190px)}
.swimmer img{width:100%;transform-origin:50% 90%}
.money.party .swimmer img{animation:swimHop .95s cubic-bezier(.3,.7,.4,1) infinite}
.money.party .swimmer:nth-child(2) img{animation-delay:.2s}
.money.party .swimmer:nth-child(3) img{animation-delay:.4s}
@keyframes swimHop{0%,100%{transform:translateY(0) scale(1.08,.92)}45%{transform:translateY(-62%) scale(.93,1.08) rotate(-4deg)}70%{transform:translateY(-8%) scale(1,1)}}

/* Seri ve fidan */
.grove-art{position:relative;background:var(--sage);border-radius:36px;padding:28px 28px 24px;display:grid;justify-items:center;gap:10px}
.big-tree{width:min(80%,280px);overflow:visible}
.grove-mascot{position:absolute;width:100px;left:4%;top:20px}
.planted{position:absolute;top:24px;right:20px;padding:8px 14px;border-radius:14px;background:var(--pepper);color:var(--paper);font-weight:900;transform:rotate(8deg) scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.grove-art.done .planted{transform:rotate(8deg) scale(1)}
.counter{font-weight:900;font-size:18px;font-variant-numeric:tabular-nums}
.counter b{font-size:34px;color:var(--pepper)}
.meter{width:min(100%,320px);height:14px;border-radius:14px;border:2px solid var(--line);background:var(--card);overflow:hidden}
.meter i{display:block;height:100%;background:var(--pepper);transform-origin:left;transform:scaleX(0)}

.project-note{padding:14px 16px;border-radius:18px;background:var(--sage);color:var(--ink)!important;border-left:5px solid var(--pepper)}
.project-note strong{color:var(--pepper);font-weight:900}

/* Arkadaşlar */
.friends{padding:72px 0 40px}
.forest{display:flex;justify-content:center;align-items:end;gap:10px;margin-top:36px;padding:28px 12px 22px;border-radius:36px;background:var(--sage);overflow:hidden}
.friend{position:relative;display:grid;justify-items:center;gap:2px;flex:1 1 0;min-width:0;max-width:180px}
.ftree{width:100%;max-width:120px;overflow:visible;margin-bottom:-6px;--tw:5}
.face{width:min(100%,84px);border-radius:50%;background:var(--card);border:3px solid var(--outline);position:relative}
.friend strong{font-weight:900;font-size:15px;margin-top:4px}
.streak-pill{font-size:12px;font-weight:900;padding:3px 9px;border-radius:999px;background:var(--card);color:var(--pepper);border:2px solid var(--line);white-space:nowrap}
.streak-pill.full{background:var(--pepper);color:var(--paper);border-color:var(--pepper)}
.cheer{position:absolute;top:30%;left:50%;padding:5px 10px;border-radius:12px 12px 12px 3px;background:var(--tomato);color:#FFF;font-weight:900;font-size:13px;opacity:0;pointer-events:none;white-space:nowrap}
.cheer.go{animation:cheer 1.3s cubic-bezier(.3,.7,.4,1)}
@keyframes cheer{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}20%{opacity:1;transform:translate(-50%,-10px) scale(1.05)}80%{opacity:1;transform:translate(-50%,-26px)}100%{opacity:0;transform:translate(-50%,-40px)}}
.face.hop{animation:boing .6s cubic-bezier(.3,.7,.4,1);transform-origin:50% 100%}
.invite{display:grid;justify-items:center;gap:8px;margin-top:22px}
.invite .button{display:inline-flex;align-items:center;cursor:default}
@media (max-width:560px){.forest{gap:4px;padding-inline:6px}.friend strong{font-size:13px}.streak-pill{font-size:10px;padding:2px 6px}}

/* Avatar seli */
.flood{height:240vh;width:100%!important;max-width:none!important;position:relative}
.flood-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.flood-grid{position:absolute;inset:-60px;z-index:0;isolation:isolate;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-auto-rows:var(--cell);place-items:center}
.flood-grid img{position:relative;width:180%;max-width:none;height:auto;transform:translate(var(--jx,0),var(--jy,0)) scale(0) rotate(-20deg);opacity:0;transition:transform .45s cubic-bezier(.3,1.7,.5,1),opacity .2s}
.flood-grid img.on{transform:translate(var(--jx,0),var(--jy,0)) scale(var(--sc,1)) rotate(var(--rot,0deg));opacity:1}
.flood-card{position:relative;z-index:2;max-width:min(560px,calc(100% - 32px));padding:28px 28px 30px;border-radius:32px;background:var(--card);border:3px solid var(--outline);box-shadow:0 8px 0 var(--outline),0 0 0 6px var(--line);text-align:center}
.flood-card .section-lead{margin-inline:auto}

/* Oyun gibi: yakut, seviye, rozetler */
.play-art{position:relative;background:var(--lilac);border-radius:36px;padding:24px;display:grid;gap:16px;overflow:hidden}
.play-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.ruby-count{display:flex;align-items:center;gap:8px;font-weight:900}
.ruby-count .ruby{width:34px;height:34px}
.ruby-count b{font-size:32px;font-variant-numeric:tabular-nums;line-height:1}
.ruby-count span{color:var(--muted);font-size:14px}
.ruby-count.tick .ruby{animation:rubyPop .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes rubyPop{50%{transform:scale(1.35) rotate(-12deg)}}
.level{display:grid;gap:6px;min-width:180px;flex:1;max-width:260px}
.level span{font-size:14px;font-weight:800;color:var(--muted)}
.level b{color:var(--eggplant);font-size:18px}
.level-bar{height:14px;border-radius:14px;border:2px solid var(--line);background:var(--card);overflow:hidden}
.level-bar i{display:block;height:100%;background:var(--eggplant);transform-origin:left;transform:scaleX(var(--lv,0))}
.level.up b{display:inline-block;animation:rubyPop .5s cubic-bezier(.3,1.6,.5,1)}
.costume{position:absolute;right:14px;top:70px;width:110px;opacity:0;transform:scale(.4) rotate(-12deg);transition:opacity .3s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.costume.on{opacity:1;transform:none}
.costume-tag{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);white-space:nowrap;padding:3px 9px;border-radius:999px;background:var(--tomato);color:#FFF;font-size:12px;font-weight:900}
.album{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:84px}
.album li{display:grid;justify-items:center;gap:4px;padding:10px 6px;border-radius:20px;background:var(--card);border:2px dashed var(--card-edge);text-align:center;font-size:12px;font-weight:800;color:var(--muted)}
.album img{width:64px;filter:grayscale(1) brightness(.4);opacity:.35;transition:filter .35s,opacity .35s,transform .45s cubic-bezier(.3,1.6,.5,1);transform:scale(.8)}
.album li.got{border-style:solid;border-color:var(--eggplant);color:var(--ink)}
.album li.got img{filter:none;opacity:1;transform:none}
.ruby-fx{position:absolute;inset:0;pointer-events:none}
.ruby-fly{position:absolute;width:22px;height:22px;animation:rubyFly .9s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes rubyFly{0%{transform:translate(0,0) scale(.5);opacity:0}20%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.9) rotate(200deg);opacity:0}}

/* Paylaşım kartı */
.share-art{position:relative;display:grid;place-items:center;padding:30px 20px;background:var(--peach);border-radius:36px;min-height:360px;perspective:900px}
.share-card{position:relative;width:min(100%,280px);padding:22px 20px 110px;border-radius:26px;background:#C2410C;color:#FFF7EF;border:3px solid #2A1D16;box-shadow:0 10px 0 #2A1D16;transform:rotateY(var(--ry,60deg)) rotate(var(--rz,-8deg)) translateY(var(--ty,30px));opacity:var(--op,0);will-change:transform}
.sc-brand{font-weight:900;font-size:18px;opacity:.8}
.sc-title{font-weight:900;font-size:32px;line-height:1.05;margin-top:4px}
.sc-week{display:flex;gap:5px;margin-top:14px}
.sc-week li{flex:1;text-align:center;padding:6px 0;border-radius:10px;background:#FFF7EF33;font-size:11px;font-weight:900}
.sc-line{display:flex;justify-content:space-between;margin-top:12px;font-size:13px;font-weight:800}
.share-card img{position:absolute;right:8px;bottom:-6px;width:120px}
.sc-stamp{position:absolute;top:22px;right:12%;padding:8px 14px;border-radius:14px;border:3px solid var(--pepper);color:var(--pepper);background:var(--card);font-weight:900;transform:rotate(12deg) scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.share-art.sent .sc-stamp{transform:rotate(12deg) scale(1)}

/* Mutfakta küçük kolaylıklar */
.extras{padding:72px 0 40px}
.extras-list{display:grid;gap:16px;margin-top:32px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.ex{display:grid;grid-template-columns:84px 1fr;grid-template-rows:auto 1fr;column-gap:16px;align-items:start;padding:18px;border-radius:28px}
.ex.peach{background:var(--peach)}.ex.sage{background:var(--sage)}.ex.lilac{background:var(--lilac)}
.ex>img,.ex>.ex-icon,.ex>.ex-faces{grid-row:1/3;width:84px;height:84px;object-fit:contain}
.ex-faces{position:relative}
.ex-faces img{position:absolute;width:54px;top:0;left:0}
.ex-faces img:nth-child(2){left:30px;top:6px}
.ex-faces img:nth-child(3){left:12px;top:32px}
.ex h3{font-size:18px}
.ex p{color:var(--muted);font-size:15px;margin-top:2px}
.ex:hover>img,.ex:hover>.ex-icon{animation:boing .62s cubic-bezier(.3,.7,.4,1);transform-origin:50% 90%}

/* Biber ipucu */
.tips{position:relative;margin-block:56px;padding:0}
.tip-box{background:var(--sage);border-radius:36px;padding:32px 28px;padding-right:min(34%,240px);display:grid;gap:18px;justify-items:start;min-height:280px;align-content:center}
.bubble{font-size:clamp(19px,2.6vw,26px);font-weight:800;line-height:1.35;max-width:26em;background:var(--card);padding:18px 22px;border-radius:24px 24px 24px 6px;border:2px solid var(--line)}
.bubble.swap{animation:bubble .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes bubble{0%{transform:scale(.92);opacity:.3}100%{transform:none;opacity:1}}
.button{min-height:52px;padding:0 24px;border-radius:18px;border:2px solid var(--tomato-shadow);border-bottom-width:5px;background:var(--tomato);color:#FFF;font:900 17px var(--font);cursor:pointer;transition:transform .1s,border-width .1s}
@media (prefers-color-scheme:dark){.button{color:var(--paper)}}
.button:active{transform:translateY(3px);border-bottom-width:2px}
.peeker{position:absolute;right:-12px;bottom:0;width:min(36%,250px);transform:rotate(-8deg);transform-origin:bottom right}
@media (max-width:600px){.tip-box{padding:28px 20px 150px}.peeker{width:150px;right:4px}}

/* Yakında: yapay zeka */
.soon-pill{justify-self:start;padding:5px 12px;border-radius:999px;background:var(--eggplant);color:#FFF;font-weight:900;font-size:14px}
.chat{display:grid;gap:10px;align-content:start;padding:0 18px 20px;border-radius:28px;background:var(--lilac);min-height:360px;border:3px solid var(--outline);box-shadow:0 8px 0 var(--outline);overflow:hidden}
.chat-head{display:flex;align-items:center;gap:12px;margin:0 -18px 6px;padding:12px 18px;background:var(--tomato);color:#FFF}
.bot-avatar{position:relative;width:46px;height:46px;border-radius:50%;background:#FFF7EF;border:3px solid #FFF;overflow:hidden;flex:none}
.bot-avatar img{width:120%;max-width:none;margin:-4px 0 0 -10%}
.bot-id{display:grid;line-height:1.2}
.bot-id b{font-size:18px;font-weight:900}
.bot-id small{font-size:12px;font-weight:800;opacity:.9;display:flex;align-items:center;gap:5px}
.bot-id .dot{width:8px;height:8px;border-radius:50%;background:#7CF29A;box-shadow:0 0 0 3px #7CF29A44;animation:online 1.6s ease-in-out infinite}
@keyframes online{50%{box-shadow:0 0 0 6px #7CF29A11}}
.bot-tag{margin-left:auto;padding:4px 10px;border-radius:10px;background:#FFF7EF;color:var(--tomato);font-weight:900;font-size:13px}
.msg{max-width:88%;padding:12px 16px;border-radius:20px;font-weight:700;line-height:1.45;opacity:0;transform:translateY(12px) scale(.96);transition:opacity .3s,transform .4s cubic-bezier(.3,1.5,.5,1)}
.msg.on{opacity:1;transform:none}
.msg.me{justify-self:end;background:var(--tomato);color:#FFF;border-bottom-right-radius:6px}
.msg.bot{justify-self:start;background:var(--card);border:2px solid var(--line);border-bottom-left-radius:6px}
.msg.photo{padding:8px 8px 12px;width:min(94%,420px);max-width:94%}
.msg.photo p{padding:8px 8px 0}
.snap{position:relative;padding:14px 18px;border-radius:16px;background:#2A1D16;overflow:hidden}
.snap-cab{width:min(100%,330px);margin-inline:auto}
.vf{position:absolute;width:22px;height:22px;border:3px solid #FFF7EF;opacity:.9}
.vf.tl{left:8px;top:8px;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.vf.tr{right:8px;top:8px;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.vf.bl{left:8px;bottom:8px;border-right:0;border-top:0;border-radius:0 0 0 8px}
.vf.br{right:8px;bottom:8px;border-left:0;border-top:0;border-radius:0 0 8px 0}
.chat.scanning .vf{animation:vfPulse .6s ease-in-out infinite alternate}
@keyframes vfPulse{to{transform:scale(.88)}}
.flash{position:absolute;inset:0;background:#FFF;opacity:0;pointer-events:none}
.chat.scanning .flash{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
.rec{position:absolute;left:14px;bottom:10px;font-size:11px;font-weight:900;color:#FFF7EF;opacity:0;transition:opacity .2s}
.chat.scanning .rec{opacity:1}
.snap .dcab-tag-bg{fill:var(--pepper)!important;stroke:#FFF!important}
.snap .dcab-tag-tx{fill:#FFF!important}
.snap-scan{position:absolute;left:0;right:0;top:0;height:3px;background:var(--eggplant);box-shadow:0 0 0 4px #6D3FA633;opacity:0}
.chat.scanning .snap-scan{opacity:1;animation:snapScan 1.1s ease-in-out infinite}
@keyframes snapScan{0%,100%{top:4%}50%{top:94%}}
.typing{display:flex;align-items:center;gap:5px;padding:12px 16px}
.typing span{margin-left:6px;font-size:12px;color:var(--muted);font-weight:800}
.typing i{width:8px;height:8px;border-radius:50%;background:var(--muted);animation:dot 1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.answer{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:start}
.answer img{width:40px;height:40px;border-radius:50%;background:#FFF7EF;border:2px solid var(--tomato);object-fit:cover;object-position:50% 30%}
.answer b{color:var(--tomato)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{cursor:pointer;background:var(--card);font-family:var(--font);padding:7px 12px;border-radius:999px;border:2px solid var(--eggplant);color:var(--eggplant);font-weight:800;font-size:14px;opacity:0;transform:scale(.7);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.chips.on button{opacity:1;transform:none}
.chips button:hover{background:var(--eggplant);color:#FFF}
.chips.on button:nth-child(2){transition-delay:.08s}.chips.on button:nth-child(3){transition-delay:.16s}

/* Abonelik */
.pricing{padding:72px 0 24px}
.plans{display:grid;gap:18px;margin-top:40px;align-items:stretch}
.plan{position:relative;display:grid;gap:6px;align-content:start;padding:24px;border-radius:28px;background:var(--card);border:2px solid var(--line);box-shadow:0 6px 0 var(--card-edge);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.plan h3{font-size:20px}
.trial{font-size:13px;font-weight:800;color:var(--muted);margin-top:4px}
.price b{font-size:36px;font-weight:900;letter-spacing:-.03em}
.price span{color:var(--muted);font-weight:800;margin-left:4px}
.plan-note{color:var(--muted);font-size:15px}
.plan.best{background:var(--peach);border-color:var(--tomato);box-shadow:0 6px 0 var(--tomato-shadow)}
.pricing.in-view .plan.best{transform:translateY(-10px) rotate(-1deg)}
.ribbon{position:absolute;top:-14px;left:20px;padding:6px 12px;border-radius:12px;background:var(--tomato);color:#FFF;font-weight:900;font-size:14px;transform:rotate(-4deg)}
.plan-mascot{position:absolute;right:10px;top:-46px;width:96px}
.plan.free{background:var(--sage);border-color:var(--pepper);box-shadow:0 6px 0 var(--pepper)}
.plan.free ul{display:grid;gap:8px;margin-top:6px}
.plan.free li{position:relative;padding-left:28px;font-weight:800}
.plan.free li::before{content:"✓";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:6px;background:var(--pepper);color:var(--paper);display:grid;place-items:center;font-size:12px;font-weight:900}
.pricing-note{margin-top:22px;max-width:52em}
.plan.family{background:var(--lilac);border-color:var(--eggplant);box-shadow:0 6px 0 var(--eggplant)}
.ribbon.fam{background:var(--eggplant)}
.fam-faces{display:flex;margin:4px 0 4px}
.fam-faces img{width:52px;height:52px;margin-right:-14px;border-radius:50%;background:var(--card);border:3px solid var(--eggplant);transform:translateY(8px) scale(.6);opacity:0;transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.pricing.in-view .fam-faces img{transform:none;opacity:1}
.pricing.in-view .fam-faces img:nth-child(2){transition-delay:.08s}.pricing.in-view .fam-faces img:nth-child(3){transition-delay:.16s}.pricing.in-view .fam-faces img:nth-child(4){transition-delay:.24s}.pricing.in-view .fam-faces img:nth-child(5){transition-delay:.32s}
@media (min-width:700px){.plans{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.plans{grid-template-columns:1fr 1.1fr 1.1fr 1fr}}

/* Fiş yükleme */
.receipt-art{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;padding:28px 20px 30px;border-radius:36px;background:var(--peach)}
.receipt{position:relative;padding:16px 14px 22px;background:#FFFDF8;color:#2A1D16;font-family:ui-monospace,'Courier New',monospace;font-size:13px;box-shadow:0 6px 0 #0002;transform-origin:top;clip-path:inset(0 0 calc(100% - var(--roll,0%)) 0);--zig:linear-gradient(-45deg,transparent 8px,#FFFDF8 0) 0 100%/16px 16px repeat-x,linear-gradient(45deg,transparent 8px,#FFFDF8 0) 0 100%/16px 16px repeat-x}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(-45deg,transparent 6px,#FFFDF8 0) 0 0/12px 8px repeat-x,linear-gradient(45deg,transparent 6px,#FFFDF8 0) 0 0/12px 8px repeat-x}
.r-head{text-align:center;font-weight:900;letter-spacing:.1em}
.r-date{text-align:center;font-size:11px;opacity:.7;margin-bottom:8px}
.r-lines{border-top:2px dashed #2A1D1655;border-bottom:2px dashed #2A1D1655;padding:6px 0}
.r-lines li{display:flex;justify-content:space-between;gap:8px;padding:3px 4px;border-radius:4px;transition:background .3s}
.r-lines li small{opacity:.6}
.r-lines li.read{background:#2F7D4522}
.r-lines li.read b::after{content:" ✓";color:#2F7D45}
.r-total{display:flex;justify-content:space-between;font-weight:900;margin-top:6px}
.r-scan{position:absolute;left:6px;right:6px;height:3px;border-radius:3px;background:var(--tomato);box-shadow:0 0 0 4px #C2410C33;top:var(--scan,0%);opacity:var(--scan-o,0)}
.pricebook{background:var(--card);border:2px solid var(--line);border-radius:20px;padding:14px;display:grid;gap:8px}
.pb-head{font-weight:900;display:flex;justify-content:space-between;align-items:baseline}
.pb-head small{color:var(--pepper);font-size:12px}
.pricebook ul{display:grid;gap:6px}
.pricebook li{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;font-weight:800;font-size:14px;opacity:0;transform:translateX(-24px) scale(.9);transition:opacity .3s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.pricebook li.on{opacity:1;transform:none}
.pricebook li img{width:28px;height:28px}
.pricebook li em{grid-column:2/4;font-style:normal;font-size:11px;color:var(--pepper);margin-top:-4px}
.pb-thanks{font-size:13px;font-weight:900;color:var(--pepper);opacity:0;transition:opacity .3s}
.pricebook.done .pb-thanks{opacity:1}
.receipt-mascot{position:absolute;width:100px;right:-6px;bottom:-30px}
@media (max-width:560px){.receipt-art{grid-template-columns:1fr}}

/* Etkileşimler */
button.store,button.pill,button.allergen,.plan-pick,.pack-pick{font-family:var(--font);cursor:pointer}
button.store{border-top:0;border-left:0;border-right:0;text-align:left}
button.store:hover{transform:translateY(-2px)}
button.store:active{transform:translateY(3px);border-bottom-width:2px}
button.pill{color:var(--ink);font-size:15px}
button.pill.on{color:var(--pepper)}
.allergens li{text-decoration:none;padding:0;border:0;background:none}
button.allergen{padding:6px 12px;border-radius:999px;background:var(--card);border:2px solid var(--line);font-weight:800;font-size:14px;color:var(--ink)}
button.allergen.on{text-decoration:line-through;text-decoration-color:var(--tomato);text-decoration-thickness:3px;border-color:var(--tomato)}
.pop-btn{animation:popBtn .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes popBtn{40%{transform:scale(1.08)}}
.nudge-btn{animation:nudge .5s ease}
.spin-card{animation:spinCard .8s cubic-bezier(.3,1.3,.5,1)}
@keyframes spinCard{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
.wiggle{animation:wiggleT .7s ease}
@keyframes wiggleT{20%{transform:rotate(-5deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(2deg)}}
.big-tree,.ftree,.share-card,.ruby-count,.album li,.ex,.friend,.flood-grid img,.list li{cursor:pointer}
.face-spin{animation:faceSpin .6s cubic-bezier(.3,1.5,.5,1)!important}
@keyframes faceSpin{0%{transform:translate(var(--jx),var(--jy)) scale(var(--sc)) rotate(0)}50%{transform:translate(var(--jx),calc(var(--jy) - 20px)) scale(1.4) rotate(180deg)}100%{transform:translate(var(--jx),var(--jy)) scale(var(--sc)) rotate(360deg)}}
.flood-grid img.face-spin{z-index:20!important}
.flood-grid{pointer-events:auto}
.plan-pick{margin-top:12px;justify-self:start;padding:10px 16px;border-radius:14px;border:2px solid var(--ink);border-bottom-width:4px;background:var(--card);color:var(--ink);font-weight:900;font-size:15px}
.plan-pick:active{transform:translateY(2px);border-bottom-width:2px}
.plan.picked{outline:4px solid var(--pepper);outline-offset:4px}
.plan.picked .plan-pick{background:var(--pepper);color:var(--paper);border-color:var(--pepper)}
.plan.picked .plan-pick::before{content:"✓ "}
.pack-pick{display:block;margin-bottom:10px;padding:8px 14px;border-radius:12px;border:2px solid var(--ink);border-bottom-width:4px;background:var(--card);color:var(--ink);font-weight:900;font-size:14px}
.pack.chosen{outline:4px solid var(--eggplant);outline-offset:3px}
.chat-input{display:flex;gap:8px;margin-top:4px}
.chat-input input{flex:1;min-width:0;min-height:46px;padding:0 16px;border-radius:16px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:700 15px var(--font)}
.chat-input input:focus{outline:3px solid var(--eggplant);outline-offset:1px}
.chat-input button{width:52px;border-radius:16px;border:0;background:var(--eggplant);color:#FFF;font-size:18px;cursor:pointer}
.chat-input button:active{transform:scale(.94)}
.chat.ended .chips,.chat.ended .chat-input{display:none}
.chat-end{justify-self:center;margin-top:6px;padding:8px 16px;border-radius:999px;background:var(--card);border:2px dashed var(--eggplant);color:var(--eggplant);font-weight:900;font-size:14px;opacity:0;transform:scale(.8);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.chat-end.on{opacity:1;transform:none}
.toast{position:fixed;left:50%;bottom:22px;z-index:80;max-width:min(92vw,520px);padding:12px 18px;border-radius:16px;background:var(--ink);color:var(--paper);font-weight:800;text-align:center;box-shadow:0 6px 0 #0004;transform:translate(-50%,140%);opacity:0;transition:transform .4s cubic-bezier(.3,1.4,.5,1),opacity .3s;pointer-events:none}
.toast.show{transform:translate(-50%,0);opacity:1}
.list li:hover{color:var(--ink)}

/* SSS */
.faq{padding:72px 0 40px;max-width:780px}
.faq h2{margin-bottom:22px}
.faq details{border:2px solid var(--line);border-radius:20px;background:var(--card);margin-bottom:10px}
.faq summary{cursor:pointer;padding:18px 20px;font-weight:900;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;line-height:1;color:var(--tomato);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 20px 18px;color:var(--muted)}

/* Kapanış */
.finale{padding:96px 0 72px;text-align:center;display:grid;justify-items:center;gap:6px}
.trio{display:flex;justify-content:center;align-items:end;margin-bottom:8px}
.trio .mascot{width:min(28vw,170px)}
.trio .mascot:nth-child(2){margin-inline:-10px}
.trio.jumping .mascot img{animation:trioJump 1.1s cubic-bezier(.3,.7,.4,1) infinite;transform-origin:50% 92%}
.trio.jumping .mascot:nth-child(2) img{animation-delay:.18s}
.trio.jumping .mascot:nth-child(3) img{animation-delay:.36s}
.trio.jumping .mascot::after{animation:trioShadow 1.1s cubic-bezier(.3,.7,.4,1) infinite}
.trio.jumping .mascot:nth-child(2)::after{animation-delay:.18s}
.trio.jumping .mascot:nth-child(3)::after{animation-delay:.36s}
@keyframes trioJump{0%,100%{transform:translateY(0) scale(1.08,.92)}12%{transform:translateY(0) scale(1,1)}45%{transform:translateY(-34%) scale(.95,1.06)}75%{transform:translateY(0) scale(1.06,.94)}88%{transform:translateY(0) scale(1,1)}}
@keyframes trioShadow{0%,12%,75%,100%{transform:scale(1);opacity:.12}45%{transform:scale(.55);opacity:.05}}
.finale .stores{justify-content:center;margin-top:22px}

/* Kapanış imzası: Patlıcan çay içiyor (çizim ve döngü tea.css'te) */
.made{display:grid;justify-items:center;gap:8px;padding:24px 16px 32px;text-align:center}
.made p{font-weight:900;font-size:18px}

.foot{border-top:2px solid var(--line);padding:24px 0 40px;font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between}
.foot strong{color:var(--ink);font-weight:900}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-hop]{opacity:1;transform:none}
  .warn{opacity:1;transform:none}
  .money,.flood{height:auto}
  .money-stage,.flood-stage{position:relative;height:auto;min-height:100vh}
  .album img,.costume,.share-card{opacity:1!important;filter:none!important;transform:none!important}
  .pricebook li,.pb-thanks{opacity:1;transform:none}
  .receipt{clip-path:none}
  .msg,.chips button,.fam-faces img{opacity:1;transform:none}
  .rescues li,.flood-grid img,.ingredients li,.verdict,.compare-mascot{opacity:1;transform:none}
  }