.c-shell .wrap,.nav .wrap,footer .wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto}
@keyframes shine{0%,60%{left:-80%}100%{left:140%}}
@keyframes up{to{opacity:1;transform:translateY(0)}}
/* ============ TOKENS ============ */
:root{
  --cobalt:#2140F0; --cobalt-d:#1428B8; --cobalt-l:#DCE3FF;
  --coral:#FF5A4E; --coral-d:#E43F33; --coral-l:#FFE1DD;
  --mustard:#FFC531; --mustard-d:#E5A800; --mustard-l:#FFF1C2;
  --mint:#3EDDAE; --mint-d:#1FB98C; --mint-l:#D5F7EC;
  --ink:#141633; --ink-2:#3B3E5E; --muted:#6C6F8A;
  --cream:#FFF8EC; --paper:#FFFFFF;
  --r-xl:36px; --r-lg:28px; --r-md:20px; --r-sm:14px;
  --shadow:0 12px 40px -12px rgba(20,22,51,.18);
  --shadow-hard:6px 6px 0 var(--ink);
  --font-d:"Bricolage Grotesque","Sora",system-ui,sans-serif;
  --font-b:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
}
.wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto}
@media (max-width:640px){.wrap{width:calc(100% - 32px)}}

/* ============ BACKGROUND BLOBS ============ */
.blobs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform;animation:drift 26s ease-in-out infinite alternate}
.blob.b1{width:52vw;height:52vw;max-width:680px;max-height:680px;background:var(--cobalt-l);top:-15%;left:-12%}
.blob.b2{width:44vw;height:44vw;max-width:560px;max-height:560px;background:var(--coral-l);top:20%;right:-14%;animation-delay:-8s;animation-duration:31s}
.blob.b3{width:40vw;height:40vw;max-width:520px;max-height:520px;background:var(--mustard-l);bottom:-12%;left:20%;animation-delay:-15s;animation-duration:36s}
.blob.b4{width:34vw;height:34vw;max-width:440px;max-height:440px;background:var(--mint-l);bottom:22%;right:18%;animation-delay:-4s;animation-duration:29s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}33%{transform:translate(6vw,-4vh) scale(1.08)}66%{transform:translate(-4vw,6vh) scale(.95)}100%{transform:translate(3vw,3vh) scale(1.04)}}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:50;padding:14px 0;transition:padding .3s}
.nav .wrap{width:min(1600px,calc(100% - 40px))}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:14px}
.logo{display:flex;align-items:center;flex:none;background:#fff;border:2px solid var(--ink);border-radius:50%;padding:4px;box-shadow:var(--shadow)}
.logo img{height:60px;width:60px;margin:0;border-radius:50%}
.menu{display:flex;gap:4px;align-items:center;background:rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:2px solid var(--ink);border-radius:999px;padding:6px 8px;box-shadow:var(--shadow)}
.menu a{padding:9px 11px;border-radius:999px;font-weight:600;font-size:.9rem;position:relative;white-space:nowrap;transition:background .25s,color .25s,transform .25s var(--ease-pop)}
.menu a:hover{background:var(--ink);color:#fff;transform:translateY(-2px) rotate(-1.5deg)}
.nav .btn,.mobile-menu .btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;border-radius:999px;padding:12px 20px;border:2px solid var(--ink);position:relative;overflow:hidden;transition:transform .35s var(--ease-pop),box-shadow .35s,background .3s}
.nav .btn svg,.mobile-menu .btn svg{width:20px;height:20px;flex:none}
.nav .btn-wa,.mobile-menu .btn-wa{background:#25D366;color:var(--ink);box-shadow:var(--shadow-hard)}
.nav .btn-wa:hover,.mobile-menu .btn-wa:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.nav .btn-wa:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.nav .btn .shine{position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 4s ease-in-out infinite}
@keyframes shine{0%,60%{left:-80%}100%{left:140%}}
.nav .btn{padding:10px 16px;font-size:.9rem;flex:none;white-space:nowrap}
.burger{display:none;width:46px;height:46px;border-radius:50%;background:var(--ink);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{width:20px;height:2.5px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;inset:0;z-index:49;background:var(--cobalt);color:#fff;padding:110px 24px 40px;flex-direction:column;gap:6px;overflow:auto}
.mobile-menu.open{display:flex}
.mobile-menu a.mlink{font-family:var(--font-d);font-size:clamp(1.45rem,5.8vw,2rem);font-weight:800;padding:7px 0;border-bottom:2px solid rgba(255,255,255,.2);opacity:0;transform:translateY(20px);animation:up .5s var(--ease-out) forwards}
.mobile-menu.open a.mlink:nth-child(1){animation-delay:.05s}.mobile-menu.open a.mlink:nth-child(2){animation-delay:.1s}.mobile-menu.open a.mlink:nth-child(3){animation-delay:.15s}.mobile-menu.open a.mlink:nth-child(4){animation-delay:.2s}.mobile-menu.open a.mlink:nth-child(5){animation-delay:.25s}.mobile-menu.open a.mlink:nth-child(6){animation-delay:.3s}.mobile-menu.open a.mlink:nth-child(7){animation-delay:.35s}
.mobile-menu .btn{margin-top:24px;align-self:flex-start;opacity:0;animation:up .5s .35s var(--ease-out) forwards}
.mobile-menu .mfoot{margin-top:auto;font-size:.9rem;opacity:.8}
@keyframes up{to{opacity:1;transform:translateY(0)}}
@media (max-width:1460px){.nav .ara-dugme .ara-yazi,.nav-in>.ara-dugme kbd{display:none}.nav-in>.ara-dugme{padding:9px;border-radius:50%}}
/* 12 baslikli menu 1440px dizustu ekranda WhatsApp butonunun yazisini kirpiyordu;
   bu genislikte baslik araliklari biraz daraltilir (2 Eyl 2026). */
@media (max-width:1500px){.menu a{padding:9px 8px;font-size:.86rem}}
@media (max-width:1320px){.menu a{padding:8px 8px;font-size:.84rem}.logo img{height:50px;width:50px}}
@media (max-width:1180px){.menu a{padding:8px 6px;font-size:.8rem}}
/* Menu + arama + WhatsApp yan yana sigmiyordu: WhatsApp butonu eziliyor ve
   yazisi kirpiliyordu. Bu genislikte hamburger menuye gecilir.
   (2 Eyl 2026: menuye "Oyunlar" eklendi, baslik sayisi 12 oldu; 1090px'de
   menu tasiyordu, esik 1240px'e cekildi.) */
@media (max-width:1240px){.menu,.nav-in>.btn-wa{display:none}.burger{display:flex}.logo img{height:48px;width:48px}}

/* ============ FOOTER ============ */
footer{padding:30px 0 40px}
.foot{background:#fff;border:2px solid var(--ink);border-radius:var(--r-lg);padding:32px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:30px;box-shadow:var(--shadow-hard)}
.foot img{height:96px;width:auto;margin:-10px 0 6px -8px}
.foot p{font-size:.92rem;color:var(--ink-2)}
.foot h2,.foot h3,.foot h4{font-family:var(--font-d);font-size:1rem;margin-bottom:12px;font-weight:800}
.foot ul li{margin-bottom:8px}
.foot ul a{font-size:.94rem;font-weight:600;position:relative}
.foot ul a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--coral);transition:width .3s}
.foot ul a:hover::after{width:100%}
.foot-soc{display:flex;flex-wrap:wrap;gap:8px}
.foot-soc a{width:40px;height:40px;border-radius:12px;border:2px solid var(--ink);display:grid;place-items:center;background:#fff;transition:transform .3s var(--ease-pop),background .3s}
.foot-soc a:hover{transform:translateY(-4px) rotate(-6deg);background:var(--mustard)}
.foot-soc svg{width:20px;height:20px}
.foot-soc a[data-eksik]{opacity:.55}
.copy{margin-top:16px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:.85rem;color:var(--muted);padding:0 8px}
@media (max-width:820px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot{grid-template-columns:1fr;padding:24px}}

/* ============ WA FLOAT ============ */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:40;width:60px;height:60px;border-radius:50%;background:#25D366;border:2px solid var(--ink);display:grid;place-items:center;box-shadow:4px 4px 0 var(--ink);transition:transform .35s var(--ease-pop)}
.wa-float:hover{transform:scale(1.1) rotate(-8deg)}
.wa-float::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #25D366;animation:ring 2.2s ease-out infinite}
@keyframes ring{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.5);opacity:0}}
.wa-float svg{width:30px;height:30px}
/* Telefonda buton metnin üstüne biniyordu: küçültüldü, kenara çekildi ve
   arkasına yumuşak bir hâle kondu ki altındaki yazı okunmaya devam etsin. */
@media(max-width:760px){
  .wa-float{width:52px;height:52px;right:12px;bottom:14px;box-shadow:3px 3px 0 var(--ink),0 0 0 12px rgba(255,248,236,.75)}
  .wa-float svg{width:26px;height:26px}
  .wa-float::before{animation:none}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .h1 .ch,.hero p.lead,.hero-cta,.hero-note,.portrait,.badge,.scroll-hint,.mobile-menu a.mlink,.mobile-menu .btn{opacity:1;transform:none}
  .h1 .hl::before{transform:scaleX(1)}
  .h1 .hl{color:#fff}
  .reveal{opacity:1;transform:none}
  .draw{stroke-dashoffset:0}
  .books i{transform:scaleY(1)}
  .marquee-track{animation:none}
  .blob{animation:none}
}

footer .reveal{opacity:1;transform:none}
.nav,.nav *{font-family:var(--font-b)}
.nav .menu a,.mobile-menu a.mlink{font-family:var(--font-d)}

/* --- Yapışkan menü çakışması ---
   Alt şeritler sabit bir "top" ile yapıştırılmıştı ve üst menüyle üst üste biniyordu.
   Menü yüksekliği c-yapisma.js tarafından ölçülüp --nav-h olarak yazılıyor. */
:root{--nav-h:104px;--capa-bosluk:120px}
.subnav,.access-banner{top:var(--nav-h)!important}
html{scroll-padding-top:var(--capa-bosluk)}

/* menü açıkken sayfa şeritleri menünün üstüne çıkmasın */
body:has(.mobile-menu.open) .access-banner,body:has(.mobile-menu.open) .subnav{z-index:1!important}

/* --- Bir bolume tiklayinca baslik sabit menunun altinda kalmasin --- */
html{scroll-padding-top:104px}
@media(max-width:1240px){html{scroll-padding-top:88px}}

/* --- Dokunma alanlari en az 32px yuksek olsun (mobil) --- */
@media(max-width:900px){
  .site-footer a,.foot a{display:inline-block;padding:6px 0;min-height:32px}
  .sv-crumb a{display:inline-block;padding:5px 2px}
}