/* My Choice Coffee örnek sitesi. Krem zemin, espresso mürekkep, krema vurgusu; matcha yalnız kendi bölümünde. */
:root{
  --cream:#F2EADF;
  --paper:#FBF7F0;
  --ink:#20150D;
  --ink-2:#4B3424;
  --muted:#6E5A49;
  --roast:#5A361E;
  --crema:#B8692F;
  --crema-hi:#D99355;
  --matcha-deep:#2E4A1E;
  --matcha-pale:#E2E7CC;
  --on-dark:#CDBBA6;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --soft:"Fraunces",Georgia,serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --hfs:clamp(64px,11.5vw,210px);
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;background:var(--cream);color:var(--ink);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;overflow-x:clip;font-family:var(--display);font-optical-sizing:auto;font-size:17px;line-height:1.55;transition:opacity .9s var(--ease)}
html.js body:not(.ready){opacity:0}
img,svg{display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{font-weight:800}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.defs{position:absolute;overflow:hidden}
.skip{position:fixed;left:12px;top:-64px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:999px;text-decoration:none;transition:top .3s var(--ease)}
.skip:focus{top:12px}
.progress{position:fixed;inset:0 0 auto;z-index:50;height:3px;pointer-events:none;background:linear-gradient(90deg,var(--roast),var(--crema));box-shadow:0 0 10px rgba(184,105,47,.45);transform:scaleX(0);transform-origin:0 50%;will-change:transform}
:focus-visible{outline:2px solid var(--crema);outline-offset:3px;border-radius:8px}
main:focus{outline:none}
.mono{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.sl{color:var(--crema);font-weight:400;margin:0 .06em}

/* Tek ortam: sayfanın arkasında çok yavaş kayan sıcak ışıklar ve gren */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.env i{position:absolute;width:70vmax;height:70vmax;border-radius:50%;opacity:.55;will-change:transform}
.env .g1{left:-24vmax;top:-26vmax;background:radial-gradient(circle,#EBCDA8 0,rgba(235,205,168,0) 62%);animation:drift1 84s ease-in-out -12s infinite alternate}
.env .g2{right:-28vmax;top:24vh;background:radial-gradient(circle,#E3D3BC 0,rgba(227,211,188,0) 62%);animation:drift2 96s ease-in-out -30s infinite alternate}
.env .g3{left:18vw;bottom:-36vmax;background:radial-gradient(circle,#EED9C2 0,rgba(238,217,194,0) 62%);animation:drift1 112s ease-in-out -50s infinite alternate-reverse}
@keyframes drift1{to{transform:translate3d(18vw,14vh,0) scale(1.15)}}
@keyframes drift2{to{transform:translate3d(-16vw,-12vh,0) scale(.9)}}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Üst çubuk */
.nav{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;gap:24px;padding:18px var(--gutter);transition:background-color .45s var(--ease),box-shadow .45s var(--ease),padding .45s var(--ease)}
.nav.is-scrolled{background:rgba(242,234,223,.84);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 rgba(32,21,13,.08);padding-block:12px}
.brand{display:inline-flex;align-items:baseline;text-decoration:none;font-weight:800;font-stretch:80%;font-size:21px;letter-spacing:.01em}
.nav nav{margin:0 auto}
.nav-links{display:flex;gap:clamp(14px,2.2vw,32px);list-style:none;margin:0;padding:0}
.nav-links a{position:relative;display:inline-block;padding:8px 0;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink-2)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:46px;padding:0 22px;border-radius:999px;border:1.5px solid var(--ink);font-weight:600;font-size:15px;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .35s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:var(--roast);border-color:var(--roast)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.nav .btn{min-height:42px;padding:0 18px;font-size:14px}
@media (max-width:900px){.nav nav{display:none}.nav .btn{margin-left:auto}}

/* Bölüm etiketi: "01 / ÇEKİRDEK UYANSIN" */
.kicker{display:flex;align-items:center;gap:.7em;margin:0 0 .5em;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.kicker .kn{display:inline-grid;place-items:center;min-width:2.6em;height:2em;padding:0 .6em;border:1px solid currentColor;border-radius:999px}
.hk{transition:opacity .35s var(--ease)}
.hk.is-swap{opacity:0}

/* 01 · Hero */
.hero{position:relative;isolation:isolate;height:100svh;min-height:620px;overflow:hidden;overflow:clip}
.hero::before{content:"";position:absolute;inset:0;z-index:0;background-color:var(--tint,rgba(0,0,0,0));-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent);transition:background-color 1.4s var(--ease)}
.hero[data-slide="1"]{--tint:rgba(188,206,146,.32)}
.hero[data-slide="2"]{--tint:rgba(186,210,218,.38)}
.pc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pc-back{z-index:2}
.pc-front{z-index:4}
.hero-inner{position:relative;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:clamp(94px,13svh,134px) var(--gutter) clamp(18px,3.5svh,36px)}
.hero-title{grid-row:2;grid-column:1;position:relative;z-index:1;margin:0;display:flex;flex-direction:column;justify-content:space-between;font-size:var(--hfs);line-height:.86}
.hero-stage{grid-row:2;grid-column:1;position:relative;pointer-events:none}
.ht{display:block;overflow:hidden;padding:.16em .05em;margin:-.16em -.05em;font-weight:800;font-stretch:75%;letter-spacing:-.02em;white-space:nowrap;will-change:transform}
.ht-a{align-self:flex-start}
.ht-b{align-self:flex-end}
.ht .line{display:inline-block}
.ht .c{display:inline-block;transition:transform .75s var(--ease) calc(var(--i)*28ms),opacity .5s var(--ease) calc(var(--i)*28ms)}
.ht.is-out .c{transform:translateY(-108%);opacity:0;transition-duration:.42s,.3s;transition-delay:calc(var(--i)*18ms)}
.ht.is-pre .c{transform:translateY(108%);opacity:0;transition:none}
.ghost{position:absolute;z-index:-1;top:0;right:calc(var(--gutter)*-1 - .9em);font-weight:800;font-stretch:75%;letter-spacing:-.02em;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px rgba(32,21,13,.17);transition:opacity .5s var(--ease),transform .9s var(--ease)}
.ghost.is-swap{opacity:0;transform:translateX(6%)}
.hero-object{position:absolute;left:50%;top:50%;z-index:3;height:min(66%,44vw);aspect-ratio:1;translate:-50% -50%;will-change:transform}
.obj{position:absolute;inset:0;opacity:0;transform:scale(.55) rotate(-30deg);transition:transform 1.05s var(--ease),opacity .6s var(--ease)}
.obj.is-on{opacity:1;transform:none}
.obj.is-off{opacity:0;transform:scale(1.32) rotate(26deg);transition-duration:.6s,.42s}
.float{position:absolute;inset:0;animation:float 7.5s ease-in-out -2.4s infinite}
@keyframes float{50%{transform:translateY(-3.5%) rotate(2.5deg)}}
.bean,.leaf,.iced{position:absolute}
.bean{filter:drop-shadow(0 28px 36px rgba(50,25,10,.34))}
.bean-1{width:44%;left:12%;top:4%;transform:rotate(-26deg)}
.bean-2{width:39%;right:11%;bottom:6%;transform:rotate(34deg)}
.leaf{filter:drop-shadow(0 26px 34px rgba(40,70,20,.28))}
.leaf-1{width:42%;left:20%;top:2%;transform:rotate(-28deg)}
.leaf-2{width:33%;right:14%;bottom:4%;transform:rotate(42deg)}
.iced{width:58%;left:21%;top:2%;height:auto;filter:drop-shadow(0 28px 34px rgba(30,50,60,.26))}
.hero-foot{position:relative;z-index:5;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:16px;padding-top:14px}
.hero-sub{max-width:34ch;margin:0 0 14px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px}
.slider-ctl{display:flex;align-items:center;gap:10px}
.arrow,.pause{display:grid;place-items:center;width:46px;height:46px;padding:0;border-radius:50%;border:1.5px solid rgba(32,21,13,.3);background:rgba(251,247,240,.35);cursor:pointer;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.pause{width:38px;height:38px;margin-left:4px}
.arrow:hover,.pause:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pause .ic-play,.pause[aria-pressed="true"] .ic-pause{display:none}
.pause[aria-pressed="true"] .ic-play{display:block}
.dots{display:flex}
.dot{display:grid;place-items:center;width:30px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.dot::before{content:"";width:8px;height:8px;border-radius:99px;background:rgba(32,21,13,.26);transition:width .55s var(--ease),background-color .55s var(--ease)}
.dot[aria-current="true"]{width:42px}
.dot[aria-current="true"]::before{width:28px;background:var(--ink)}
.down{justify-self:end;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--ink);color:var(--paper);transition:transform .4s var(--ease)}
.down:hover{transform:translateY(3px)}
.down svg{animation:bob 2.6s ease-in-out -1s infinite}
@keyframes bob{50%{transform:translateY(4px)}}
@media (max-width:900px){.ghost{display:none}}
@media (max-width:720px){
  :root{--hfs:17.6vw}
  .hero{min-height:560px}
  .hero-inner{padding-top:86px}
  .hero-object{height:min(70%,76vw)}
  .hero-foot{grid-template-columns:1fr;gap:12px}
  .hero-sub{margin-bottom:12px;font-size:14px}
  .slider-ctl{justify-self:start}
  .down{display:none}
}
@media (max-height:640px) and (min-width:721px){.hero-sub{display:none}}

/* 02 · Fincanda lale (kaydırmayla sahne) */
.pour{position:relative;height:420vh}
.pour-stage{position:sticky;top:0;height:100svh;overflow:hidden;overflow:clip}
.pour-copy{position:absolute;z-index:4;left:var(--gutter);top:clamp(96px,14svh,140px);width:min(40vw,440px)}
.beats{position:relative;list-style:none;margin:22px 0 0;padding:0;min-height:150px}
.beat{position:absolute;top:0;left:0;right:0;opacity:0;will-change:transform,opacity}
.beat .bn{display:block;margin-bottom:8px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--crema)}
.beat strong{display:block;margin-bottom:6px;font-family:var(--soft);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:700;font-size:clamp(28px,2.8vw,44px);line-height:1.04;color:var(--roast)}
.beat span:last-child{display:block;font-size:17px;color:var(--ink-2)}
.bloom{position:absolute;z-index:1;left:var(--gutter);bottom:clamp(14px,5svh,56px);margin:0;font-family:var(--soft);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:900;font-size:clamp(80px,13vw,260px);line-height:.84;letter-spacing:-.035em;color:var(--roast)}
.bloom .line{display:block;white-space:nowrap}
.bloom .c{display:inline-block;--kc:clamp(0,calc((var(--k,0) - var(--th,0)) * 2.4),1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * .42em)) scale(calc(.55 + .45 * var(--kc)));transform-origin:50% 100%}
.cup{position:absolute;z-index:3;right:clamp(0px,2vw,40px);bottom:-2svh;height:min(90svh,54vw);width:auto;overflow:visible;transform-origin:50% 92%;will-change:transform}
.cup .milk{fill:#F8EFE1;stroke:#9C5F2E;stroke-opacity:.55;stroke-width:2.2}
.cup .stem{fill:none;stroke:#9C5F2E;stroke-opacity:.8;stroke-width:2.6;stroke-linecap:round}
.cup .stream{fill:#3A1F10;transition:fill .25s linear}
.cup.is-milk .stream{fill:#F5EBDC}
.cup .ripple{fill:none;stroke:#FFF7EA;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.cup.is-pouring .ripple{animation:ripple 1.1s ease-out infinite}
@keyframes ripple{from{transform:scale(.5);opacity:.85}to{transform:scale(3);opacity:0}}
.steam{fill:none;stroke:#7A5A44;stroke-opacity:.32;stroke-width:7;stroke-linecap:round}
.steam path{transform-box:fill-box;animation:steam 4.4s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:-1.5s}
.steam path:nth-child(3){animation-delay:-2.9s}
@keyframes steam{0%{transform:translateY(18px);opacity:0}40%{opacity:1}100%{transform:translateY(-28px);opacity:0}}
.pour:not(.live) .steam path,.pour:not(.live) .ripple{animation-play-state:paused}
@media (max-width:720px){
  .pour{height:360vh}
  .pour-copy{top:84px;width:auto;right:var(--gutter)}
  .beats{min-height:110px;margin-top:14px}
  .beat strong{font-size:26px}
  .beat span:last-child{font-size:15px}
  .cup{right:auto;left:50%;translate:-50% 0;bottom:auto;top:26svh;height:min(46svh,96vw);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%);mask-image:linear-gradient(180deg,transparent 0,#000 14%)}
  .bloom{font-size:23vw;bottom:3svh}
}

/* 03 · Matcha */
.matcha{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);align-items:center;gap:clamp(28px,5vw,88px);padding:clamp(110px,17vh,190px) var(--gutter);background:linear-gradient(180deg,rgba(226,231,204,0) 0,var(--matcha-pale) 16%,var(--matcha-pale) 84%,rgba(226,231,204,0) 100%)}
.matcha .kicker{color:var(--matcha-deep)}
.big{margin:.12em 0 .32em;font-weight:800;font-stretch:75%;font-size:clamp(50px,7.4vw,128px);line-height:.88;letter-spacing:-.02em}
.matcha .big{color:var(--matcha-deep)}
.lede{max-width:38ch;margin:0;font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--ink-2)}
.glasses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:clamp(12px,2.6vw,40px)}
.glass{margin:0;text-align:center}
.glass:nth-child(2){transform:translateY(-9%)}
.glass:nth-child(3){transform:translateY(-18%)}
.glass svg{width:100%;max-width:220px;height:auto;margin:0 auto 18px;overflow:visible;filter:drop-shadow(0 26px 30px rgba(46,74,30,.18))}
.glass figcaption strong{display:block;font-family:var(--soft);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:700;font-size:clamp(20px,1.8vw,27px);line-height:1.1;color:var(--matcha-deep)}
.glass figcaption span{display:block;margin-top:4px;font-size:15px;color:var(--ink-2)}
.lay{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}
.ice-c{opacity:0}
.ice-c rect{fill:#FFFFFF;fill-opacity:.55;stroke:#FFFFFF;stroke-width:1.6}
.glass-shape{fill:#FFFFFF;fill-opacity:.2;stroke:#20150D;stroke-opacity:.28;stroke-width:2.2}
.glass-rim{fill:none;stroke:#20150D;stroke-opacity:.24;stroke-width:1.8}
.glass-hl{fill:none;stroke:#FFFFFF;stroke-opacity:.75;stroke-width:4;stroke-linecap:round}
@media (max-width:900px){
  .matcha{grid-template-columns:1fr}
  .glasses{gap:10px}
  .glass:nth-child(n){transform:none}
  .glass figcaption span{font-size:13px}
}

/* 04 · Seçim senin */
.choice{padding:clamp(110px,16vh,180px) var(--gutter);text-align:center}
.choice .kicker{justify-content:center}
.choice-title{margin:.12em 0 .55em;font-weight:800;font-stretch:75%;font-size:clamp(58px,10.4vw,178px);line-height:.86;letter-spacing:-.02em}
.soft{font-family:var(--soft);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:700;font-stretch:100%;letter-spacing:-.015em}
.choice-title .soft{display:block;margin-top:.12em;font-size:.56em;line-height:1;color:var(--crema)}
.picker{max-width:900px;margin:0 auto;padding:clamp(24px,4vw,46px);border-radius:32px;background:var(--paper);box-shadow:0 1px 0 rgba(32,21,13,.06),0 34px 70px -34px rgba(60,35,20,.3)}
.picker-q{margin:0 0 20px;font-family:var(--soft);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:700;font-size:clamp(25px,2.5vw,36px);line-height:1.15}
.moods{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.mood{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 22px 0 16px;border-radius:999px;border:1.5px solid rgba(32,21,13,.24);background:transparent;font-weight:600;font-size:16px;cursor:pointer;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.mood svg{width:22px;height:22px;flex:none}
.mood:hover{border-color:var(--ink)}
.mood:active{transform:scale(.97)}
.mood[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pick{display:grid;justify-items:center;gap:8px;min-height:176px;margin-top:28px;padding-top:26px;border-top:1px dashed rgba(32,21,13,.22)}
.pick-k{color:var(--crema)}
.pick-name{font-weight:800;font-stretch:75%;font-size:clamp(40px,6.2vw,88px);line-height:.95;letter-spacing:-.01em}
.pick-why{font-size:17px;color:var(--ink-2)}
.pick-again{margin-top:4px;min-height:44px;padding:0 6px;border:0;background:none;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:underline;text-underline-offset:5px;cursor:pointer;color:var(--ink-2)}
.pick-again:hover{color:var(--ink)}
.menu{max-width:1000px;margin:clamp(64px,10vh,110px) auto 0;text-align:left}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:26px}
.tab{min-height:46px;padding:0 22px;border-radius:999px;border:1.5px solid transparent;background:transparent;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);cursor:pointer;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.tab:hover{border-color:rgba(32,21,13,.24)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.panel ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 52px;margin:0;padding:0;list-style:none}
.item{padding:18px 0;border-bottom:1px solid rgba(32,21,13,.13)}
.item h3{margin:0 0 4px;font-weight:700;font-size:20px;line-height:1.25}
.item p{margin:0;font-size:15px;color:var(--muted)}
.panel.show .item{animation:itemIn .6s var(--ease) both}
.panel.show .item:nth-child(2){animation-delay:.05s}
.panel.show .item:nth-child(3){animation-delay:.1s}
.panel.show .item:nth-child(4){animation-delay:.15s}
.panel.show .item:nth-child(5){animation-delay:.2s}
.panel.show .item:nth-child(6){animation-delay:.25s}
.panel.show .item:nth-child(7){animation-delay:.3s}
.panel.show .item:nth-child(8){animation-delay:.35s}
.panel.show .item:nth-child(n+9){animation-delay:.4s}
@keyframes itemIn{from{opacity:0;transform:translateY(12px)}}
.panel:focus-visible{outline-offset:8px}
.menu-note{margin:26px 0 0;text-align:center;font-size:15px;color:var(--muted)}
@media (max-width:720px){.panel ul{grid-template-columns:1fr}.mood{font-size:15px;padding:0 18px 0 14px}}

/* 05 · Kahve kartı */
.card-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(36px,6vw,100px);padding:clamp(100px,14vh,160px) var(--gutter)}
.punch-wrap{justify-self:center;width:100%;max-width:560px}
.punch{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:18px;aspect-ratio:1.55;padding:clamp(20px,3vw,34px);border-radius:26px;background:linear-gradient(135deg,#FFFDF9,#F2E7D8);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 40px 70px -36px rgba(60,35,20,.45);transform:rotate(-4deg);transition:transform .8s var(--ease)}
.punch:hover{transform:rotate(-1.5deg) translateY(-4px)}
.punch-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.punch-brand{font-weight:800;font-stretch:80%;font-size:22px}
.punch-head .mono{color:var(--muted)}
.stamps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.4vw,16px);margin:0;padding:0;list-style:none}
.stamp{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:50%;border:1.5px dashed rgba(32,21,13,.3)}
.stamp svg{width:56%;height:56%;color:var(--roast);opacity:0;transform:scale(1.9) rotate(-24deg);transition:opacity .2s linear,transform .55s cubic-bezier(.3,1.7,.5,1)}
.punch-wrap.in .stamp svg{opacity:1;transform:rotate(var(--r,-8deg));transition-delay:calc(var(--i)*170ms + 300ms)}
.stamp-free{border:0;background:var(--ink);color:var(--crema-hi);font-family:var(--mono);font-size:clamp(9px,1vw,12px);font-weight:500;line-height:1.15;letter-spacing:.06em;text-align:center;transform:scale(.6);opacity:0;transition:transform .6s cubic-bezier(.3,1.6,.5,1),opacity .3s linear}
.punch-wrap.in .stamp-free{transform:none;opacity:1;transition-delay:1.45s}
.stamp-free::after{content:"";position:absolute;inset:-6px;border-radius:50%;box-shadow:0 0 0 2px rgba(217,147,85,.55),0 0 26px rgba(217,147,85,.55);opacity:0;animation:glow 4.2s ease-in-out -1.2s infinite}
@keyframes glow{50%{opacity:1}}
.punch-foot{margin:0;color:var(--muted)}
.accent{color:var(--crema)}
.card-copy .big{font-size:clamp(50px,6.6vw,116px)}
@media (max-width:900px){.card-sec{grid-template-columns:1fr}.punch-wrap{max-width:460px}}

/* 06 · Yeni konsept */
.story{position:relative;padding:clamp(100px,14vh,160px) 0 clamp(70px,10vh,110px)}
.story-head,.story-grid{padding:0 var(--gutter)}
.story-title{max-width:11ch;margin:.12em 0 0;font-weight:800;font-stretch:75%;font-size:clamp(54px,8.6vw,150px);line-height:.88;letter-spacing:-.02em}
.story-title .soft{color:var(--crema);font-weight:800}
.squiggle{position:absolute;right:var(--gutter);top:clamp(110px,16vh,180px);width:clamp(130px,19vw,280px);height:auto;fill:none;stroke:var(--crema);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:end;gap:clamp(28px,5vw,80px);margin-top:clamp(40px,7vh,80px)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0}
.stat{padding-top:18px;border-top:1.5px solid var(--ink)}
.stat dt{color:var(--muted)}
.stat dd{margin:8px 0 4px;font-weight:800;font-stretch:75%;font-size:clamp(46px,5.6vw,92px);line-height:.92;font-variant-numeric:tabular-nums}
.stat dd small{font-size:.38em;font-weight:600;color:var(--muted)}
.stat .dash{color:var(--crema);margin:0 .02em}
.stat p{margin:0;font-size:14px;color:var(--muted)}
.marquee{margin-top:clamp(64px,10vh,110px);padding:20px 0;overflow:hidden;white-space:nowrap;border-block:1.5px solid var(--ink)}
.marquee-track{display:inline-flex;animation:marq 46s linear infinite}
.marquee:not(.live) .marquee-track{animation-play-state:paused}
.marquee ul{display:inline-flex;margin:0;padding:0;list-style:none}
.marquee li{display:inline-flex;align-items:center;gap:.7em;padding-right:.7em;font-family:var(--soft);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:700;font-size:clamp(26px,3.2vw,46px);line-height:1.1}
.marquee li::after{content:"";width:.36em;height:.52em;border-radius:50%;background:var(--crema);transform:rotate(28deg)}
@keyframes marq{to{transform:translateX(-50%)}}
@media (max-width:900px){.story-grid{grid-template-columns:1fr}.squiggle{display:none}}
@media (max-width:520px){.stats{grid-template-columns:1fr 1fr}.stats .stat:last-child{grid-column:1/-1}}

/* 07 · Ziyaret (koyu) */
.visit{position:relative;overflow:hidden;overflow:clip;padding:clamp(100px,14vh,170px) var(--gutter) clamp(64px,9vh,100px);border-radius:clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0 0;background:var(--ink);color:var(--paper)}
.visit .kicker{color:var(--on-dark)}
.visit-title{margin:.1em 0 .45em;font-weight:800;font-stretch:75%;font-size:clamp(66px,12.4vw,216px);line-height:.85;letter-spacing:-.02em}
.visit-title .sl{color:var(--crema-hi);margin:0}
.route{position:absolute;right:var(--gutter);top:clamp(70px,10vh,120px);width:clamp(220px,36vw,520px);height:auto;overflow:visible}
.route-line{fill:none;stroke:var(--crema-hi);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.route-pin circle{fill:var(--crema-hi);opacity:0;transition:opacity .5s var(--ease)}
.route-pin .pin-dot{fill:var(--ink)}
.route.done .route-pin circle{opacity:1}
.visit-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:16px}
.vc{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:26px;border-radius:24px;background:rgba(251,247,240,.06);border:1px solid rgba(251,247,240,.14)}
.vc .mono{color:var(--on-dark)}
.vc p{margin:0;font-size:clamp(19px,1.6vw,23px);line-height:1.4}
.vc a{text-decoration-thickness:1px;text-underline-offset:5px}
.vc a:hover{color:var(--crema-hi)}
.btn-accent{margin-top:auto;background:var(--crema-hi);border-color:var(--crema-hi);color:var(--ink)}
.btn-accent:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.vc .btn-accent:hover{color:var(--ink)}
.vc .now{display:inline-flex;align-items:center;gap:9px;margin-top:auto;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark)}
.now::before{content:"";width:9px;height:9px;border-radius:50%;background:#86C46F;animation:ping 2.6s ease-out infinite}
.now.is-closed::before{background:#D98A6E;animation:none}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(134,196,111,.55)}80%,100%{box-shadow:0 0 0 10px rgba(134,196,111,0)}}
@media (max-width:900px){.visit-grid{grid-template-columns:1fr}.route{opacity:.5;width:60vw}}

.foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 28px;padding:26px var(--gutter) 34px;background:var(--ink);color:var(--on-dark);border-top:1px solid rgba(251,247,240,.12);font-size:14px}
.foot-brand{font-weight:800;font-stretch:80%;font-size:19px;color:var(--paper)}
.foot-brand small{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;color:var(--on-dark);margin-left:.4em}
.demo-note a{color:var(--paper)}

/* Girişler */
html.js [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .95s var(--ease),transform 1.05s var(--ease)}
html.js [data-reveal].in{opacity:1;transform:none}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

@media (pointer:coarse){.nav-links a,.tab,.mood{min-height:44px}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  html.js [data-reveal]{opacity:1;transform:none}
  .pour{height:auto}
  .pour-stage{position:relative;height:auto;min-height:100svh;padding-bottom:40svh}
  .beats{min-height:0}
  .beat{position:relative;opacity:1!important;transform:none!important;margin-bottom:18px}
  .bloom .c{opacity:1;transform:none}
  .stamp svg{opacity:1;transform:rotate(var(--r,-8deg))}
  .stamp-free{opacity:1;transform:none}
  .squiggle,.route-line{stroke-dashoffset:0}
  .route-pin circle{opacity:1}
}