/* Yazı tipleri: assets/fonts.css (get-fonts.py üretir; Fraunces ve Figtree, statik örnekler).
   Shore kitapçığı: tek sayfa, altı bölüm. Ekranda kaydırılan bir kitapçık; yazdırınca (A5) her bölüm bir sayfa olur.
   Renk ve yuvarlak kart dili uygulamayla ve siteyle aynı. Ölçüler rem: baskıda 1rem = 4 mm (sayfa 37rem = 148 mm). */


:root{
  --bg1:#0f2a33; --bg2:#1d3b4a; --bg3:#2e2a4f;
  --card:rgba(255,255,255,.07); --card-b:rgba(255,255,255,.13);
  --text:#eef6f6; --muted:#a9c3c6; --accent:#7fd8c8; --accent2:#b9a7f5; --ink:#0f2a33; --warm:243,211,138;
  --serif:Fraunces,Georgia,"Times New Roman",serif;
  --display:"Fraunces Display",Fraunces,Georgia,"Times New Roman",serif;
  --sans:Figtree,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (max-width:640px){html{font-size:17px}}
body{min-height:100vh;font-family:var(--sans);font-size:.9rem;line-height:1.5;color:var(--text);
  background:linear-gradient(160deg,#0a1d24,#12283a 55%,#1e1b38) fixed;background-color:#0a1d24;-webkit-tap-highlight-color:transparent}
img,svg,video{display:block;max-width:100%}
a{color:var(--accent);text-underline-offset:3px}
ul{list-style:none}
.defs{position:absolute;width:0;height:0;overflow:hidden}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--accent2);outline-offset:3px;border-radius:6px}
.i{display:block;width:1.4rem;height:1.4rem;flex:none}

/* ---------- Ekranda: üst çubuk ---------- */
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:.8rem;padding:.55rem 1rem;background:rgba(10,29,36,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--card-b)}
.topbar .brand{display:flex;align-items:center;gap:.55rem;margin-right:auto;color:var(--text);text-decoration:none}
.topbar .brand svg{width:1.9rem;height:1.9rem}
.topbar .brand b{font:600 1.35rem/1 var(--serif)}
.toc{display:none;gap:.2rem}
.toc a{padding:.35rem .6rem;border-radius:999px;font-size:.78rem;font-weight:700;color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--text);background:var(--card)}
@media (min-width:900px){.toc{display:flex}}
.lang{display:flex;border:1.5px solid var(--card-b);border-radius:999px;overflow:hidden}
.lang a{display:grid;place-items:center;min-width:2.6rem;height:2.1rem;font-size:.78rem;font-weight:800;color:var(--muted);text-decoration:none}
.lang a[aria-current]{background:var(--accent);color:var(--ink)}

/* ---------- Sayfa ---------- */
.booklet{display:grid;gap:1.4rem;justify-items:center;padding:1.4rem 1rem 3rem}
.page{position:relative;container-type:inline-size;width:100%;max-width:37rem;display:flex;flex-direction:column;gap:1rem;
  padding:2rem 1.5rem 2.2rem;border-radius:1.5rem;overflow:hidden;border:1px solid var(--card-b);
  background:radial-gradient(60% 40% at 90% 0%,rgba(185,167,245,.14),transparent 70%),radial-gradient(50% 35% at 6% 14%,rgba(127,216,200,.1),transparent 70%),linear-gradient(160deg,var(--bg1),var(--bg2) 55%,var(--bg3));
  background-color:var(--bg1)}
.eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.2px}
h1,h2{font-family:var(--display)}
h2{font-size:1.9rem;line-height:1.12}
h3{font-size:1.05rem;line-height:1.25}
.lead{font-size:1rem;line-height:1.55}
.muted{color:var(--muted)}
.small{font-size:.76rem;line-height:1.45}
b,strong{font-weight:700}

