/* ============================================================
   YAY STUDIO — tasarım sistemi (style.css)
   PHP MVC'de bu dosya public/css/style.css olarak servis edilir.
   Renk kodlu reformer yaylarından türetilmiş palet:
   sarı = hafif, kobalt = orta-hafif, mercan = orta, yeşil = sert
   ============================================================ */
:root{
  --chalk:#FBF6EF;
  --sand:#E7DED2;
  --ink:#14101A;
  --y:#FFC531;
  --b:#2B59FF;
  --r:#FF4A3D;
  --g:#00BE8E;
  --ink-70:rgba(20,16,26,.7);
  --ink-45:rgba(20,16,26,.45);
  --rail:86px;
  --sh:12px;
}
/* küçük ekranlar (netbook vb.) için kök ölçü 15px — tüm rem tabanlı
   ölçüler orantılı küçülür; geniş ekranlarda ölçek geri açılır */
html{ font-size:15px; scroll-behavior:smooth; }
@media (min-width:1600px){ html{ font-size:16px; } }

*{ -webkit-tap-highlight-color:transparent; }
body{
  font-family:'Poppins',system-ui,sans-serif;
  background:var(--chalk);
  color:var(--ink);
  font-weight:400;
  font-size:.95rem;
  overflow-x:hidden;
  overflow-wrap:break-word;
  padding-left:var(--rail);
}
body::before{ /* kağıt dokusu: ince tarama çizgileri */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.35;
  background-image:repeating-linear-gradient(0deg,rgba(20,16,26,.05) 0 1px,transparent 1px 4px);
  mix-blend-mode:multiply;
}
::selection{ background:var(--y);color:var(--ink); }
img{ max-width:100%; }
h1,h2,h3,h4,h5{ font-weight:800; letter-spacing:-.03em; line-height:1.05; margin:0; }
p{ font-weight:300; line-height:1.75; }
a{ color:inherit; }
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--b); outline-offset:3px;
}
.skip{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--ink); color:#fff; padding:.8rem 1.2rem; }
.skip:focus{ left:calc(var(--rail) + 12px); top:12px; }
main{ position:relative; z-index:2; }
section{ position:relative; z-index:2; }

/* ---------- tipografi ölçeği (1.24 oran, netbook revizyonu) ---------- */
.d1{ font-size:clamp(2.4rem,9.5vw,8.5rem); font-weight:900; line-height:.8; letter-spacing:-.05em; white-space:nowrap; }
.d2{ font-size:clamp(1.65rem,3.9vw,3.2rem); }
.d3{ font-size:clamp(1.2rem,1.9vw,1.75rem); }
.lead-soft{ font-size:clamp(.95rem,1.05vw,1.05rem); font-weight:300; }
.kicker{ font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600; }
.tag{
  font-size:.64rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.6rem;
}
.tag::before{ content:""; width:24px; height:3px; background:var(--ink); display:block; flex:none; }
.tag.no-rule::before{ display:none; }

/* ---------- "yay kancası" paneli (kart değil) ---------- */
.slab{
  position:relative; background:#fff; border:2px solid var(--ink);
  padding:1.35rem 1.2rem 1.5rem;
  color:var(--ink);
}
.slab.shadow-y{ box-shadow:var(--sh) var(--sh) 0 var(--y); }
.slab.shadow-b{ box-shadow:var(--sh) var(--sh) 0 var(--b); }
.slab.shadow-r{ box-shadow:var(--sh) var(--sh) 0 var(--r); }
.slab.shadow-g{ box-shadow:var(--sh) var(--sh) 0 var(--g); }
.slab.shadow-ink{ box-shadow:var(--sh) var(--sh) 0 var(--ink); }
.slab.fold::after{ /* kıvrılmış köşe */
  content:""; position:absolute; top:-2px; right:-2px; width:30px; height:30px;
  background:linear-gradient(225deg,var(--chalk) 50%,var(--ink) 50%,var(--ink) 52%,var(--y) 52%);
}
.slab.tilt-l{ transform:rotate(-1.1deg); transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
.slab.tilt-r{ transform:rotate(1.1deg); transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
.slab.tilt-l:hover,.slab.tilt-r:hover{ transform:rotate(0deg) translateY(-8px); box-shadow:16px 16px 0 var(--ink); }

/* ---------- ray + kanca ---------- */
.rail-track{ position:relative; }
.rail-track::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--ink);
}
.hang{ position:relative; padding-top:52px; }
.hang::before{ /* askı teli */
  content:""; position:absolute; top:4px; left:50%; width:3px; height:30px; background:var(--ink); transform:translateX(-50%);
}
.hang::after{ /* kanca */
  content:""; position:absolute; top:30px; left:50%; width:18px; height:18px; border:3px solid var(--ink);
  border-radius:50%; background:var(--chalk); transform:translate(-50%,-6px);
}

