/* ============================================================
   c-hareket.css — dokunulabilirlik katmanı
   ------------------------------------------------------------
   Kural: hiçbir şey durup dururken kıpırdamaz. Hareket yalnızca
   ziyaretçinin hareketine (üzerine gelme, tıklama, kaydırma)
   karşılık olarak çıkar.

   SAKİN MOD: Tahsin'in PC'sinde Windows animasyonları kapalı
   (prefers-reduced-motion: reduce). O durumda hareketi silmiyoruz,
   YERİNE ANINDA GÖRÜNÜR BİR DURUM DEĞİŞİKLİĞİ koyuyoruz —
   gölge derinleşir, çerçeve renklenir, ikinci kare donuk gösterilir.
   Hareket kaldırılan yerde bileşeni SİLME kuralı: bkz. giriş perdesi.
   ============================================================ */

/* ---------- 1. BUTONLAR ---------- */

/* Sürekli dönen parıltı DURDURULDU: artık yalnızca üzerine gelince
   bir kez geçer. Önceki hâli 4 sn'de bir her butonda tekrarlıyordu. */
.btn .shine{animation:none;left:-80%}
.btn:hover .shine,.btn:focus-visible .shine{animation:shine 1.1s ease-out 1}

/* Ortak yükselme + gölge. .btn-wa/.btn-ink/.btn-ghost'un kendi
   kuralları zaten var; buradaki eksik kalanları (.btn, .btn-test)
   tamamlıyor ve hepsine basılma hareketi ekliyor. */
.btn{transition:transform .28s var(--ease-pop),box-shadow .28s,background .3s,color .3s}
.btn:hover{transform:translate(-2px,-3px)}
.btn:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}

/* Gölge üzerine gelince BELİRGİNLEŞSİN.
   c-sinav.css (c.css'ten sonra yükleniyor) .btn-ink:hover gölgesini
   4px'ten 2px'e KÜÇÜLTÜYORDU; buton yükselirken gölgesinin küçülmesi
   ters bir his veriyor. Burada hepsi tek kurala bağlanıyor: yükselme
   ne kadarsa gölge o kadar büyüyor. Renkler değişmiyor — sınav
   sayfalarında kendi mercanı, diğer sayfalarda kendi rengi kalıyor. */
.btn-ink:hover{box-shadow:8px 8px 0 var(--sv-mercan,var(--coral))}
.btn-ghost:hover{box-shadow:8px 8px 0 var(--mustard)}
.btn-wa:hover{box-shadow:8px 8px 0 var(--ink)}
.btn-test:hover{box-shadow:8px 8px 0 var(--ink)}
/* Sakin modda da aynı bilgi anında verilsin: gölge yine büyür. */
.sakin .btn-ink:hover{box-shadow:8px 8px 0 var(--sv-mercan,var(--coral))}
.sakin .btn-ghost:hover{box-shadow:8px 8px 0 var(--mustard)}
.sakin .btn-wa:hover,.sakin .btn-test:hover{box-shadow:8px 8px 0 var(--ink)}

/* Basılma: kısa, sert, geri yaylanmasız. */
.btn:active{transform:translate(2px,2px) scale(.985);transition-duration:.06s}
.btn-ink:active{box-shadow:2px 2px 0 var(--coral)}
.btn-ghost:active{box-shadow:2px 2px 0 var(--mustard)}
.btn-test:active,.btn:active{box-shadow:2px 2px 0 var(--ink)}
.btn-wa:active{box-shadow:2px 2px 0 var(--ink)}

/* İçindeki ok sağa ilerlesin. Yalnızca <i> ve .ar oklarına
   uygulanır — WhatsApp/oynat gibi anlamlı simgeler yerinde kalır. */
.btn i,.btn .ar,.arac-tumu-go i,.open .ar{display:inline-block;transition:transform .26s var(--ease-pop)}
.btn:hover i,.btn:hover .ar,.arac-tumu:hover .arac-tumu-go i{transform:translateX(6px)}
.btn:active i,.btn:active .ar{transform:translateX(9px)}

/* .go / .arac-go oklarına da basılma payı */
.sc:active .go svg{transform:translateX(9px) rotate(-20deg)}
.arac:active .arac-go i{transform:translateX(8px)}
.arac:active{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--cobalt);transition-duration:.06s}
.arac-ozel:active{box-shadow:6px 6px 0 var(--mustard)}