/* Doldurulacak yerler görünür kalır */
mark.ph{padding:.05rem .45rem;border-radius:.5rem;background:rgba(var(--warm),.16);border:1px dashed rgba(var(--warm),.7);color:rgb(var(--warm));font-weight:800;white-space:nowrap}
.soon{display:inline-block;padding:.05rem .55rem;border-radius:999px;background:rgba(185,167,245,.18);border:1px solid rgba(185,167,245,.5);color:#d8ccfa;font-size:.7rem;font-weight:800}

/* ---------- 1 · Kapak ---------- */
.cover{align-items:center;justify-content:center;text-align:center;gap:0;min-height:44rem}
.cover .logo{width:9rem;height:9rem;overflow:visible;margin-bottom:.6rem;animation:inhale 8s ease-in-out infinite}
.cover .word{font:600 3.5rem/1 var(--display);letter-spacing:-.5px}
.cover .main{margin-top:1.7rem;font:500 1.9rem/1.15 var(--display);color:var(--accent)}
.cover .sub{max-width:19rem;margin-top:.8rem;font-size:1.02rem;line-height:1.5}
.cover .wave{position:absolute;left:0;right:0;bottom:5.2rem;width:100%;height:2.3rem}
.cover .edition{position:absolute;left:0;right:0;bottom:1.7rem;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@keyframes inhale{0%,100%{transform:scale(.88)}50%{transform:scale(1)}}

/* ---------- 2 · Shore nedir ---------- */
.intro{display:grid;grid-template-columns:1fr 9.6rem;gap:1.2rem;align-items:center}
.statement{font:600 2.15rem/1.08 var(--display)}
.statement span{display:block;color:var(--accent)}
.intro .lead{margin-top:.8rem}
.shore-img{border-radius:1.2rem;overflow:hidden;border:1px solid var(--card-b);box-shadow:0 .5rem 1.4rem rgba(0,0,0,.28);aspect-ratio:390/844;background:#102c36}
.shore-img img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.shore-band{position:relative;display:flex;align-items:center;justify-content:center;gap:1rem;padding:.9rem 1rem 1.9rem;border-radius:1.2rem;overflow:hidden;border:1px solid var(--card-b);background:linear-gradient(180deg,rgba(9,30,38,.55),rgba(29,59,74,.25))}
.shore-band .logo{width:3.4rem;height:3.4rem;overflow:visible;flex:none;animation:inhale 8s ease-in-out infinite}
.shore-band p{font:500 1.4rem/1.2 var(--display)}
.shore-band .wave{position:absolute;left:0;right:0;bottom:.15rem;width:100%;height:1.5rem}
.moments{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.moment{display:flex;flex-direction:column;gap:.45rem;padding:.8rem .8rem .9rem;border-radius:1.1rem;background:var(--card);border:1px solid var(--card-b)}
.moment .ic{display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;background:rgba(127,216,200,.14);color:var(--accent)}
.moment:nth-child(2) .ic{background:rgba(243,193,211,.16);color:#f3c1d3}
.moment:nth-child(3) .ic{background:rgba(185,167,245,.16);color:var(--accent2)}
.moment .ic .i{width:1.35rem;height:1.35rem}
.moment h3{font-size:1.02rem}
.moment p{font-size:.8rem;line-height:1.45;color:var(--text)}
.try{margin-top:auto;padding-top:.3rem;font-size:.7rem;font-weight:800;letter-spacing:.04em;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:.25rem}
.chips li{padding:.1rem .55rem;border-radius:999px;font-size:.72rem;font-weight:700;line-height:1.5;background:rgba(255,255,255,.09);color:var(--text)}
.moments-h{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem}

/* ---------- 3 · İçinde ne var ---------- */
.head2{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.head2 p{max-width:15rem;text-align:right}
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}
.area{--tone:127,216,200;grid-column:span 4;padding:.6rem .6rem .7rem;border-radius:1.1rem;background:rgba(var(--tone),.1);border:1px solid rgba(var(--tone),.3)}
.area.half{grid-column:span 2}
.area.breath{--tone:127,216,200}.area.self{--tone:243,193,211}.area.dance{--tone:195,184,240}.area.flow{--tone:169,211,238}
.area-h{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem;min-height:1.9rem}
.area-h .ic{display:grid;place-items:center;flex:none;width:2.1rem;height:2.1rem;border-radius:50%;background:rgba(var(--tone),.16);color:rgb(var(--tone))}
.area-h .ic .i{width:1.25rem;height:1.25rem}
.area-h h3{font-size:.98rem;line-height:1.15;text-shadow:0 0 14px rgba(var(--tone),.55)}
.area-h p{font-size:.7rem;line-height:1.3;color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:.4rem}
.tiles.pad4{grid-template-columns:repeat(4,1fr)}
.tile{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.frame{position:relative;aspect-ratio:1/.82;border-radius:.8rem;overflow:hidden;background:#0b222b;border:1px solid rgba(255,255,255,.14)}
.frame video,.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% var(--py,30%)}
.tile figcaption{display:flex;flex-direction:column;font-size:.7rem;line-height:1.25}
.tile figcaption b{font-size:.74rem;font-weight:700}
.tile figcaption span{color:var(--muted);font-size:.64rem}
.area-note{display:flex;flex-direction:column;justify-content:center;gap:.3rem;padding-left:.2rem;font-size:.72rem;line-height:1.4;color:var(--muted)}
.area-note b{color:var(--text);font-size:.8rem}
.sos{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center}
#inside,#made{gap:.8rem}
#free{gap:.62rem}
#inside h2{font-size:1.7rem}
#free h2{font-size:1.65rem}
.sos img{width:100%;max-width:19rem;height:auto;border-radius:7.3% / 42%}
.sos p{font-size:.78rem;line-height:1.4;max-width:30rem}
.sos p b{color:var(--text)}
.watch{display:none;text-align:center;font-size:.76rem;color:var(--muted)}
.watch b{color:var(--text)}
.still{display:none}

/* ---------- 4 · Nasıl yapıldı / gizlilik ---------- */
.howto{display:grid;gap:.6rem}
.how{display:grid;grid-template-columns:2.6rem 1fr;gap:.8rem;align-items:start;padding:.8rem .9rem;border-radius:1.1rem;background:var(--card);border:1px solid var(--card-b)}
.how .ic{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:rgba(127,216,200,.14);color:var(--accent)}
.how .ic .i{width:1.45rem;height:1.45rem}
.how:nth-child(2) .ic{background:rgba(243,193,211,.16);color:#f3c1d3}
.how:nth-child(3) .ic{background:rgba(185,167,245,.16);color:var(--accent2)}
.how h3{margin-bottom:.15rem}
.how p,.how li{font-size:.8rem;line-height:1.45}
.how ul{display:grid;grid-template-columns:1fr 1fr;gap:.1rem .8rem;margin-top:.15rem}
.how ul li{position:relative;padding-left:.9rem}
.how ul li::before{content:"";position:absolute;left:.1rem;top:.62em;width:.32rem;height:.32rem;border-radius:50%;background:#f3c1d3}
.privacy{padding:.85rem .95rem .95rem;border-radius:1.1rem;background:rgba(127,216,200,.1);border:1px solid rgba(127,216,200,.32)}
.privacy h3{margin-bottom:.45rem}
.ticks{display:grid;grid-template-columns:1fr 1fr;gap:.35rem .8rem}
.ticks li{display:flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:700}
.ticks .i{width:1.1rem;height:1.1rem;color:var(--accent)}
.privacy p{margin-top:.5rem;font-size:.78rem;color:var(--muted)}
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;justify-items:center;margin-top:auto}
.phone{width:100%;max-width:6.9rem;display:flex;flex-direction:column;gap:.35rem}
.phone .pf{position:relative;aspect-ratio:390/844;border-radius:1.2rem;overflow:hidden;background:#0b222b;border:1px solid rgba(255,255,255,.2);box-shadow:0 .5rem 1.4rem rgba(0,0,0,.3)}
.phone .pf video,.phone .pf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone figcaption{font-size:.68rem;line-height:1.3;color:var(--muted);text-align:center}

/* ---------- 5 · Nasıl ücretsiz kalıyor / birlikte çalışmak ---------- */
.card{padding:.85rem .95rem .95rem;border-radius:1.2rem;background:var(--card);border:1px solid var(--card-b)}
.card.friends{background:rgba(185,167,245,.1);border-color:rgba(185,167,245,.35)}
.card.org{background:rgba(var(--warm),.07);border-color:rgba(var(--warm),.3)}
.card-h{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.card-h .ic{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:rgba(185,167,245,.18);color:var(--accent2)}
.card.org .card-h .ic{background:rgba(var(--warm),.16);color:rgb(var(--warm))}
.card-h .ic .i{width:1.25rem;height:1.25rem}
.card p{font-size:.82rem;line-height:1.5}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:.55rem 0 .5rem}
.tier{padding:.4rem .3rem .45rem;border-radius:1rem;text-align:center;background:rgba(185,167,245,.12);border:1px solid rgba(185,167,245,.38)}
.tier b{display:block;font:600 1.5rem/1.05 var(--display)}
.tier span{display:block;font-size:.72rem;color:var(--muted)}
.ctas{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.55rem}
.cta{display:flex;flex-direction:column;gap:.1rem;padding:.4rem .75rem .45rem;border-radius:1rem;border:1.5px dashed rgba(var(--warm),.7);background:rgba(var(--warm),.1);font-size:.74rem;line-height:1.35}
.cta b{font-size:.84rem;font-weight:800;line-height:1.25}
.cta span{color:var(--muted);font-weight:600}
.bul{display:grid;gap:.3rem;margin-top:.4rem}
.bul li{position:relative;padding-left:1rem;font-size:.8rem;line-height:1.45}
.bul li::before{content:"";position:absolute;left:.1rem;top:.62em;width:.38rem;height:.38rem;border-radius:50%;background:rgb(var(--warm))}
.bul li b{color:var(--text)}
.who{font-size:.74rem;line-height:1.3;color:var(--muted)}
.contact{margin-top:.45rem;font-size:.82rem;font-weight:700}

.maker{display:flex;align-items:center;gap:.9rem;padding:.65rem .95rem .75rem;border-radius:1.2rem;background:rgba(127,216,200,.09);border:1px solid rgba(127,216,200,.3)}
.maker .photo{display:block;flex:none;width:4.6rem;height:4.6rem;border-radius:50%;overflow:hidden;border:2px solid rgba(127,216,200,.55);background:#0b222b}
.maker .photo[hidden]{display:none}
.maker .photo img{width:100%;height:100%;object-fit:cover}
.maker h3{margin-bottom:.25rem}
.maker p{font-size:.8rem;line-height:1.42}

/* ---------- 6 · Basın ve arka kapak ---------- */
.press p.lead{font-size:.9rem;line-height:1.55}
.facts{display:grid;gap:.4rem;margin-top:.2rem}
.facts div{display:grid;grid-template-columns:5.6rem 1fr;gap:.6rem;padding:.5rem .75rem;border-radius:.9rem;background:var(--card);border:1px solid var(--card-b)}
.facts dt{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);padding-top:.12rem}
.facts dd{font-size:.82rem;line-height:1.4}
.back{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;padding-top:.8rem}
.back .logo{width:3.2rem;height:3.2rem;overflow:visible}
.back .tag{font:500 1.35rem/1.2 var(--display);color:var(--accent)}
.back .where{font-size:.84rem;font-weight:700}
.safety{padding:.7rem .9rem;border-radius:1rem;background:rgba(var(--warm),.09);border:1px solid rgba(var(--warm),.32);font-size:.78rem;line-height:1.5;text-align:left}
.safety b{color:rgb(var(--warm))}
.credit{font-size:.66rem;color:var(--muted)}

/* ---------- Dar ekran (telefon): tek sütun ---------- */
@container (max-width:30rem){
  .page{padding:1.6rem 1.1rem 1.8rem}
  .intro{grid-template-columns:1fr 6.4rem;gap:.8rem}
  .statement{font-size:1.7rem}
  .moments{grid-template-columns:1fr}
  .moment{display:grid;grid-template-columns:2.3rem 1fr;column-gap:.7rem}
  .moment .ic{grid-row:span 3}
  .head2{flex-direction:column;align-items:flex-start;gap:.3rem}
  .head2 p{text-align:left;max-width:none}
  .areas{grid-template-columns:1fr}
  .area,.area.half{grid-column:auto}
  .tiles,.tiles.pad4{grid-template-columns:repeat(2,1fr)}
  .area-note{grid-column:1/-1;padding:.2rem 0 0}
  .phones{gap:.5rem}
  .ticks{grid-template-columns:1fr}
  .ctas{grid-template-columns:1fr}
  .maker{align-items:flex-start}
  .maker .photo{width:3.6rem;height:3.6rem}
  .how ul{grid-template-columns:1fr}
  .facts div{grid-template-columns:1fr;gap:.1rem}
  .cover{min-height:38rem}
}

/* ---------- Hareket azaltma: hareketsiz kare ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important}
  .frame video,.pf video{display:none}
  .frame .still,.pf .still{display:block}
}

/* ---------- Baskı: A5, her bölüm bir sayfa ---------- */
@page{size:A5;margin:0}
@media print{
  html{font-size:calc(148mm / 37)}
  body{background:none;min-height:0}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;animation:none!important}
  .topbar,.screen-only{display:none!important}
  .booklet{display:block;padding:0}
  .page{width:148mm;max-width:none;height:210mm;margin:0;padding:1.7rem 1.7rem 1.6rem;border:0;border-radius:0;break-after:page;page-break-after:always;overflow:hidden}
  .page:last-child{break-after:auto;page-break-after:auto}
  video{display:none!important}
  .still{display:block!important}
  .watch{display:block}
  .cover{min-height:0}
}

.opts{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.5rem 0}
.opt{padding:.55rem .6rem .6rem;border-radius:1rem;background:rgba(255,255,255,.06);border:1px solid rgba(185,167,245,.35)}
.opt h3{font-size:.95rem}
.opt p{font-size:.74rem;line-height:1.35;margin-top:.1rem}
.opt .tiers{gap:.3rem;margin:.4rem 0 .4rem}
.opt .tier b{font-size:1.2rem}
.opt .tier span{font-size:.62rem}
.opt .cta{margin-top:0}
@container (max-width:30rem){.opts{grid-template-columns:1fr}}

#free{gap:.45rem}
.maker p{font-size:.78rem;line-height:1.38}
.maker{padding:.55rem .9rem .6rem}
.opt{padding:.5rem .55rem .5rem}
.bul{gap:.2rem}