/* ---------- butonlar ---------- */
.btn-ink{
  display:inline-flex; align-items:center; gap:.6rem; background:var(--ink); color:var(--chalk);
  border:2px solid var(--ink); padding:.85rem 1.35rem; font-weight:600; font-size:.76rem;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none; line-height:1.2;
  box-shadow:6px 6px 0 var(--y); transition:transform .25s, box-shadow .25s, background .25s, color .25s;
}
.btn-ink:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--r); color:var(--chalk); }
.btn-ghost{
  display:inline-flex; align-items:center; gap:.6rem; background:transparent; color:var(--ink);
  border:2px solid var(--ink); padding:.85rem 1.35rem; font-weight:600; font-size:.76rem;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none; line-height:1.2;
  transition:background .25s,color .25s,transform .25s;
}
.btn-ghost:hover{ background:var(--ink); color:var(--chalk); transform:translateY(-3px); }
.btn-mini{
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  border:2px solid var(--ink); background:#fff; color:var(--ink); padding:.5rem .85rem; cursor:pointer;
  text-decoration:none; display:inline-block; transition:background .2s,color .2s;
}
.btn-mini:hover{ background:var(--ink); color:#fff; }

/* ---------- sol yay rayı (masaüstü) ---------- */
.spring-rail{
  position:fixed; left:0; top:0; bottom:0; width:var(--rail); z-index:60;
  background:var(--chalk); border-right:2px solid var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:1.1rem 0 1.2rem;
}
.rail-logo{ display:block; }
.rail-segs{ display:flex; flex-direction:column; gap:10px; align-items:center; flex:1; justify-content:center; }
.seg{
  width:14px; height:clamp(28px,7vh,60px); border:2px solid var(--ink); background:var(--sand);
  position:relative; transition:height .45s cubic-bezier(.2,.8,.2,1), background .35s; cursor:pointer; padding:0;
}
.seg[data-color="y"]{ background:var(--y); }
.seg[data-color="b"]{ background:var(--b); }
.seg[data-color="r"]{ background:var(--r); }
.seg[data-color="g"]{ background:var(--g); }
.seg.active{ height:clamp(54px,13vh,110px); }
.seg span{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(90deg);
  font-size:.55rem; letter-spacing:.16em; font-weight:600; white-space:nowrap; text-transform:uppercase;
  opacity:0; transition:opacity .3s; color:var(--ink); pointer-events:none;
}
.seg.active span{ opacity:1; }
.rail-scroll{ writing-mode:vertical-rl; font-size:.56rem; letter-spacing:.28em; text-transform:uppercase; font-weight:600; color:var(--ink-45); }

/* ---------- header ---------- */
.top-strip{
  background:var(--ink); color:var(--chalk); font-size:.64rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.45rem 0; font-weight:500; position:relative; z-index:2;
}
.top-strip a{ color:var(--chalk); text-decoration:none; }
.top-strip a:hover{ color:var(--y); }
.nav-wrap{ position:sticky; top:0; z-index:55; background:var(--chalk); border-bottom:2px solid var(--ink); }
.navbar{ padding:.6rem 0; }
.brand-name{ font-weight:900; font-size:1.25rem; letter-spacing:-.04em; line-height:1; }
.brand-sub{ font-size:.52rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--ink-45); }
.nav-link-y{
  position:relative; text-decoration:none; font-size:.72rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; padding:.45rem 0; margin-left:1.6rem; display:inline-block; white-space:nowrap;
}
.nav-link-y::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--r); transition:width .35s cubic-bezier(.2,.8,.2,1);
}
.nav-link-y:hover::after,.nav-link-y[aria-current="page"]::after{ width:100%; }
.nav-link-y[aria-current="page"]{ color:var(--r); }
.navbar-toggler{ border:2px solid var(--ink); border-radius:0; padding:.35rem .6rem; }
.offcanvas{ background:var(--chalk); border-right:2px solid var(--ink); }
.offcanvas .nav-link-y{ margin:0 0 1.1rem; font-size:1rem; letter-spacing:.06em; white-space:normal; }