/* Kartlar da tıklanınca basılsın */
.card:active,.issue-row:active{transform:translate(1px,2px) scale(.995);transition-duration:.06s}

/* Sabit WhatsApp balonundaki sonsuz halka DURDURULDU:
   yalnızca üzerine gelince/odaklanınca tek bir dalga çıkar. */
.wa-float::before{animation:none;opacity:0}
.wa-float:hover::before,.wa-float:focus-visible::before{opacity:1;animation:ring 1.6s ease-out 2}
.wa-float:active{transform:scale(.94)}

/* Rozetlerin sürekli süzülmesi kısıldı: duruyorlar, üzerine gelince
   c.js'teki kısa sallanma zaten oynuyor. */
.badge{animation-name:pop}

/* ---------- 2. KAYDIRDIKÇA SAHNEYE GİRİŞ ---------- */

/* Süre 800 ms → 420 ms. "Kullanıcı içeriğin açılmasını beklemesin."
   Sıralı gecikme: c-hareket.js kardeşlere --i yazar, kart kart
   60 ms arayla gelirler; 6. karttan sonra gecikme büyümez. */
.reveal{transition-duration:.42s}
.reveal.in{transition-delay:calc(var(--i,0) * .06s)}
h1.reveal,h2.reveal,.sec-head h2.reveal{transform:translateY(22px)}

/* ---------- 3. DERGİ RAFI ---------- */

.raf-blok{padding:78px 0 84px}
.raf-ust{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:38px}
.raf-ust h2{font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.08;letter-spacing:-.03em;margin:0}
.raf-ust p{color:var(--ink-2);margin:8px 0 0;max-width:56ch}

/* Raf: kapaklar hafifçe üst üste durur. */
.raf{display:flex;align-items:flex-end;justify-content:center;gap:0;padding:10px 0 0;position:relative}
.raf-sayi{position:relative;flex:0 0 auto;width:clamp(120px,15vw,178px);margin-inline:calc(clamp(120px,15vw,178px) / -7);
  text-decoration:none;color:var(--ink);display:block;
  transition:transform .34s var(--ease-pop),filter .34s;will-change:transform}
.raf-sayi img{display:block;width:100%;height:auto;aspect-ratio:800/1132;object-fit:cover;
  border:2px solid var(--ink);border-radius:10px;background:var(--cream);
  box-shadow:6px 8px 0 rgba(20,22,51,.16);transition:box-shadow .34s}
.raf-sayi:nth-child(1){transform:rotate(-7deg) translateY(10px)}
.raf-sayi:nth-child(2){transform:rotate(-4deg) translateY(4px)}
.raf-sayi:nth-child(3){transform:rotate(-1.5deg)}
.raf-sayi:nth-child(4){transform:rotate(1.5deg)}
.raf-sayi:nth-child(5){transform:rotate(4deg) translateY(4px)}
.raf-sayi:nth-child(6){transform:rotate(7deg) translateY(10px)}

/* Üzerine gelinen sayı: yükselir, düzleşir, hepsinin önüne çıkar. */
.raf-sayi:hover,.raf-sayi:focus-visible{transform:rotate(0deg) translateY(-26px) scale(1.1);z-index:5}
.raf-sayi:hover img,.raf-sayi:focus-visible img{box-shadow:10px 14px 0 rgba(20,22,51,.22)}
.raf-sayi:focus-visible{outline:3px solid var(--cobalt);outline-offset:6px;border-radius:12px}
/* Komşular hafifçe kenara çekilsin ki öne çıkan sayı nefes alsın */
.raf-sayi:hover + .raf-sayi{transform:rotate(6deg) translate(12px,6px)}

/* Kapak altı künye — yalnızca öne çıkan sayıda okunur */
.raf-kunye{position:absolute;left:50%;bottom:-46px;transform:translateX(-50%);
  white-space:nowrap;background:var(--ink);color:#fff;font-weight:800;font-size:.78rem;
  padding:6px 12px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .24s}
.raf-sayi:hover .raf-kunye,.raf-sayi:focus-visible .raf-kunye{opacity:1}

/* Tıklayınca kapak büyüyerek okuma alanına dönüşür (c-hareket.js) */
.raf-sayi.aciliyor{transform:rotate(0) scale(1.5) translateY(-40px);z-index:9;transition:transform .34s cubic-bezier(.4,0,.2,1),opacity .34s;opacity:.15}

