.top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:14px 22px;transition:background .3s,box-shadow .3s}
.top.solid{background:rgba(243,238,229,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.top b{font-family:var(--serif);font-weight:600;font-size:1.05rem}
.top b span{color:var(--ink3);font-family:var(--sans);font-weight:500;font-size:.85rem;margin-left:8px}
@media (max-width:560px){.top b span{display:none}}

/* Açılış ekranı */
.opener{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:110px 0 90px;background:var(--paper);color:var(--ink);overflow:hidden}
.opener::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 80% 110%,rgba(192,106,60,.16),transparent 55%),radial-gradient(ellipse at 5% -10%,rgba(46,107,94,.14),transparent 55%)}
#steam{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.opener .wrap{position:relative;z-index:2;width:100%}
.op-kicker{font-size:.95rem;color:var(--ink2);margin-bottom:22px}
.opener h1{font-size:clamp(2.5rem,6.2vw,5.2rem);max-width:19ch}
.opener h1 .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.opener h1 .ln>span{display:inline-block;animation:rise 1.1s cubic-bezier(.16,1,.3,1) both}
.opener h1 .ln:nth-child(2)>span{animation-delay:.14s}
.opener h1 .ln:nth-child(3)>span{animation-delay:.28s}
.opener h1 em{font-style:italic;color:var(--copper)}
.opener .lead{color:var(--ink2);margin-top:28px;animation-delay:.6s}
.op-down{position:absolute;z-index:2;left:0;right:0;margin:0 auto;width:max-content;bottom:30px;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ink2);font-size:.85rem;font-weight:600;text-decoration:none;animation-delay:1s;transition:opacity .4s}
.op-down i{position:relative;width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(29,38,34,.45);animation:bob 2s cubic-bezier(.45,0,.55,1) infinite;transition:background .2s}
.op-down i .ico{width:22px;height:22px;stroke-width:2.2}
.op-down i::before{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:1.5px solid var(--ink);animation:ring 2s ease-out infinite;pointer-events:none}
.op-down:hover i{background:var(--copper)}
.op-down.gone{opacity:0;pointer-events:none}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes ring{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.6);opacity:0}}
@media (max-height:620px){.op-down{display:none}}

/* Hikâye: telefon */
.hero{padding:120px 0}
.hero h2 em{font-style:italic;color:var(--copper)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr;gap:44px}}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.fade-in{animation:fade .9s .35s cubic-bezier(.16,1,.3,1) both}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}

.phone-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.seg{display:inline-flex;background:var(--paper2);border-radius:999px;padding:4px;border:1px solid var(--line)}
.seg button{padding:8px 16px;border-radius:999px;font-size:.88rem;font-weight:600;color:var(--ink2);transition:background .25s,color .25s}
.seg button.on{background:var(--white);color:var(--ink);box-shadow:0 1px 3px rgba(40,30,20,.15)}
.phone{width:min(340px,100%);border-radius:40px;background:var(--white);border:9px solid #2a2622;box-shadow:0 30px 60px -20px rgba(60,40,20,.35),0 8px 20px -8px rgba(60,40,20,.2);overflow:hidden}
.ph-top{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line2)}
.ph-top .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#f0a35e,#c7336a);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.78rem}
.ph-top b{font-size:.9rem;display:block;line-height:1.2}
.ph-top small{font-size:.74rem;color:var(--ink3)}
.ph-body{height:440px;padding:14px 12px;display:flex;flex-direction:column;gap:8px;overflow:hidden;background:var(--surface)}
.clock{align-self:center;font-size:.72rem;color:var(--ink3);padding:2px 0}
.bub{max-width:82%;padding:9px 13px;border-radius:18px;font-size:.87rem;line-height:1.42;animation:pop .45s cubic-bezier(.16,1,.3,1) both}
.bub.in{align-self:flex-start;background:#efebe4;border-bottom-left-radius:5px}
.bub.out{align-self:flex-end;background:var(--water);color:#fff;border-bottom-right-radius:5px}
.bub.sys{align-self:center;background:transparent;color:var(--copper);font-size:.78rem;font-weight:600;text-align:center}
.bub .lnk{display:block;margin-top:6px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.16);font-size:.8rem}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ph-cap{font-size:.9rem;color:var(--ink2);text-align:center;min-height:2.9em;max-width:340px}
.ph-cap b{color:var(--ink)}