@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{
  --bg:#0a0908;--bg2:#12100e;--bg3:#1a1714;
  --ink:#f4ede3;--mute:#a39a8f;--dim:#6d655c;
  --gold:#e8c39a;--gold2:#b98a5a;--rose:#e45d7b;
  --line:rgba(244,237,227,.09);--line2:rgba(244,237,227,.2);
  --serif:'Fraunces',Georgia,serif;--sans:'Manrope',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--ease2:cubic-bezier(.7,0,.2,1);
  --grad:linear-gradient(100deg,#f6dcb8 0%,#e8c39a 35%,#e45d7b 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
/* Yatay kayma yok: kök öğede de kırpıyoruz, yoksa gövdedeki clip görüntü alanına geçmiyor
   ve telefonda sayfa sağa sola sürükleniyor. */
html{-webkit-text-size-adjust:100%;overflow-x:clip;max-width:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
body.loading{overflow:hidden}
/* geri sayim akici kalsin: film jeneriginde arka plandaki agir katmanlar durur */
body.loading .grain{animation:none;opacity:0}
body.loading canvas{visibility:hidden}
svg,canvas{display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit;background:none;border:0;outline:0}
button{cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--rose);color:#fff}
svg use{stroke:currentColor}
.tab svg,.card svg,.chip>svg,.blk svg,.pc-list svg,.gb-list svg,.cmp svg,.arr svg,.pin-lock svg,.pl-play svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.container{width:min(1280px,100% - 64px);margin-inline:auto}
/* sabit menü hedefi örtmesin (JS kapalıyken de doğru hizalansın) */
main>section[id]{scroll-margin-top:118px}
.how,.tpl{scroll-margin-top:0}

/* type */
.display{font-family:var(--serif);font-weight:300;letter-spacing:-.035em;line-height:.95;font-variation-settings:"opsz" 144,"SOFT" 50}
.display em,.title em{font-style:italic;font-weight:300;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:26px}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.7}
.title{font-size:clamp(42px,6.2vw,96px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:72px}
.sec-lead{color:var(--mute);font-size:18px;max-width:430px;line-height:1.65}
.ul{color:var(--gold);border-bottom:1px solid currentColor}

/* chrome */
.grain{position:fixed;inset:-100%;z-index:90;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .9s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:95;background:var(--grad);transform-origin:left;transform:scaleX(0)}
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:99;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--gold)}
.cursor-ring{width:40px;height:40px;margin:-20px 0 0 -20px;border:1px solid rgba(232,195,154,.5);transition:opacity .3s,width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s}
body.cur .cursor-dot,body.cur .cursor-ring{opacity:1}
body.cur-hover .cursor-ring{width:72px;height:72px;margin:-36px 0 0 -36px;background:rgba(232,195,154,.08);border-color:var(--gold)}
@media (hover:none){.cursor-dot,.cursor-ring{display:none}}

/* letterbox */
.letterbox{position:fixed;left:0;right:0;height:12vh;background:#000;z-index:92;pointer-events:none;transition:transform 1.6s var(--ease2) .2s}
.letterbox.top{top:0}.letterbox.bot{bottom:0}
body.loaded .letterbox.top{transform:translateY(-101%)}
body.loaded .letterbox.bot{transform:translateY(101%)}

/* loader: film leader */
#loader{position:fixed;inset:0;z-index:200;background:#070605;display:grid;place-items:center;overflow:hidden;contain:strict;transition:clip-path 1.2s var(--ease2),visibility 0s 1.3s;clip-path:inset(0 0 0 0)}
body.loaded #loader{clip-path:inset(50% 0 50% 0);visibility:hidden}
.leader{position:relative;width:min(56vmin,440px);aspect-ratio:1;display:grid;place-items:center}
.leader::before,.leader::after{content:"";position:absolute;background:rgba(244,237,227,.25)}
.leader::before{left:-40vw;right:-40vw;top:50%;height:1px}
.leader::after{top:-40vh;bottom:-40vh;left:50%;width:1px}
.leader .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(244,237,227,.35)}
.leader .ring.r2{inset:9%;border-color:rgba(244,237,227,.18)}
.leader .sweep{position:absolute;inset:9%;border-radius:50%;background:conic-gradient(from -90deg,rgba(232,195,154,.35) 0deg,rgba(232,195,154,.32) 150deg,transparent 152deg);animation:sweep .62s linear infinite;will-change:transform;transform:translateZ(0)}
@keyframes sweep{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.leader b{position:relative;font-family:var(--serif);font-weight:300;font-size:min(30vmin,240px);line-height:1;color:var(--ink)}
.ld-meta{position:absolute;left:40px;right:40px;bottom:36px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.ld-meta span:first-child{color:var(--gold)}
.ld-title{position:absolute;inset:0;display:grid;place-items:center;background:#070605;opacity:0;transition:opacity .35s}
.ld-title.on{opacity:1}
.ld-title p{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2.4vw,30px);letter-spacing:.02em;color:var(--mute);text-align:center}
.ld-title p em{display:block;font-size:clamp(56px,9vw,130px);color:var(--ink);letter-spacing:-.04em;line-height:1;margin-top:6px}
.ld-title p small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-top:18px}
.ld-title.on em{animation:titleIn .9s var(--ease) both}
@keyframes titleIn{from{opacity:0;letter-spacing:.2em;filter:blur(12px)}to{opacity:1;letter-spacing:-.04em;filter:blur(0)}}

/* reveal */
.js [data-reveal]{opacity:0;transform:translateY(46px);filter:blur(6px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease),filter 1.2s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal].in{opacity:1;transform:none;filter:none}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .12em 0;margin:0 -.08em -.12em 0}
.wi{display:inline-block;transform:translateY(115%) rotate(6deg);transform-origin:0 100%;transition:transform 1.4s var(--ease);transition-delay:calc(var(--i) * 45ms + var(--d,0s))}
.in .wi{transform:none}
.ln{display:block}
[data-split] em{background:none;color:inherit;padding:0}
[data-split] em .wi{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.08em}
.scene{order:-1;color:var(--dim);margin-right:2px}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;height:58px;padding:0 10px 0 28px;border-radius:999px;font-size:15px;font-weight:600;letter-spacing:.01em;overflow:hidden;isolation:isolate;transition:transform .5s var(--ease),border-color .3s,color .4s;white-space:nowrap}
.btn span{position:relative}
.btn:not(:has(.arr)){padding:0 28px}
.btn-sm{height:46px;font-size:14px;padding:0 22px!important}
.btn-primary{background:var(--ink);color:#0a0908}
.btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad);border-radius:inherit;transform:translateY(102%);transition:transform .6s var(--ease2)}
.btn-primary:hover::before{transform:none}
.btn-ghost{border:1px solid var(--line2);color:var(--ink)}
.btn-ghost::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease2)}
.btn-ghost:hover{color:#0a0908}
.btn-ghost:hover::before{transform:scaleX(1);transform-origin:left}
.btn-block{width:100%}
.arr{width:40px;height:40px;border-radius:50%;background:#0a0908;color:var(--ink);display:grid;place-items:center;overflow:hidden;position:relative}
.arr svg{width:18px;height:18px;transition:transform .6s var(--ease)}
.btn:hover .arr svg{animation:arrow .7s var(--ease)}
@keyframes arrow{0%{transform:none}49%{transform:translateX(26px)}50%{transform:translateX(-26px)}100%{transform:none}}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding:16px 0;transition:transform .7s var(--ease)}
.nav.hide{transform:translateY(-120%)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:68px;padding:0 10px 0 24px;border-radius:999px;border:1px solid transparent;transition:background .5s,border-color .5s,backdrop-filter .5s}
.nav.scrolled .nav-in{background:rgba(16,14,12,.55);border-color:var(--line);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:25px;font-weight:400;letter-spacing:-.02em}
.logo svg{width:28px;height:28px;fill:none;stroke:var(--gold);stroke-width:1.6}
.logo svg circle{fill:var(--gold);stroke:none;animation:beat 1.6s ease-in-out infinite;transform-origin:16px 14px}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.5)}30%{transform:scale(1)}45%{transform:scale(1.3)}}
.nav-links{display:flex;gap:36px}
.nav-links a{font-size:14px;color:var(--mute);position:relative;transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav-links a:hover,.nav-links a.act{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.act::after{transform:scaleX(1);transform-origin:left}
.nav-cta{display:flex;align-items:center;gap:18px}
.lang{position:relative;display:flex;padding:0;border-radius:999px;border:1px solid var(--line2);font-size:12px;font-weight:700;letter-spacing:.06em}
.lang-btn{display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;border:0;background:none;border-radius:999px;color:var(--mute);cursor:pointer;font:inherit;letter-spacing:.06em;transition:color .3s}
.lang-btn:hover{color:var(--ink)}
.lang svg{width:19px;height:13px;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(244,237,227,.18)}
.lang-arrow{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.65}
.lang-menu{position:absolute;top:calc(100% + 9px);right:0;z-index:80;min-width:178px;padding:6px;border-radius:16px;background:var(--bg2);border:1px solid var(--line2);box-shadow:0 22px 54px rgba(0,0,0,.55)}
.lang-menu button{display:flex;align-items:center;gap:10px;width:100%;height:38px;padding:0 10px;border:0;background:none;border-radius:11px;color:var(--mute);font:600 13.5px var(--sans, Manrope), system-ui, sans-serif;letter-spacing:0;cursor:pointer;text-align:left}
.lang-menu button:hover{background:rgba(244,237,227,.07);color:var(--ink)}
.lang-menu button.on{color:var(--gold)}

/* hero */
.hero{position:relative;min-height:100svh;padding-top:clamp(100px,11vh,116px);display:flex;flex-direction:column;overflow:clip}
.hero>canvas,.final>canvas{position:absolute;inset:0;width:100%;height:100%}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 72% 45%,rgba(228,93,123,.16),transparent 70%),radial-gradient(40% 40% at 15% 90%,rgba(232,195,154,.08),transparent 70%);pointer-events:none}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.hero-beam{position:absolute;top:-20%;left:52%;width:40vw;height:140%;background:linear-gradient(90deg,transparent,rgba(246,220,184,.06),transparent);transform:rotate(18deg);filter:blur(20px);animation:beam 9s ease-in-out infinite;pointer-events:none}
@keyframes beam{0%,100%{opacity:.4;translate:-6vw 0}50%{opacity:1;translate:6vw 0}}
.hero-grid{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
.hero h1{font-size:clamp(54px,min(8.6vw,15vh),138px);margin-bottom:30px}
.hero-sub{font-size:18.5px;color:var(--mute);max-width:500px;margin-bottom:42px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-actions.center{justify-content:center}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:46px;list-style:none}
.hero-trust li{display:flex;align-items:center;gap:8px;color:var(--mute);font-size:14px}
.hero-trust svg{width:18px;height:18px;color:var(--gold);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero-foot{position:relative;z-index:2;display:flex;justify-content:space-between;padding:36px 0 34px;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.scroll-cue{display:flex;align-items:center;gap:14px}
.scroll-cue i{width:1px;height:44px;background:var(--line2);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--gold);animation:cue 2s var(--ease2) infinite}
@keyframes cue{to{top:100%}}

/* phone */
.phone-stage{position:relative;height:700px;display:grid;place-items:center;perspective:1800px}
.halo{position:absolute;width:520px;height:520px;border-radius:50%;background:conic-gradient(from var(--a),rgba(232,195,154,.0),rgba(232,195,154,.35),rgba(228,93,123,.4),rgba(232,195,154,0));filter:blur(70px);animation:spin 10s linear infinite;opacity:.6}
@keyframes spin{to{--a:360deg}}
.phone-float{animation:float 7s ease-in-out infinite;transform-style:preserve-3d}
@keyframes float{0%,100%{transform:translateY(-10px)}50%{transform:translateY(14px)}}
.phone{position:relative;width:314px;height:648px;border-radius:54px;padding:11px;background:linear-gradient(145deg,#2a2521,#0d0b0a 40%,#1d1916);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 70px 140px -40px rgba(228,93,123,.45),0 50px 90px -20px rgba(0,0,0,.8),inset 0 0 0 2px #050404;transform:rotateY(var(--ry,-16deg)) rotateX(var(--rx,7deg)) rotateZ(1deg);transition:transform .9s var(--ease)}
.phone::after{content:"";position:absolute;inset:11px;border-radius:44px;background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,transparent 28%);pointer-events:none;z-index:6}
.screen{position:relative;width:100%;height:100%;border-radius:44px;overflow:hidden;background:#140f0d}
.island{position:absolute;top:11px;left:50%;width:98px;height:29px;margin-left:-49px;border-radius:20px;background:#000;z-index:5}
.chip{position:absolute;z-index:4;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:20px;background:rgba(26,22,19,.62);border:1px solid var(--line2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 20px 50px rgba(0,0,0,.45);font-size:13px;line-height:1.3;animation:bob 6s ease-in-out infinite}
.chip b{display:block;font-weight:600}
.chip small{color:var(--mute);font-size:11.5px}
.chip>svg{width:36px;height:36px;padding:8px;border-radius:12px;background:rgba(228,93,123,.18);color:var(--rose)}
.chip.c1{top:14%;left:-4%}
.chip.c2{top:44%;right:-8%;animation-delay:-2s;padding-left:16px}
.chip.c3{bottom:12%;left:0;animation-delay:-4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.live{width:9px;height:9px;border-radius:50%;background:#6fdc8c;box-shadow:0 0 0 0 rgba(111,220,140,.6);animation:live 1.8s infinite;flex-shrink:0}
@keyframes live{70%{box-shadow:0 0 0 10px rgba(111,220,140,0)}100%{box-shadow:0 0 0 0 rgba(111,220,140,0)}}
.qr-mini{width:64px;height:64px;background:#fff;border-radius:10px;padding:5px;flex-shrink:0}
.qr-mini canvas,.share-qr canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.qr-mini svg,.share-qr svg{width:100%;height:100%}

/* pseudo photos */
.ph{position:relative;overflow:hidden;background:#2a1f1c}
.ph::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(0,0,0,.55));pointer-events:none}
.ph-sunset{background:linear-gradient(180deg,#402a4a 0%,#b9557a 38%,#f19a6f 62%,#f6c98f 74%,#3a2230 75%,#1a1016 100%)}
.ph-sunset .sun{position:absolute;left:50%;top:56%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:radial-gradient(circle,#fff3d6 0%,#ffd39b 40%,rgba(255,180,120,0) 70%);animation:sun 12s ease-in-out infinite alternate}
@keyframes sun{to{transform:translateY(14px) scale(1.08)}}
.ph-sunset .hill{position:absolute;left:-10%;right:-10%;bottom:0;height:34%;background:#1c1117;border-radius:50% 50% 0 0/40% 40% 0 0}
.ph-sunset .duo{position:absolute;left:50%;bottom:30%;width:46px;height:62px;margin-left:-23px;background:radial-gradient(circle at 30% 14%,#120a0e 8px,transparent 9px),radial-gradient(circle at 68% 18%,#120a0e 7.5px,transparent 8.5px),linear-gradient(#120a0e,#120a0e) 4px 16px/19px 50px no-repeat,linear-gradient(#120a0e,#120a0e) 24px 18px/18px 48px no-repeat;border-radius:8px}
.ph-sea{background:linear-gradient(180deg,#9ac0d8 0%,#dfe7e3 42%,#3f7f97 43%,#16384b 100%)}
.ph-sea::before{content:"";position:absolute;left:0;right:0;top:43%;height:30%;background:repeating-linear-gradient(180deg,rgba(255,255,255,.18) 0 1px,transparent 1px 7px);animation:wave 4s linear infinite}
@keyframes wave{to{background-position:0 14px}}
.ph-rose{background:radial-gradient(circle at 35% 40%,#f3a3b4,transparent 30%),radial-gradient(circle at 70% 65%,#c34466,transparent 40%),linear-gradient(135deg,#5a1f33,#e0798f)}
.ph-night{background:radial-gradient(circle at 70% 25%,#f7e3b5 0 3%,transparent 4%),radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 15%,#fff,transparent),radial-gradient(1.5px 1.5px at 85% 60%,#fff,transparent),linear-gradient(180deg,#0e1530,#34305a 70%,#e08a6c 100%)}
.ph-bw{background:radial-gradient(circle at 40% 45%,#d6d2cb,transparent 35%),linear-gradient(160deg,#2a2a2a,#8c8a86 60%,#1b1b1b);filter:grayscale(1)}
.ph-lav{background:radial-gradient(circle at 60% 35%,#f1d9ff,transparent 35%),linear-gradient(170deg,#3a2a52,#b58ed6 60%,#f0c2d8)}

/* gift page inside phone */
.gift{animation:giftScroll 28s cubic-bezier(.65,0,.35,1) infinite alternate}
@keyframes giftScroll{0%,6%{transform:translateY(0)}94%,100%{transform:translateY(calc(-100% + 626px))}}
.g-cover{position:relative;height:430px;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;text-align:center}
.g-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.g-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(20,15,13,.95))}
.g-cover p{position:relative;z-index:2}
.g-kicker{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.g-names{font-family:var(--serif);font-size:44px;font-weight:300;line-height:1;letter-spacing:-.03em;margin:8px 0}
.g-names span{font-style:italic;color:var(--rose)}
.g-since{font-size:11px;color:var(--mute)}
.g-counter{display:grid;grid-template-columns:repeat(4,1fr);margin:6px 16px 0;border:1px solid var(--line);border-radius:18px;padding:12px 0;text-align:center}
.g-counter b{display:block;font-family:var(--serif);font-weight:400;font-size:21px;font-variant-numeric:tabular-nums}
.g-counter small{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.g-sec{padding:26px 22px 4px}
.g-h{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--gold);margin-bottom:8px}
.g-p{font-size:12.5px;color:var(--mute);line-height:1.65}
.g-photos{display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:96px 96px;gap:8px;padding:18px 22px 0}
.g-photos img{width:100%;height:100%;object-fit:cover;border-radius:14px}.g-photos .tall{grid-row:span 2}
.g-time li{position:relative;padding:0 0 12px 22px;font-size:12px;color:var(--mute)}
.g-time li::before{content:"";position:absolute;left:3px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--rose)}
.g-time li::after{content:"";position:absolute;left:6px;top:15px;bottom:0;width:1px;background:var(--line2)}
.g-time b{color:var(--ink);margin-right:8px;font-weight:600}
.g-quote{margin:18px 22px 0;padding:22px;border-radius:18px;background:linear-gradient(135deg,rgba(228,93,123,.16),rgba(232,195,154,.08));font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.3}
.g-song{display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px;background:var(--bg3)}
.g-song b{display:block;font-size:12.5px}.g-song small{font-size:10.5px;color:var(--dim)}
.disc{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle,var(--rose) 0 5px,#111 6px 9px,#222 10px,#0c0c0c 11px,#1d1d1d 14px,#0c0c0c 16px);animation:rot 3s linear infinite;flex-shrink:0}
@keyframes rot{to{transform:rotate(360deg)}}
.eq{display:flex;align-items:flex-end;gap:3px;height:18px;margin-left:auto}
.eq i{width:3px;background:var(--gold);border-radius:2px;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}.eq i:nth-child(4){animation-delay:-.15s}.eq i:nth-child(5){animation-delay:-.45s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
.g-env{display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px 0 10px;font-size:11px;color:var(--mute)}
.mini-env{width:120px;height:78px;border-radius:6px;background:#d9b286;position:relative;overflow:hidden;animation:bob 3s ease-in-out infinite}
.mini-env::before{content:"";position:absolute;left:0;right:0;top:0;height:60%;background:#c49a6c;clip-path:polygon(0 0,100% 0,50% 100%)}
.mini-env i{position:absolute;left:50%;top:44%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--rose)}
.g-end{text-align:center;padding:30px 0 50px;font-family:var(--serif);font-style:italic;font-size:26px}
.g-end i{display:block;font-style:normal;color:var(--rose);font-size:28px;animation:beat 1.4s infinite}

/* marquee */
.marquee{display:flex;overflow:hidden;border-block:1px solid var(--line);padding:28px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;align-items:center;gap:44px;padding-right:44px;flex-shrink:0;animation:marq 42s linear infinite}
.marquee span{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(28px,3.4vw,46px);white-space:nowrap;letter-spacing:-.02em}
.marquee span:nth-of-type(even){color:transparent;-webkit-text-stroke:1px rgba(244,237,227,.45)}
.marquee i{font-style:normal;color:var(--gold);font-size:18px}
@keyframes marq{to{transform:translateX(-100%)}}
.marquee.slim{position:relative;z-index:2;border-top:0;border-bottom:1px solid var(--line);padding:13px 0;margin-bottom:clamp(26px,4vh,54px);background:rgba(10,9,8,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.marquee.slim .marquee-track{gap:30px;padding-right:30px;animation-duration:66s}
.marquee.slim span{font-size:clamp(14px,1.35vw,18px);color:var(--mute);letter-spacing:0}
.marquee.slim span:nth-of-type(even){color:var(--ink);-webkit-text-stroke:0}
.marquee.slim i{font-size:11px;opacity:.8}

/* manifesto */
.manifesto{padding:220px 0 180px;position:relative}
.mani-text{font-family:var(--serif);font-weight:300;font-size:clamp(32px,4.7vw,72px);line-height:1.1;letter-spacing:-.025em;max-width:1180px}
.mw{color:rgba(244,237,227,.12);transition:color .5s,text-shadow .5s}
.mw.lit{color:var(--ink)}
.mani-text em{font-style:italic}
.mani-text em .mw.lit{color:var(--gold);text-shadow:0 0 40px rgba(232,195,154,.35)}
.mani-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:130px;border-top:1px solid var(--line)}
.mani-stats>div{padding:34px 28px 0 0;display:flex;flex-direction:column;gap:12px}
.mani-stats>div+div{padding-left:28px;border-left:1px solid var(--line)}
.mani-stats b{font-size:clamp(56px,6vw,92px);font-weight:200}
.mani-stats sup{font-size:.3em;color:var(--gold);margin-left:4px;letter-spacing:0}
.mani-stats>div>span{color:var(--mute);font-size:14px}

/* how */
.how{position:relative;height:340vh}
.how-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.how-bgnum{position:absolute;right:-2vw;top:50%;transform:translateY(-50%);font-size:52vw;font-weight:200;color:transparent;-webkit-text-stroke:1px rgba(244,237,227,.05);pointer-events:none;transition:opacity .5s}
.how-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.how .title{font-size:clamp(40px,5vw,78px);margin-bottom:54px}
.steps{position:relative;padding-left:56px}
.how-rail{position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--line2)}
.how-rail i{position:absolute;inset:0;background:var(--grad);transform-origin:top;transform:scaleY(var(--p,0))}
.step{padding:18px 0;opacity:.28;transition:opacity .7s var(--ease),transform .7s var(--ease);transform:translateX(-8px)}
.step.on{opacity:1;transform:none}
.step-num{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:15px}
.step h3{font-family:var(--serif);font-weight:300;font-size:clamp(28px,2.6vw,40px);letter-spacing:-.02em;line-height:1.1;margin:4px 0 8px}
.step p{color:var(--mute);max-width:440px;font-size:15.5px;max-height:0;overflow:hidden;transition:max-height .8s var(--ease)}
.step.on p{max-height:120px}
.how-visual{display:grid;place-items:center}
.phone-flat{transform:rotate(-3deg);width:300px;height:620px}
.scr{position:absolute;inset:0;padding:64px 20px 20px;display:flex;flex-direction:column;opacity:0;transform:translateY(30px) scale(.97);transition:opacity .7s var(--ease),transform .9s var(--ease);background:radial-gradient(80% 50% at 50% 0%,rgba(228,93,123,.14),transparent),#140f0d}
.scr.on{opacity:1;transform:none}
.scr-t{font-family:var(--serif);font-size:26px;font-weight:300;margin-bottom:18px}
.tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1}
.tg{border-radius:16px;background:linear-gradient(transparent 45%,rgba(0,0,0,.75)),var(--g) center/cover;color:#fff;display:flex;align-items:flex-end;padding:10px;font-size:11px;font-weight:600;position:relative;transition:transform .5s var(--ease)}
.tg.sel{box-shadow:0 0 0 2px var(--gold);transform:scale(1.03)}
.tg.sel::after{content:"✓";position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#1a1410;display:grid;place-items:center;font-size:12px}
.scr.on .tg{animation:tgIn .7s var(--ease) both}
.scr.on .tg:nth-child(2){animation-delay:.06s}.scr.on .tg:nth-child(3){animation-delay:.12s}.scr.on .tg:nth-child(4){animation-delay:.18s}.scr.on .tg:nth-child(5){animation-delay:.24s}.scr.on .tg:nth-child(6){animation-delay:.3s}
@keyframes tgIn{from{opacity:0;transform:translateY(20px)}}
.scr-btn{margin-top:14px;height:48px;border-radius:999px;background:var(--ink);color:#0a0908;display:grid;place-items:center;font-weight:600;font-size:14px}
.blocks{display:flex;flex-direction:column;gap:9px}
.blk{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:14px;background:var(--bg3);border:1px solid var(--line);font-size:13px}
.blk svg{width:18px;height:18px;color:var(--gold)}
.blk em{margin-left:auto;font-style:normal;color:var(--dim)}
.blk.done em{color:#6fdc8c}
.scr.on .blk.drag{animation:drag 3.2s var(--ease) infinite;border-color:var(--gold);box-shadow:0 18px 40px rgba(0,0,0,.5)}
@keyframes drag{0%,15%{transform:none}40%,70%{transform:translate(8px,48px) rotate(-2deg)}90%,100%{transform:none}}
.typing{margin-top:auto;padding:16px;border-radius:16px;background:#f4ede3;color:#2a211b}
.typing small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#9b8a7a}
.typing p{font-family:var(--serif);font-size:16px;line-height:1.35;margin-top:4px}
.caret{display:inline-block;width:2px;height:16px;background:var(--rose);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.share-qr{width:200px;height:200px;margin:6px auto 18px;padding:14px;border-radius:24px;background:#f4ede3;position:relative;overflow:hidden}
.scr.on .share-qr::after{content:"";position:absolute;left:0;right:0;height:40px;background:linear-gradient(transparent,rgba(228,93,123,.5),transparent);animation:scan 2.2s ease-in-out infinite}
@keyframes scan{0%{top:-40px}100%{top:100%}}
.share-link{text-align:center;padding:12px;border-radius:999px;border:1px dashed var(--line2);font-size:13px;color:var(--mute)}
.share-link b{color:var(--gold)}
.share-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.share-row span{text-align:center;padding:10px 0;border-radius:12px;background:var(--bg3);font-size:11.5px}
.toast{margin:auto auto 0;padding:10px 18px;border-radius:999px;background:#6fdc8c;color:#0d2415;font-size:12.5px;font-weight:600;opacity:0}
.scr.on .toast{animation:toast 3s var(--ease) 1s infinite}
@keyframes toast{0%{opacity:0;transform:translateY(20px)}15%,70%{opacity:1;transform:none}85%,100%{opacity:0;transform:translateY(10px)}}

/* playground */
.play{padding:190px 0 160px}
.play-grid{display:grid;grid-template-columns:330px 1fr;gap:22px}
.tabs{display:flex;flex-direction:column;gap:6px}
.tab{display:flex;align-items:center;gap:16px;padding:15px 18px;border-radius:20px;border:1px solid transparent;text-align:left;color:var(--mute);transition:background .4s,border-color .4s,color .4s}
.tab svg{width:40px;height:40px;padding:9px;border-radius:13px;background:var(--bg2);flex-shrink:0;transition:background .4s,color .4s}
.tab span{font-size:15px;font-weight:600;line-height:1.3}
.tab small{display:block;font-weight:400;font-size:12.5px;color:var(--dim)}
.tab:hover{color:var(--ink)}
.tab.on{background:var(--bg2);border-color:var(--line);color:var(--ink)}
.tab.on svg{background:var(--grad);color:#1a1410}
.stage{position:relative;min-height:600px;border-radius:36px;border:1px solid var(--line);overflow:hidden;background:radial-gradient(70% 60% at 50% 110%,rgba(228,93,123,.16),transparent),radial-gradient(50% 40% at 50% -10%,rgba(232,195,154,.1),transparent),var(--bg2)}
.stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;-webkit-mask:radial-gradient(circle at 50% 50%,#000,transparent 70%);mask:radial-gradient(circle at 50% 50%,#000,transparent 70%);opacity:.5}
.demo{position:absolute;inset:0;display:grid;place-items:center;padding:40px;opacity:0;visibility:hidden;transform:scale(.96);filter:blur(10px);transition:opacity .7s var(--ease),transform .9s var(--ease),filter .7s var(--ease),visibility 0s .7s}
.demo.on{opacity:1;visibility:visible;transform:none;filter:none;transition-delay:0s}
.demo-hint{position:absolute;top:28px;left:32px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.demo-kick{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.demo-foot{color:var(--mute);font-family:var(--serif);font-style:italic;font-size:18px}

.env{position:relative;width:360px;height:230px;margin-top:120px;perspective:1000px;cursor:pointer}
.env-back{position:absolute;inset:0;border-radius:8px;background:#b88d62}
.env-letter{position:absolute;left:20px;right:20px;top:14px;height:230px;z-index:2;padding:24px 26px;border-radius:6px;background:#f7efe3;color:#2d231c;font-family:var(--serif);font-size:16px;line-height:1.45;transition:transform 1.1s var(--ease) .35s;box-shadow:0 -10px 30px rgba(0,0,0,.2)}
.env-letter .lt-h{font-style:italic;font-size:22px;margin-bottom:6px}
.env-letter .lt-s{text-align:right;font-style:italic;color:var(--rose);margin-top:8px}
.env.open .env-letter{transform:translateY(-190px)}
.env-front{position:absolute;inset:0;z-index:3;border-radius:8px;background:linear-gradient(170deg,#e4c197,#cfa574);clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);box-shadow:inset 0 0 40px rgba(0,0,0,.1)}
.env-flap{position:absolute;left:0;right:0;top:0;height:62%;z-index:4;background:linear-gradient(#d8b183,#c79a69);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .7s var(--ease2),z-index 0s .35s}
.env.open .env-flap{transform:rotateX(180deg);z-index:1}
.env-seal{position:absolute;left:50%;top:62%;z-index:5;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f07f98,#b8304f);display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:22px;color:#ffe3ea;box-shadow:0 6px 16px rgba(120,20,40,.45);transition:transform .5s var(--ease),opacity .4s}
.env.open .env-seal{transform:scale(0) rotate(90deg);opacity:0}
.env:not(.open):hover .env-flap{transform:rotateX(18deg)}

.scratch{position:relative;width:340px;height:440px;border-radius:28px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.5);cursor:crosshair}
.scratch-under{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:30px;gap:4px}
.scratch-under img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scratch-under::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.75))}
.scratch-under small{position:relative;z-index:2;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#fff}
.scratch-under b{position:relative;z-index:2;font-family:var(--serif);font-weight:300;font-size:44px;line-height:1;color:#fff}
.scratch-under span{position:relative;z-index:2;color:#f4ede3}
.scratch canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;transition:opacity .8s}
.scratch canvas.done{opacity:0;pointer-events:none}

.counter-big{text-align:center;display:flex;flex-direction:column;gap:34px;align-items:center}
.cb-grid{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:28px;overflow:hidden}
.cb-grid>div{background:var(--bg2);padding:26px 28px}
.cb-grid b{display:block;font-family:var(--serif);font-weight:200;font-size:clamp(46px,5vw,76px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.cb-grid small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.tick.bump{animation:bump .5s var(--ease)}
@keyframes bump{0%{transform:translateY(-30%);opacity:0;color:var(--gold)}100%{transform:none;opacity:1}}

.conf-wrap{display:flex;flex-direction:column;align-items:center;gap:40px}
.conf-btn{position:relative;width:190px;height:190px;border-radius:50%;background:var(--grad);color:#1a1410;font-family:var(--serif);font-style:italic;font-size:34px;box-shadow:0 30px 80px rgba(228,93,123,.45),inset 0 -10px 30px rgba(0,0,0,.15);transition:transform .3s var(--ease)}
.conf-btn:active{transform:scale(.92)}
.conf-btn i{position:absolute;inset:0;border-radius:50%;border:1px solid var(--gold);animation:ring 2.6s var(--ease) infinite;pointer-events:none}
.conf-btn i:nth-of-type(2){animation-delay:1.3s}
@keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.9);opacity:0}}
.confetti{position:fixed;z-index:120;pointer-events:none;left:0;top:0;will-change:transform}

.quiz{width:min(460px,100%);text-align:center}
.quiz .qn{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.quiz .qq{font-family:var(--serif);font-weight:300;font-size:36px;line-height:1.1;letter-spacing:-.02em;margin:14px 0 30px}
.quiz .qo{display:flex;flex-direction:column;gap:10px}
.quiz .qo button{padding:17px 20px;border-radius:18px;border:1px solid var(--line2);text-align:left;font-size:15px;display:flex;justify-content:space-between;transition:background .3s,border-color .3s,transform .3s}
.quiz .qo button:hover{background:rgba(244,237,227,.05);border-color:var(--gold)}
.quiz .qo button.ok{background:rgba(111,220,140,.14);border-color:#6fdc8c}
.quiz .qo button.no{background:rgba(228,93,123,.14);border-color:var(--rose);animation:shake .5s}
.quiz .qbar{height:2px;background:var(--line);margin-top:26px;border-radius:2px;overflow:hidden}
.quiz .qbar i{display:block;height:100%;background:var(--grad);transition:width .6s var(--ease)}
.quiz .qend b{font-size:120px;font-weight:200}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.quiz>div{animation:qin .7s var(--ease)}
@keyframes qin{from{opacity:0;transform:translateY(24px);filter:blur(6px)}}

.pin{position:relative;width:320px;text-align:center}
.pin-lock{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:rgba(232,195,154,.1);color:var(--gold)}
.pin-lock svg{width:28px;height:28px}
.pin-t{font-family:var(--serif);font-size:28px;font-weight:300}
.pin-h{font-size:13px;color:var(--dim);margin:4px 0 20px}
.pin-dots{display:flex;justify-content:center;gap:16px;margin-bottom:26px}
.pin-dots i{width:14px;height:14px;border-radius:50%;border:1px solid var(--line2);transition:background .2s,transform .3s var(--ease)}
.pin-dots i.f{background:var(--gold);border-color:var(--gold);transform:scale(1.15)}
.pin.err .pin-dots{animation:shake .5s}
.pin.err .pin-dots i.f{background:var(--rose);border-color:var(--rose)}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pin-pad button{height:58px;border-radius:18px;background:rgba(244,237,227,.05);font-size:20px;font-family:var(--serif);transition:background .2s,transform .2s}
.pin-pad button:hover{background:rgba(244,237,227,.1)}
.pin-pad button:active{transform:scale(.94)}
.pin-pad .ghost{font-family:var(--sans);font-size:12px;color:var(--dim);background:none}
.pin-open{position:absolute;inset:-40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;border-radius:30px;background:radial-gradient(circle,rgba(228,93,123,.25),transparent 70%),var(--bg2);opacity:0;visibility:hidden;clip-path:circle(0% at 50% 20%);transition:clip-path 1.1s var(--ease2),opacity .3s,visibility 0s 1.1s}
.pin.unlocked .pin-open{opacity:1;visibility:visible;clip-path:circle(150% at 50% 20%);transition-delay:0s}
.pin-open p{font-size:54px}
.pin-open small{color:var(--mute)}

.player{display:grid;grid-template-columns:auto 1fr;gap:46px;align-items:center;width:min(760px,100%)}
.vinyl-wrap{position:relative;width:280px;height:280px}
.vinyl{width:100%;height:100%;border-radius:50%;background:repeating-radial-gradient(circle,#161413 0 2px,#0c0b0a 2px 4px);box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.06);position:relative;animation:rot 2.4s linear infinite;animation-play-state:paused}
.vinyl::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent,rgba(255,255,255,.08),transparent 25%,transparent 50%,rgba(255,255,255,.06),transparent 75%)}
.vinyl i{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px;border-radius:50%;background:radial-gradient(circle,#0a0908 0 5px,transparent 6px),var(--grad)}
.arm{position:absolute;right:-18px;top:-10px;width:10px;height:170px;border-radius:6px;background:linear-gradient(90deg,#8d8780,#d9d3cb,#8d8780);transform-origin:50% 12px;transform:rotate(-8deg);transition:transform .9s var(--ease)}
.arm::after{content:"";position:absolute;bottom:-8px;left:-6px;width:22px;height:30px;border-radius:5px;background:#2b2724}
.player.playing .vinyl{animation-play-state:running}
.player.playing .arm{transform:rotate(18deg)}
.pl-now{font-size:44px;margin:8px 0 18px}
.pl-bar{height:3px;border-radius:3px;background:var(--line2);overflow:hidden}
.pl-bar i{display:block;height:100%;width:100%;background:var(--grad);transform-origin:left;animation:plbar 30s linear infinite;animation-play-state:paused}
.player.playing .pl-bar i{animation-play-state:running}
@keyframes plbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pl-ctrl{display:flex;align-items:center;gap:20px;margin:22px 0}
.pl-play{width:60px;height:60px;border-radius:50%;background:var(--ink);color:#0a0908;display:grid;place-items:center;transition:transform .3s var(--ease)}
.pl-play:hover{transform:scale(1.08)}
.pl-play svg{width:22px;height:22px}
.eq.big{height:30px;margin:0}.eq.big i{width:4px}
.player:not(.playing) .eq i{animation-play-state:paused}
.pl-list li{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line);font-size:14.5px;cursor:pointer;color:var(--mute);transition:color .3s,padding .4s var(--ease)}
.pl-list li small{color:var(--dim)}
.pl-list li:hover{color:var(--ink);padding-left:8px}
.pl-list li.on{color:var(--gold)}

/* bento */
.bento-sec{padding:40px 0 180px}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{position:relative;min-height:250px;padding:28px;border-radius:28px;background:var(--bg2);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;gap:24px;overflow:hidden;isolation:isolate;transition:border-color .4s,transform .6s var(--ease)}
.card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(232,195,154,.12),transparent 60%);opacity:0;transition:opacity .4s}
.card:hover{border-color:var(--line2)}
.card:hover::before{opacity:1}
.card>svg,.card>div>svg{width:44px;height:44px;padding:10px;border-radius:14px;background:rgba(232,195,154,.08);color:var(--gold);margin-bottom:18px}
.card h3{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:-.015em;line-height:1.15;margin-bottom:6px}
.card p{color:var(--mute);font-size:14.5px}
.s2{grid-column:span 2}.s4{grid-column:span 4}
.s2{flex-direction:row;align-items:stretch}
.s2>div:last-child{align-self:flex-end;max-width:52%}
.card-vis{flex:1;position:relative;border-radius:18px;min-height:190px}
/* Serpilmiş fotoğraflar. Seçici img olmalı: kart içindeki gerçek <img> etiketleri
   konumlandırılmazsa alt alta dizilip kartı taşırıyor. */
.gal{overflow:hidden}
.gal img{position:absolute;width:44%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,.5);transition:transform .8s var(--ease)}
.gal img:nth-child(1){left:4%;top:12%;transform:rotate(-10deg)}
.gal img:nth-child(2){left:22%;top:4%;transform:rotate(-2deg)}
.gal img:nth-child(3){left:40%;top:10%;transform:rotate(7deg)}
.gal img:nth-child(4){left:54%;top:22%;transform:rotate(14deg)}
.card:hover .gal img:nth-child(1){transform:rotate(-18deg) translate(-16px,6px)}
.card:hover .gal img:nth-child(2){transform:rotate(-6deg) translate(-6px,-8px)}
.card:hover .gal img:nth-child(3){transform:rotate(9deg) translate(8px,-6px)}
.card:hover .gal img:nth-child(4){transform:rotate(22deg) translate(20px,6px)}
.tl::before{content:"";position:absolute;left:4%;right:4%;top:50%;height:1px;background:var(--line2)}
.tl::after{content:"";position:absolute;left:4%;width:0;top:50%;height:1px;background:var(--grad);transition:width 1.6s var(--ease)}
.tl.in::after,.card.in .tl::after{width:88%}
.tl span{position:absolute;left:var(--x);top:50%;transform:translate(-50%,-50%);padding:6px 10px;border-radius:999px;background:var(--bg3);border:1px solid var(--line2);font-size:12px;font-weight:600}
.tl span:nth-child(odd){margin-top:-38px}.tl span:nth-child(even){margin-top:38px}
.tl span::after{content:"";position:absolute;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--rose)}
.tl span:nth-child(odd)::after{bottom:-24px}.tl span:nth-child(even)::after{top:-24px}
.eqv{display:flex;align-items:center;gap:5px;padding:0 10px}
.eqv i{flex:1;height:20%;border-radius:4px;background:var(--grad);animation:eq 1.1s ease-in-out infinite;opacity:.85}
.eqv i:nth-child(3n){animation-delay:-.4s;animation-duration:.9s}.eqv i:nth-child(3n+1){animation-delay:-.7s;animation-duration:1.3s}.eqv i:nth-child(4n){animation-delay:-.2s}
.wide{flex-direction:row;align-items:center;min-height:0}
.wide>div:first-child{max-width:420px;flex-shrink:0}
.wide-notes{flex:1;display:flex;gap:12px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.wide-notes span{flex-shrink:0;padding:14px 18px;border-radius:16px;background:var(--bg3);border:1px solid var(--line);font-family:var(--serif);font-style:italic;font-size:16px;animation:marq 22s linear infinite}
.wide-notes b{font-family:var(--sans);font-style:normal;font-size:12px;color:var(--gold);margin-left:8px}

/* templates */
.tpl{position:relative}
.tpl-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:50px;overflow:hidden}
.tpl-head{display:flex;justify-content:space-between;align-items:flex-end}
.tpl .title{font-size:clamp(40px,5.2vw,82px)}
.tpl-count{font-family:var(--serif);font-weight:200;font-size:20px;color:var(--dim)}
.tpl-count b{font-size:64px;font-weight:200;color:var(--ink);font-variant-numeric:tabular-nums}
.tpl-track{display:flex;gap:26px;padding-left:max(32px,(100vw - 1280px) / 2);padding-right:10vw;will-change:transform;width:max-content}
.tcard{flex:0 0 360px;height:min(520px,56vh);border-radius:32px;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);background:var(--bg2);transition:transform .8s var(--ease)}
.tcard:hover{transform:translateY(-12px)}
.mock{flex:1;margin:12px 12px 0;border-radius:24px;padding:26px 24px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;position:relative;overflow:hidden;color:#fff;background:var(--bg3)}
.mock img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.mock::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,var(--tb) 95%)}
.tcard:hover .mock img{transform:scale(1.07)}
.mock small,.mock .m-t{position:relative;z-index:1}
.mock small{font-size:10px;letter-spacing:.26em;text-transform:uppercase;opacity:.85}
.m-t{font-family:var(--serif);font-weight:300;font-size:38px;line-height:1;letter-spacing:-.03em}
.m-t em{font-style:italic;color:var(--ta)}
.t-rose{--tb:rgba(40,12,24,.92);--ta:#f5a3b6}
.t-night{--tb:rgba(7,12,26,.92);--ta:#9fc0f0}
.t-champ{--tb:rgba(30,22,12,.92);--ta:#efcfa6}
.t-noir{--tb:rgba(10,10,10,.92);--ta:#d6d6d6}
.t-noir img{filter:grayscale(1)}
.t-olive{--tb:rgba(10,20,14,.92);--ta:#b6dcbd}
.t-lav{--tb:rgba(24,16,36,.92);--ta:#dbb8f5}
.tcard footer{display:flex;justify-content:space-between;align-items:center;padding:18px 24px}
.tcard footer b{font-family:var(--serif);font-weight:400;font-size:20px}
.tcard footer span{font-size:12.5px;color:var(--dim)}
.tcard-more{justify-content:center;align-items:flex-start;gap:30px;padding:40px;background:radial-gradient(circle at 30% 20%,rgba(228,93,123,.2),transparent 60%),var(--bg2)}
.tcard-more p.display{font-size:58px}
.tcard-sub{color:var(--mute);max-width:260px}

/* guestbook */
.gb{padding:180px 0}
.gb-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.gb .sec-lead{margin:30px 0 36px}
.gb-form{display:grid;grid-template-columns:130px 1fr auto;gap:8px;padding:8px;border-radius:999px;border:1px solid var(--line2);background:var(--bg2)}
.gb-form input{padding:0 16px;font-size:14.5px;min-width:0}
.gb-form input:first-child{border-right:1px solid var(--line)}
.gb-form input::placeholder{color:var(--dim)}
.gb-list{margin-top:34px;display:flex;flex-direction:column;gap:12px}
.gb-list li{display:flex;gap:12px;align-items:center;color:var(--mute);font-size:15px}
.gb-list svg{width:20px;height:20px;color:var(--gold)}
.gb-wall-wrap{border-radius:34px;border:1px solid var(--line);background:linear-gradient(180deg,var(--bg2),transparent);padding:22px}
.gb-top{display:flex;align-items:center;gap:12px;padding:6px 8px 20px;border-bottom:1px solid var(--line)}
.gb-top b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:19px}
.gb-top small{margin-left:auto;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.gb-wall{height:470px;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding-top:18px;-webkit-mask:linear-gradient(#000 65%,transparent);mask:linear-gradient(#000 65%,transparent)}
.note{display:flex;gap:14px;padding:16px 18px;border-radius:20px;background:var(--bg3);border:1px solid var(--line);animation:noteIn 1s var(--ease) both;flex-shrink:0}
.note .av{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-family:var(--serif);color:#1a1410;background:var(--c)}
.note header{display:flex;gap:10px;align-items:baseline;font-size:14px;font-weight:600}
.note header small{font-weight:400;color:var(--dim);font-size:12px}
.note header em{font-style:normal;font-size:10px;padding:2px 8px;border-radius:999px;background:rgba(228,93,123,.2);color:var(--rose);letter-spacing:.08em}
.note p{color:var(--mute);font-size:14.5px}
@keyframes noteIn{from{opacity:0;transform:translateY(-30px) scale(.96);filter:blur(8px);margin-top:-80px}}

/* film strip */
.filmstrip{margin-top:120px;padding:18px 0;background:#050404;display:flex;overflow:hidden;position:relative;transform:rotate(-2deg) scale(1.04)}
.filmstrip::before,.filmstrip::after{content:"";position:absolute;left:0;right:0;height:10px;z-index:2;background:repeating-linear-gradient(90deg,transparent 0 14px,rgba(244,237,227,.55) 14px 26px,transparent 26px 40px);opacity:.5}
.filmstrip::before{top:4px}.filmstrip::after{bottom:4px}
.film-track{display:flex;gap:10px;padding:6px 5px;flex-shrink:0;animation:marq 60s linear infinite}
.film-track img{width:300px;height:200px;object-fit:cover;border-radius:4px;filter:saturate(.9) contrast(1.05)}

/* live demo */
.demo-sec{padding:180px 0 60px;position:relative}
.demo-sec::before{content:"";position:absolute;right:0;top:0;width:60vw;height:100%;background:radial-gradient(circle at 70% 50%,rgba(228,93,123,.13),transparent 60%);pointer-events:none}
.demo-grid{position:relative;display:grid;grid-template-columns:1fr 440px;gap:80px;align-items:center}
.demo-grid .sec-lead{margin:30px 0 34px}
.demo-steps{list-style:none;display:grid;gap:4px;margin-bottom:40px}
.demo-steps li{display:flex;gap:18px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line);color:var(--mute)}
.demo-steps b{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--gold)}
.demo-phone{display:flex;flex-direction:column;align-items:center;gap:18px}
.phone-live{width:340px;height:min(700px,82vh);transform:none}
.phone-live iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#140a0e}
.phone-live .island{pointer-events:none}
.demo-loading{position:absolute;inset:0;display:grid;place-items:center;background:#140a0e;transition:opacity .6s}
.demo-loading span{width:30px;height:30px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--gold);animation:rot .8s linear infinite}
.demo-loading.done{opacity:0;pointer-events:none}
.demo-tip{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}

/* moments */
.moments{padding:40px 0 180px}
.moment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.moment{position:relative;height:520px;border-radius:30px;overflow:hidden;display:flex;align-items:flex-end;text-decoration:none;isolation:isolate;border:1px solid var(--line)}
.moment img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.6s var(--ease)}
.moment::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 30%,rgba(8,6,6,.92) 88%)}
.moment:hover img{transform:scale(1.08)}
.moment>div{padding:30px}
.moment small{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.moment h3{font-family:var(--serif);font-weight:300;font-size:30px;line-height:1.08;letter-spacing:-.02em;margin:10px 0}
.moment p{color:rgba(244,237,227,.72);font-size:14.5px;max-height:0;opacity:0;overflow:hidden;transition:max-height .7s var(--ease),opacity .5s}
.moment span{display:inline-block;margin-top:14px;font-weight:600;font-size:14px;color:var(--ink);transform:translateX(-6px);opacity:.7;transition:transform .5s var(--ease),opacity .4s}
.moment:hover p{max-height:120px;opacity:1}
.moment:hover span{transform:none;opacity:1}
@media (hover:none){.moment p{max-height:none;opacity:1}}

/* compare */
.compare{padding:40px 0 180px}
.cmp{border-radius:30px;border:1px solid var(--line);overflow:hidden}
.cmp-row{display:grid;grid-template-columns:1.5fr 1.2fr 1fr 1fr 1fr;align-items:center;border-top:1px solid var(--line);transition:background .3s}
.cmp-row:first-child{border-top:0}
.cmp-row:not(.head):hover{background:rgba(244,237,227,.025)}
.cmp-row>span{padding:22px 24px;font-size:14.5px;color:var(--mute);display:flex;align-items:center;gap:8px}
.cmp-row>span:first-child{color:var(--ink);font-weight:500}
.cmp-row.head>span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding-block:26px}
.cmp .hl{background:linear-gradient(180deg,rgba(232,195,154,.1),rgba(228,93,123,.06));color:var(--ink)!important;align-self:stretch;border-inline:1px solid rgba(232,195,154,.25)}
.cmp-row.head .hl b{font-family:var(--serif);font-size:24px;letter-spacing:-.01em;text-transform:none;color:var(--gold);font-weight:400}
.cmp svg{width:22px;height:22px}
.cmp .y svg{color:#6fdc8c}.cmp .hl.y svg{color:var(--gold)}
.cmp .n svg{color:var(--dim);opacity:.6}

.pc-when{margin-top:14px;padding:12px 16px;border-radius:16px;background:rgba(111,220,140,.09);border:1px solid rgba(111,220,140,.26);color:#cfe9d6;font-size:13.5px;line-height:1.45}
.pc-when b{color:#6fdc8c;font-weight:600}

/* pricing */
.pricing{padding:60px 0 180px;position:relative}
.pricing::before{content:"";position:absolute;right:0;top:10%;width:60vw;height:80%;background:radial-gradient(circle at 70% 50%,rgba(228,93,123,.14),transparent 60%);pointer-events:none}
.price-grid{position:relative;display:grid;grid-template-columns:1fr 480px;gap:90px;align-items:center}
.price-grid .sec-lead{margin:30px 0 40px}
.price-steps{list-style:none;display:grid;gap:10px}
.price-steps li{display:flex;gap:18px;align-items:center;padding:18px 22px;border-radius:22px;border:1px solid var(--line)}
.price-steps b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:20px;color:var(--gold)}
.price-steps strong{display:block;font-weight:600;font-size:15.5px}
.price-steps span{color:var(--dim);font-size:13.5px}
.price-card{position:relative;padding:1.5px;border-radius:38px;background:conic-gradient(from var(--a),rgba(244,237,227,.08) 0 55%,var(--gold) 70%,var(--rose) 82%,rgba(244,237,227,.08) 95%);animation:spin 5s linear infinite;box-shadow:0 60px 120px -40px rgba(228,93,123,.35)}
.price-in{border-radius:37px;padding:40px;background:radial-gradient(90% 50% at 50% 0%,rgba(232,195,154,.1),transparent),#100e0c}
.pc-top{display:flex;justify-content:space-between;align-items:center}
.tag{padding:7px 14px;border-radius:999px;background:var(--grad);color:#1a1410;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.pc-sub{color:var(--mute);font-size:14px}
.pc-price{display:flex;align-items:flex-start;gap:8px;margin:26px 0 6px}
.pc-price .cur{font-family:var(--serif);font-size:40px;color:var(--gold);margin-top:18px}
.pc-price b{font-size:clamp(88px,11vw,124px);font-weight:200;font-variant-numeric:tabular-nums;line-height:.85;letter-spacing:-.02em}
.pc-price .per{align-self:flex-end;font-size:13px;color:var(--dim);line-height:1.2;margin-bottom:10px}
.pc-note{color:var(--mute);font-size:14px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.pc-top .sale{background:none;border:1px solid rgba(228,93,123,.5);background:rgba(228,93,123,.14);color:#ffc9d6}
.pc-top{gap:10px;flex-wrap:wrap}
.pc-was{display:flex;align-items:center;gap:10px;margin:2px 0 14px;font-size:15px;color:var(--dim)}
.pc-was s{font-family:var(--serif);font-size:19px;text-decoration-thickness:1.5px;opacity:.75}
.pc-was em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6fdc8c;
  padding:5px 10px;border-radius:999px;background:rgba(111,220,140,.12);border:1px solid rgba(111,220,140,.3)}
/* Öncelikli teslim: fiyat kartında da seçilebilir; seçim ödeme adımına taşınır. */
.pc-add{display:flex;align-items:center;gap:14px;margin-top:20px;padding:14px 16px;border-radius:18px;background:rgba(244,237,227,.04);border:1px solid var(--line);cursor:pointer;transition:border-color .3s,background .3s}
.pc-add:hover{border-color:rgba(232,195,154,.42)}
.pc-add>div{flex:1 1 auto;min-width:0}
.pc-add input{position:absolute;opacity:0;width:0;height:0}
.pc-box{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid rgba(244,237,227,.32);position:relative;transition:border-color .25s,background .25s}
.pc-box::after{content:"";position:absolute;left:6px;top:2.5px;width:7px;height:12px;border-right:2px solid #1a1410;border-bottom:2px solid #1a1410;
  transform:rotate(42deg) scale(.4);opacity:0;transition:transform .25s var(--ease),opacity .2s}
.pc-add input:checked~.pc-box{background:var(--gold);border-color:var(--gold)}
.pc-add input:checked~.pc-box::after{opacity:1;transform:rotate(42deg) scale(1)}
.pc-add input:focus-visible~.pc-box{outline:2px solid var(--gold);outline-offset:3px}
.pc-add:has(input:checked){border-color:rgba(232,195,154,.5);background:rgba(232,195,154,.07)}
.pc-add b{font-size:14.5px;font-weight:600}
.pc-add small{display:block;color:var(--dim);font-size:12.5px;margin-top:2px}
.pc-plus{flex:none;font-family:var(--serif);font-size:15px;color:var(--gold);text-align:right}
.pc-plus b{font-size:24px;font-weight:300}
.pc-plus s{display:block;font-size:13px;color:var(--dim);opacity:.8}
.pc-rushnote{margin-top:10px;font-size:12.5px;color:#cfe9d6}
.pc-list{display:grid;grid-template-columns:1fr;gap:12px;margin:26px 0 32px}
.pc-list li{display:flex;gap:12px;align-items:center;font-size:14.5px}
.pc-list svg{width:18px;height:18px;color:var(--gold);flex-shrink:0}
.pc-foot{text-align:center;color:var(--dim);font-size:12.5px;margin-top:16px}

/* faq */
.faq{padding:60px 0 200px}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px}
.faq .sec-lead{margin-top:30px}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 0;text-align:left;font-family:var(--serif);font-weight:300;font-size:clamp(20px,2vw,27px);letter-spacing:-.015em;transition:color .3s,padding .5s var(--ease)}
.q:hover{color:var(--gold);padding-left:10px}
.q i{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);flex-shrink:0;transition:transform .6s var(--ease),background .3s}
.q i::before,.q i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;background:currentColor}
.q i::after{transform:rotate(90deg);transition:transform .6s var(--ease)}
.qa.open .q i{transform:rotate(180deg);background:var(--ink);color:#0a0908}
.qa.open .q i::after{transform:rotate(0)}
.a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.qa.open .a{grid-template-rows:1fr}
.a>div{overflow:hidden}
.a p{color:var(--mute);font-size:16px;max-width:620px;padding-bottom:28px}

/* final */
.final{position:relative;min-height:110vh;display:grid;place-items:center;text-align:center;overflow:hidden}
.final::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 50%,transparent 55%,var(--bg) 100%),linear-gradient(var(--bg),transparent 18%,transparent 82%,var(--bg));pointer-events:none}
.final-in{position:relative;z-index:2}
.final-t{font-size:clamp(56px,10vw,170px);margin-bottom:48px;text-shadow:0 10px 60px rgba(10,9,8,.8)}
.final-foot{margin-top:28px;color:var(--dim);font-size:13px;letter-spacing:.1em}

/* footer */
.foot{padding:100px 0 30px;border-top:1px solid var(--line);overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr 1.2fr .8fr;gap:36px}
.foot-brand p{color:var(--mute);margin:16px 0 26px;max-width:320px}
.foot h4{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:18px}
.foot-grid>div:not(.foot-brand){display:flex;flex-direction:column;gap:10px}
.foot-brand .btn{margin-top:4px}
/* Sosyal hesaplar: sameAs etiketinin gorunur karsiligi, rel="me" ile iki yonlu baglanti. */
.foot-soc{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.foot-soc a{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--mute);transition:color .25s,border-color .25s,background .25s}
.foot-soc a:hover{color:var(--ink);border-color:var(--line2);background:var(--bg3)}
.foot-soc svg{width:15px;height:15px;fill:currentColor;flex:none}
.foot-grid a:not(.logo):not(.btn){color:var(--mute);font-size:14.5px;transition:color .3s}
.foot-grid a:hover{color:var(--ink)}
.wordmark{font-size:25vw;font-weight:200;text-align:center;line-height:.8;letter-spacing:-.06em;margin:80px 0 30px;background:linear-gradient(180deg,rgba(244,237,227,.16),rgba(244,237,227,0) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;color:var(--dim);font-size:13px}

/* responsive */
@media (max-width:1100px){
  .nav-links{display:none}
  .hero-grid{grid-template-columns:1fr;gap:10px}
  .phone-stage{height:640px}
  .play-grid{grid-template-columns:1fr}
  .tabs{flex-direction:row;overflow-x:auto;scrollbar-width:none;margin:0 -32px;padding:0 32px}
  .tab{flex-shrink:0}.tab small{display:none}
  .bento{grid-template-columns:repeat(2,1fr)}
  .s4{grid-column:span 2}
  .gb-grid,.price-grid,.faq-grid,.demo-grid{grid-template-columns:1fr;gap:60px}
  .moment-grid{grid-template-columns:1fr 1fr}
  .how-grid{grid-template-columns:1fr}
  .how-visual{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:span 2}
  .cmp{overflow-x:auto}
  .cmp-row{min-width:820px}
}
@media (max-width:760px){
  .container{width:calc(100% - 32px)}
  .sec-head,.tpl-head{flex-direction:column;align-items:flex-start;gap:24px;margin-bottom:48px}
  .nav-in{padding:0 6px 0 18px;height:60px}
  .nav-cta{gap:10px}
  .logo{font-size:21px;gap:8px}
  .logo svg{width:24px;height:24px}
  .nav-cta .btn-sm{height:42px;font-size:13px;padding:0 16px!important}
  .lang-btn{padding:0 9px;gap:5px}
  .lang-btn span{display:none}
}
@media (max-width:400px){
  .logo{font-size:19px}
  .nav-cta .btn-sm{padding:0 13px!important;font-size:12.5px}
  .lang-btn{padding:0 7px}
  .hero{padding-top:92px}
  .marquee.slim{padding:10px 0;margin-bottom:24px}
  .marquee.slim .marquee-track{gap:22px;padding-right:22px}
  .hero-sub{font-size:16.5px}
  .phone-stage{height:600px;transform:scale(.88)}
  .chip.c1{left:-6%}.chip.c2{right:-8%}
  .hero-foot-r{display:none}
  .manifesto{padding:140px 0 120px}
  .mani-stats{grid-template-columns:1fr 1fr;margin-top:80px}
  .mani-stats>div:nth-child(3){padding-left:0;border-left:0}
  .mani-stats>div{padding-bottom:30px}
  .how{height:auto}
  .how-sticky{position:relative;height:auto;padding:100px 0}
  .step{opacity:1;transform:none}.step p{max-height:none}
  .how-rail i{transform:scaleY(1)}
  .play{padding:120px 0}
  .tabs{margin:0 -16px;padding:0 16px}
  .stage{min-height:560px;border-radius:28px}
  .demo{padding:20px}
  .env{width:290px;height:190px;margin-top:130px}
  .env-letter{font-size:14px;padding:18px;height:200px}
  .env.open .env-letter{transform:translateY(-160px)}
  .scratch{width:280px;height:380px}
  .cb-grid{grid-template-columns:repeat(2,minmax(120px,1fr))}
  .cb-grid>div{padding:18px}
  .player{grid-template-columns:1fr;gap:26px;justify-items:center}
  .vinyl-wrap{width:170px;height:170px}.arm{height:110px}
  .pl-now{font-size:32px}
  .quiz .qq{font-size:28px}
  .bento{grid-template-columns:1fr}
  .s2,.s4{grid-column:span 1;flex-direction:column}
  .s2>div:last-child{max-width:none}
  .wide{flex-direction:column;align-items:stretch}
  .tpl-sticky{position:relative;height:auto;padding:100px 0}
  .tpl-track{overflow-x:auto;scroll-snap-type:x mandatory;width:auto;padding:0 16px;scrollbar-width:none;transform:none!important}
  .tcard{flex-basis:78vw;scroll-snap-align:center;height:470px}
  .tpl-count{display:none}
  .gb{padding:100px 0}
  .demo-sec{padding:110px 0 30px}
  .phone-live{width:300px;height:620px}
  .moment-grid{grid-template-columns:1fr}
  .moment{height:440px}
  .filmstrip{margin-top:70px}
  .film-track img{width:220px;height:150px}
  .hero-trust{margin-top:34px}
  .gb-form{grid-template-columns:1fr;border-radius:24px}
  .gb-form input{height:46px}
  .gb-form input:first-child{border-right:0;border-bottom:1px solid var(--line)}
  .price-in{padding:28px}
  .pc-price b{font-size:100px}
  .final-t{font-size:clamp(48px,14vw,90px)}
  .foot-grid{grid-template-columns:1fr}
  .foot-brand{grid-column:span 1}
  .foot-bottom{flex-direction:column}
  .letterbox{height:8vh}
}

/* Fikir kartlarının altındaki rehber bağlantıları */
.moment-guides{margin-top:34px;text-align:center;font-size:15px;line-height:2;color:var(--mute,#a39a8f)}
.moment-guides a{color:inherit;text-decoration:underline;text-decoration-color:rgba(232,195,154,.4);text-underline-offset:4px;transition:color .3s}
.moment-guides a:hover{color:#e8c39a}

/* Telefonda ana sayfa kısa kalsın: 29 ekrandan ~15 ekrana. Özellik kartlarının ilk dördü görünür,
   gerisi düğmeyle açılır; fikir kartları yana kaydırılan tek satır olur. Masaüstü değişmez. */
.bento-more{display:none}
@media (max-width:760px){
  .bento:not(.all)>.card:nth-child(n+5){display:none}
  .bento-more{display:flex;align-items:center;justify-content:center;width:100%;height:52px;margin-top:14px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--ink,#f4ede3);font:600 15px/1 Manrope,system-ui,sans-serif;cursor:pointer}
  .bento.all+.bento-more{display:none}
  .moment-grid{display:flex;overflow-x:auto;gap:12px;margin:0 -16px;padding:0 16px 10px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .moment-grid::-webkit-scrollbar{display:none}
  .moment{flex:0 0 82%;height:420px;scroll-snap-align:start}
}

/* reviews */
.reviews{padding:0 0 160px}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.review{padding:28px;border-radius:26px;background:var(--bg2);border:1px solid var(--line)}
.review .rs{display:flex;gap:3px;margin-bottom:14px}
.review .rs svg{width:15px;height:15px;fill:var(--gold)}
.review .rs svg.off{fill:var(--line2)}
.review p{color:var(--mute);font-size:14.5px;line-height:1.6}
.review footer{margin-top:16px;color:var(--dim);font-size:12.5px;letter-spacing:.06em}
.rev-avg b{color:var(--gold);font-weight:600}
@media(max-width:900px){.review-grid{grid-template-columns:1fr}}