.raf-alt{display:flex;justify-content:center;margin-top:64px}

/* Telefonda: dokunarak ve yana kaydırarak */
@media (max-width:760px){
  .raf{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:16px 4vw 34px;gap:0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .raf::-webkit-scrollbar{display:none}
  .raf-sayi{width:44vw;max-width:210px;margin-inline:-14px;scroll-snap-align:center}
  /* Telefonda eğik durmasınlar, okunmaz oluyor */
  .raf-sayi,.raf-sayi:nth-child(n){transform:rotate(-3deg)}
  .raf-sayi:active{transform:rotate(0) translateY(-10px) scale(1.04)}
  .raf-kunye{opacity:1;bottom:-34px;font-size:.72rem}
  .raf-blok{padding:56px 0 62px}
  .raf-alt{margin-top:44px}
}

/* ---------- 4. KİTAP KAPAKLARI ---------- */
/* Gerçek kapaklar üst üste; üzerine gelince kapak hafifçe dönüp
   sırtını gösterir. Sırt görseli yok — sırt CSS ile kuruluyor. */
.kitap-raf{display:flex;justify-content:center;align-items:flex-end;gap:0;margin:10px 0 22px;perspective:900px}
.kitap-tek{position:relative;width:clamp(62px,8vw,98px);margin-inline:-12px;transform-style:preserve-3d;
  transition:transform .42s var(--ease-pop);will-change:transform}
.kitap-tek img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;
  border:2px solid var(--ink);border-radius:6px;box-shadow:4px 5px 0 rgba(20,22,51,.18);backface-visibility:hidden}
/* Sırt: kapağın sol kenarına dik duran ince yüzey */
.kitap-tek::before{content:"";position:absolute;top:0;left:0;width:14px;height:100%;
  background:linear-gradient(90deg,var(--ink),rgba(20,22,51,.72));border:2px solid var(--ink);
  border-radius:6px 2px 2px 6px;transform:rotateY(-78deg);transform-origin:left center;
  opacity:0;transition:opacity .42s}
/* Ziyaretçi ince kitap şeridinin değil, kartın üzerine geliyor: iki durumda
   da aynı hareket olsun diye tetik hem rafın hem kartın hover'ı. */
.kitap-raf:hover .kitap-tek,
.sc-book:hover .kitap-tek{transform:rotateY(-26deg) translateX(6px)}
.kitap-raf:hover .kitap-tek::before,
.sc-book:hover .kitap-tek::before{opacity:1}

/* ---------- 4b. UYGULAMANIN TELEFON GÖRSELİ ---------- */
/* Uygulama sayfalarındaki gerçek ekran görüntüleri (.ar-tel img).
   Üzerine gelince telefonda kısa bir ekran geçişi oynuyor: ekran
   sağdan kayarak geliyor, üstünden ince bir parlama geçiyor —
   uygulamayı açmış gibi. Tek seferlik, bitişi görselin kendi hâli.
   Tasarım değişmiyor: mevcut çerçeve, gölge ve yükselme duruyor. */
.ar-tel img{position:relative;z-index:0}
.ar-tel a,.ar-tel figure,.ar-tel span{position:relative}
@media (hover:hover) and (pointer:fine){
  .ar-tel img:hover{animation:arEkran .52s cubic-bezier(.2,.8,.2,1) 1}
}
@keyframes arEkran{
  0%  {clip-path:inset(0 0 0 62%);filter:brightness(1.1) saturate(1.1)}
  55% {clip-path:inset(0 0 0 0);filter:brightness(1.06) saturate(1.06)}
  100%{clip-path:inset(0 0 0 0);filter:none}
}
/* Sakin modda geçiş oynamaz: aynı bilgiyi anında görünür bir
   vurguyla veriyoruz — ekran öne çıkıyor, çerçevesi kobalt oluyor. */