/* ---------- bölümler ---------- */
.band{ padding:clamp(3.2rem,7vw,6rem) 0; }
.band-ink{ background:var(--ink); color:var(--chalk); }
.band-sand{ background:var(--sand); }
.rule{ height:3px; background:var(--ink); }

/* diyagonal renk bandı */
.diag-band{
  height:24px; background:repeating-linear-gradient(115deg,var(--y) 0 60px,var(--r) 60px 120px,var(--b) 120px 180px,var(--g) 180px 240px);
  border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);
}
.marquee{
  overflow:hidden; background:var(--y); border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); padding:.6rem 0;
}
.marquee ul{ display:flex; gap:2.5rem; list-style:none; margin:0; padding:0; white-space:nowrap; animation:slide 26s linear infinite; }
.marquee li{ font-size:.76rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; display:flex; align-items:center; gap:2.5rem; }
@keyframes slide{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- HERO ---------- */
.hero-word span{ display:inline-block; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.hero-word span:hover{ transform:translateY(-10px) rotate(-3deg); }
.hw-y{ color:var(--y); -webkit-text-stroke:2.5px var(--ink); }
.hw-b{ color:var(--b); -webkit-text-stroke:2.5px var(--ink); }
.hw-r{ color:var(--r); -webkit-text-stroke:2.5px var(--ink); }
.hw-g{ color:var(--g); -webkit-text-stroke:2.5px var(--ink); }

/* ---------- NEFES PACER (imza an) ---------- */
.pacer{
  background:var(--ink); color:var(--chalk); border:2px solid var(--ink);
  box-shadow:var(--sh) var(--sh) 0 var(--y); padding:1.6rem 1.3rem 1.3rem; text-align:center; position:relative; overflow:hidden;
}
.pacer-orb{
  position:relative; width:min(64vw,270px); aspect-ratio:1; margin:1rem auto 1rem;
  display:flex; align-items:center; justify-content:center;
}
.orb-ring{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(var(--y) 0 25%,var(--b) 25% 50%,var(--r) 50% 75%,var(--g) 75% 100%);
  transition:transform 1s linear; transform:scale(.62);
}
.orb-ring::after{
  content:""; position:absolute; inset:12px; border-radius:50%; background:var(--ink);
}
.orb-core{
  position:relative; z-index:2; width:64%; aspect-ratio:1; border-radius:50%;
  border:2px solid rgba(251,246,239,.35); display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%,rgba(255,197,49,.16),transparent 70%);
}
.orb-label{ font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; font-weight:600; color:var(--y); }
.orb-count{ font-size:clamp(2.2rem,6vw,2.9rem); font-weight:900; line-height:1; }
.orb-cycle{ font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(251,246,239,.55); }
.pacer-meta{ display:flex; justify-content:center; gap:1.1rem; font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(251,246,239,.6); }
.pacer .btn-mini{ background:transparent; color:var(--chalk); border-color:var(--chalk); }
.pacer .btn-mini:hover{ background:var(--y); color:var(--ink); border-color:var(--y); }

/* ---------- yay direnç lejantı ---------- */
.spring-item{
  border:2px solid var(--ink); background:#fff; padding:.9rem; text-align:left; cursor:pointer;
  width:100%; transition:transform .3s, box-shadow .3s, background .3s;
}
.spring-item:hover,.spring-item[aria-pressed="true"]{ transform:translateY(-6px); box-shadow:8px 8px 0 var(--ink); }
.spring-item[aria-pressed="true"]{ background:var(--chalk); }
.spring-bar{ height:14px; border:2px solid var(--ink); }

/* ---------- swiper ---------- */
.swiper{ padding-bottom:2.6rem; }
.swiper-slide{ height:auto; }
.swiper-button-next,.swiper-button-prev{
  width:48px; height:48px; border:2px solid var(--ink); background:var(--chalk); color:var(--ink); top:auto; bottom:0;
  transition:background .25s,color .25s;
}
.swiper-button-next:hover,.swiper-button-prev:hover{ background:var(--ink); color:var(--chalk); }
.swiper-button-next::after,.swiper-button-prev::after{ font-size:.9rem; font-weight:900; }
.swiper-pagination-bullet{ border-radius:0; width:20px; height:8px; background:var(--ink); opacity:.25; }
.swiper-pagination-bullet-active{ opacity:1; background:var(--r); }
.ph{ position:relative; overflow:hidden; border:2px solid var(--ink); background:var(--sand); display:block; }
.ph img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.ph:hover img{ transform:scale(1.06); }
.ph .ph-cap{
  position:absolute; left:0; bottom:0; background:var(--ink); color:var(--chalk);
  font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; padding:.45rem .7rem; font-weight:600;
}
.tint-y::after,.tint-b::after,.tint-r::after,.tint-g::after{
  content:""; position:absolute; inset:0; mix-blend-mode:multiply; opacity:.22; pointer-events:none;
}
.tint-y::after{ background:var(--y); } .tint-b::after{ background:var(--b); }
.tint-r::after{ background:var(--r); } .tint-g::after{ background:var(--g); }

/* ---------- takip çizelgesi ---------- */
.week-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.day{
  border:2px solid var(--ink); background:#fff; min-height:118px; padding:.5rem .5rem; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; justify-content:space-between; transition:background .3s,transform .3s,box-shadow .3s;
}
.day:hover{ transform:translateY(-5px); box-shadow:6px 6px 0 var(--ink); }
.day[data-done="true"]{ background:var(--g); color:var(--ink); }
.day[data-done="true"] .day-task{ text-decoration:line-through; text-decoration-thickness:2px; }
.day-d{ font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
.day-task{ font-size:.74rem; font-weight:500; line-height:1.25; }
.day-n{ font-size:1.35rem; font-weight:900; line-height:1; }
.progress-ring{ transform:rotate(-90deg); }
.mtable{ width:100%; border-collapse:collapse; }
.mtable th,.mtable td{ border:2px solid var(--ink); padding:.5rem .6rem; font-size:.8rem; }
.mtable th{ background:var(--ink); color:var(--chalk); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; }
.mtable tbody th{ background:#fff; color:var(--ink); letter-spacing:0; text-transform:none; font-size:.82rem; }
.field-y{
  width:100%; border:2px solid var(--ink); background:#fff; padding:.65rem .75rem; font-family:inherit; font-size:.85rem;
  border-radius:0; color:var(--ink); -webkit-appearance:none; appearance:none; background-clip:padding-box;
}
select.field-y{ -webkit-appearance:auto; appearance:auto; }
.field-y:focus{ background:#FFFBEF; }
label.lbl{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; display:block; margin-bottom:.3rem; }

/* ---------- zaman çizelgesi ---------- */
.tl{ position:relative; padding-left:2.2rem; }
.tl::before{ content:""; position:absolute; left:9px; top:6px; bottom:6px; width:3px; background:var(--ink); }
.tl-item{ position:relative; padding-bottom:1.9rem; }
.tl-item::before{
  content:""; position:absolute; left:-2.2rem; top:4px; width:20px; height:20px; border:3px solid var(--ink); background:var(--y);
}
.tl-item[data-c="b"]::before{ background:var(--b); }
.tl-item[data-c="r"]::before{ background:var(--r); }
.tl-item[data-c="g"]::before{ background:var(--g); }

/* ---------- galeri mozaiği ---------- */
.mosaic{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:140px; gap:12px; }
.mosaic .ph.w2{ grid-column:span 2; }
.mosaic .ph.h2{ grid-row:span 2; }
.mfp-img-hold{ border:2px solid var(--ink); }

/* ---------- SSS ---------- */
.acc-btn{
  width:100%; text-align:left; background:transparent; border:0;
  padding:1.15rem 2.8rem 1.15rem 0; font-size:clamp(.95rem,1.5vw,1.15rem); font-weight:600; position:relative; letter-spacing:-.01em;
}
.acc-btn:hover{ color:var(--r); }
.acc-btn::after{
  content:"+"; position:absolute; right:.4rem; top:50%; transform:translateY(-50%); font-size:1.5rem; font-weight:400; transition:transform .35s;
}
.acc-btn[aria-expanded="true"]::after{ content:"–"; }

/* ---------- footer ---------- */
footer{ background:var(--ink); color:var(--chalk); position:relative; z-index:2; }
footer a{ color:var(--chalk); text-decoration:none; }
footer a:hover{ color:var(--y); }
footer .f-title{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--y); font-weight:600; margin-bottom:1rem; }
.social-btn{
  width:42px; height:42px; border:2px solid var(--chalk); display:inline-flex; align-items:center; justify-content:center; color:var(--chalk);
  transition:background .25s,color .25s,transform .25s;
}
.social-btn:hover{ background:var(--y); color:var(--ink); border-color:var(--y); transform:translateY(-4px); }
#nMail{ color:var(--chalk); }
#nMail::placeholder{ color:rgba(251,246,239,.55); }
#nMail:focus{ background:rgba(251,246,239,.08); }

/* ---------- mobil aksiyon çubuğu ---------- */
.mobile-cta{ display:none; }

/* ============================================================
   KÜÇÜK EKRAN REVİZYONLARI
   netbook / küçük laptop (992–1199px) → sıkışmaları çözen sıkılaştırma
   ============================================================ */
@media (max-width:1199.98px){
  :root{ --rail:72px; --sh:9px; }
  .d1{ font-size:clamp(2.3rem,8.6vw,6.4rem); }
  .hw-y,.hw-b,.hw-r,.hw-g{ -webkit-text-stroke:2px var(--ink); }
  .nav-link-y{ margin-left:1rem; font-size:.66rem; }
  .nav-wrap .btn-ink{ padding:.7rem .95rem; font-size:.68rem; }
  .band{ padding:clamp(2.8rem,6vw,4.5rem) 0; }
  .week-grid{ grid-template-columns:repeat(4,1fr); }
  .mosaic{ grid-template-columns:repeat(3,1fr); grid-auto-rows:130px; }
  .seg{ width:12px; }
  .seg span{ font-size:.5rem; }
}

/* tablet ve mobil (≤991px) */
@media (max-width:991.98px){
  body{ padding-left:0; padding-bottom:66px; }
  .spring-rail{ display:none; }
  .week-grid{ grid-template-columns:repeat(2,1fr); }
  .mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; }
  .mobile-cta{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70; border-top:3px solid var(--ink); background:var(--chalk);
  }
  .mobile-cta a{ flex:1; text-align:center; padding:.95rem .4rem; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; text-decoration:none; color:var(--ink); }
  .mobile-cta a:first-child{ background:var(--ink); color:var(--chalk); }
  .mobile-cta a:last-child{ background:var(--y); border-left:3px solid var(--ink); }
  .slab.tilt-l,.slab.tilt-r{ transform:none; }
}

/* dar mobil (≤575px) */
@media (max-width:575.98px){
  :root{ --sh:8px; }
  body{ font-size:.9rem; }
  .d1{ font-size:clamp(2rem,11vw,3.4rem); }
  .hw-y,.hw-b,.hw-r,.hw-g{ -webkit-text-stroke:1.5px var(--ink); }
  .slab{ padding:1.1rem .95rem 1.2rem; }
  .week-grid{ grid-template-columns:1fr 1fr; }
  .top-strip .ts-hide{ display:none; }
}

/* ---------- giriş animasyonu ---------- */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none!important; transition:none!important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}