.sakin .ar-tel img:hover{animation:none;transform:translateY(-6px) scale(1.02);
  border-color:var(--cobalt,#2140F0);box-shadow:5px 6px 0 var(--cobalt,#2140F0)}
@media (prefers-reduced-motion:reduce){
  html:not(.sakin) .ar-tel img:hover{animation-duration:.52s!important;animation-iteration-count:1!important}
}

/* ---------- 5. UYGULAMA LOGOSU ---------- */
/* Kart köşesinde uygulamanın kendi logosu; uygulama sayfalarındaki
   .ar-logo görünümünün aynısı (beyaz zemin, kalın çerçeve, sert gölge). */
.arac{overflow:hidden}
.arac-logo{position:absolute;top:16px;right:16px;width:56px;height:56px;
  object-fit:contain;padding:6px;
  border:2px solid var(--ink);border-radius:14px;background:#fff;
  box-shadow:3px 3px 0 var(--ink);pointer-events:none;
  transition:transform .34s var(--ease-pop),box-shadow .34s}
.arac:hover .arac-logo{transform:translateY(-3px) rotate(-4deg);box-shadow:5px 6px 0 var(--ink)}
/* Logo başlığın üstüne binmesin */
.arac h3,.arac .arac-alt{padding-right:66px}
/* Etikette padding yerine boşluk: renkli kutu logonun altına girmesin */
.arac-etiket{margin-right:66px}
@media (max-width:520px){
  .arac-logo{width:48px;height:48px;top:14px;right:14px;padding:5px;border-radius:12px}
  .arac h3,.arac .arac-alt{padding-right:56px}
  .arac-etiket{margin-right:56px}
}

/* ---------- 6. WHATSAPP İLETİŞİM PENCERESİ ---------- */
.wa-kutu{position:fixed;right:18px;bottom:90px;z-index:41;width:min(300px,calc(100vw - 36px));
  background:#fff;border:2px solid var(--ink);border-radius:18px;box-shadow:7px 7px 0 var(--ink);
  padding:18px 18px 14px;opacity:0;transform:translateY(14px) scale(.96);pointer-events:none;
  transform-origin:bottom right;transition:opacity .26s ease,transform .26s var(--ease-pop)}
.wa-kutu.acik{opacity:1;transform:none;pointer-events:auto}
.wa-kutu h3{font-family:var(--font-d);font-size:1.06rem;line-height:1.25;margin:0 0 4px;letter-spacing:-.01em}
.wa-kutu .wa-alt{font-size:.82rem;color:var(--ink-2);margin:0 0 14px}
.wa-kutu button.wa-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;margin-bottom:8px;background:var(--cream);color:var(--ink);border:2px solid var(--ink);
  border-radius:12px;padding:11px 14px;font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;
  text-align:left;box-shadow:3px 3px 0 var(--ink);
  transition:transform .2s var(--ease-pop),box-shadow .2s,background .2s}
.wa-kutu button.wa-sec i{font-style:normal;transition:transform .22s var(--ease-pop)}
.wa-kutu button.wa-sec:hover{background:#25D366;transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.wa-kutu button.wa-sec:hover i{transform:translateX(5px)}
.wa-kutu button.wa-sec:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);transition-duration:.06s}
.wa-kutu button.wa-sec:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}
.wa-kapat{position:absolute;top:8px;right:10px;background:none;border:0;font-size:1.35rem;line-height:1;
  cursor:pointer;color:var(--ink-2);padding:4px 6px;border-radius:8px}
.wa-kapat:hover{color:var(--ink);background:var(--cream)}
.wa-float.acik{transform:scale(.92) rotate(0)}
@media (max-width:760px){.wa-kutu{right:12px;bottom:78px}}

/* ============================================================
   SAKİN MOD — hareket kapalıyken de her tepki GÖRÜNÜR kalır.
   .sakin sınıfını c-hareket.js <html>'e yazar.
   ============================================================ */
.sakin .raf-sayi:hover,.sakin .raf-sayi:focus-visible{transform:rotate(0) translateY(-22px) scale(1.08)}
.sakin .raf-sayi:hover img{box-shadow:0 0 0 3px var(--coral),10px 12px 0 rgba(20,22,51,.22)}
.sakin .raf-sayi:hover + .raf-sayi{transform:rotate(6deg) translate(12px,6px)}
.sakin .raf-kunye{transition:none}

/* Hareket yoksa "kapak dönüp sırtını gösteriyor" görünmez:
   yerine kapak öne çıkar ve çerçevelenir. */
.sakin .kitap-raf:hover .kitap-tek,
.sakin .sc-book:hover .kitap-tek{transform:none}
.sakin .kitap-raf:hover .kitap-tek::before,
.sakin .sc-book:hover .kitap-tek::before{opacity:0}
.sakin .kitap-raf:hover .kitap-tek img,
.sakin .sc-book:hover .kitap-tek img{box-shadow:0 0 0 3px var(--coral),4px 5px 0 rgba(20,22,51,.18)}

/* Logo eğilmek yerine yalnızca çerçeve değiştirir (hareketsiz tepki) */
.sakin .arac:hover .arac-logo{box-shadow:0 0 0 3px var(--cobalt),3px 3px 0 var(--ink);transform:none}

/* Buton tepkisi: yaylanma yerine anlık ama net bir kalınlaşma */
.sakin .btn:hover{transform:translate(-2px,-2px);filter:saturate(1.15)}
.sakin .btn:active{transform:translate(2px,2px)}
.sakin .btn:hover i,.sakin .btn:hover .ar{transform:translateX(6px)}
.sakin .btn .shine,.sakin .btn:hover .shine{animation:none;opacity:0}

/* c.js sakin modda eğilme/mıknatıs efektlerini hiç kurmuyor;
   kartlar tepkisiz kalmasın diye net bir gölge + çerçeve veriyoruz. */
.sakin .card:hover,.sakin .arac:hover,.sakin .issue-row:hover{outline:3px solid var(--cobalt);outline-offset:-3px}

/* Belirme animasyonu sakin modda tamamen kapalı — içerik zaten görünür.
   (c.css'teki reduce bloğu .reveal'ı açıyor; gecikmeyi de siliyoruz ki
   sırayla gelme beklemesi hiç yaşanmasın.) */
.sakin .reveal,.sakin .reveal.in{opacity:1;transform:none;transition-delay:0s}

/* Sakin modda pencere anında açılır, kayarak değil */
.sakin .wa-kutu{transition:none}

/* ------------------------------------------------------------
   "ZİYARETÇİ NE GÖRÜYOR" ANAHTARI  —  adresin sonuna ?hareket=1
   ------------------------------------------------------------
   Tahsin'in PC'sinde Windows animasyonları kapalı olduğu için siteyi
   hep sakin modda görüyor; ziyaretçilerin gördüğü hâli hiç göremiyor.
   c.css'teki "reduce" bloğu bütün süreleri .01 ms'ye çekiyor ve o kural
   !important olduğu için ?hareket=1 tek başına yetmiyordu. Aşağıdaki
   blok, YALNIZCA .sakin sınıfı kaldırıldığında (yani hareket bilerek
   açıldığında) süreleri geri veriyor. Gerçek ziyaretçi için hiçbir şey
   değişmez: onlarda .sakin sınıfı zaten duruyor.
   Geri kapatmak için: ?hareket=0 */
@media (prefers-reduced-motion:reduce){
  html:not(.sakin) .btn,html:not(.sakin) .btn i,html:not(.sakin) .btn .ar,
  html:not(.sakin) .card,html:not(.sakin) .arac,html:not(.sakin) .arac-go i,
  html:not(.sakin) .arac-logo,
  html:not(.sakin) .raf-sayi,html:not(.sakin) .raf-sayi img,html:not(.sakin) .raf-kunye,
  html:not(.sakin) .kitap-tek,html:not(.sakin) .kitap-tek::before,
  html:not(.sakin) .wa-kutu,html:not(.sakin) .wa-float,html:not(.sakin) .wa-sec,
  html:not(.sakin) .covers img,html:not(.sakin) .sc .go svg,html:not(.sakin) .pdf-stack i,
  html:not(.sakin) .issue-row,html:not(.sakin) .issue-row .thumb img,html:not(.sakin) .issue-row .ar,
  html:not(.sakin) .stat,html:not(.sakin) .step,html:not(.sakin) .soc,html:not(.sakin) .soc svg
  {transition-duration:.34s!important}
  html:not(.sakin) .reveal{opacity:0;transform:translateY(34px);transition-duration:.42s!important}
  html:not(.sakin) .reveal.pop{transform:translateY(24px) scale(.96)}
  html:not(.sakin) .reveal.in{opacity:1;transform:none}
  html:not(.sakin) .btn:hover .shine{animation-duration:1.1s!important;animation-iteration-count:1!important}
  html:not(.sakin) .wa-float:hover::before{animation-duration:1.6s!important;animation-iteration-count:2!important}
}