/* =============================================================================
 * kamyo.net — site stilleri ("oyuncak kasaba" tasarımı, design/paket-v2)
 * -----------------------------------------------------------------------------
 * Bölümler:
 *   1. Renkler ve ortak değerler (CSS değişkenleri)
 *   2. Temel ayarlar
 *   3. Gökyüzü ve bulutlar
 *   4. Üst çubuk (logo, sekmeler, dil ve ses düğmeleri)
 *   5. Oyun alanı
 *   6. Alt bilgi
 *   7. Çerez onay kutusu
 *   8. Oyun animasyonları (far yanıp sönmesi dahil)
 *   9. Bitiş kartı, düğmeler, konfeti
 *  10. Ekran boyutuna ve kullanıcı tercihine göre uyarlamalar
 *
 * Dokunma alanı: tüm düğme ve bağlantılar en az 44x44 piksel.
 * ========================================================================== */

/* 1. Renkler ve ortak değerler — renk değiştirmek için sadece burayı düzenleyin.
      Ana palet design/paket-v2/docs/DESIGN.md'den gelir. */
:root{
  --ink:#102948;        /* lacivert: ana yazı */
  --ink-soft:#3c5170;   /* ikincil yazı */
  --ink-mute:#4f6481;   /* soluk yazı (ipucu, alt bilgi) */
  --cream:#fff8ec;      /* krem: kartlar, balon, düğme zemini */
  --cream-deep:#f3e7d2; /* krem gölge / ikincil düğme */
  --orange:#ff7924;     /* turuncu: kamyonet kasası, ana vurgu */
  --orange-dark:#d95f12;
  --sky:#bde5fa;        /* gök mavisi */
  --sage:#8ba77b;       /* adaçayı yeşili */
  --asphalt:#42434b;    /* asfalt */
  --blue:#2f80ed;       /* odak halkası */
  --radius:18px;
  --shadow:0 4px 0 rgba(16,41,72,.10);
  --focus:0 0 0 3px var(--cream),0 0 0 6px var(--blue);   /* klavye odak halkası */
  --font-title:'Baloo 2',system-ui,-apple-system,'Segoe UI',sans-serif;   /* başlık ve oyun yazıları */
  --font-text:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;        /* uzun metinler */
}

/* 2. Temel ayarlar */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100vh;min-height:100dvh;   /* dvh: mobilde adres çubuğu hesaba katılır */
  font-family:var(--font-title);
  color:var(--ink);
  background:linear-gradient(var(--sky) 0%,#d9f0fb 55%,var(--cream) 100%) fixed;
  display:flex;flex-direction:column;
  /* env(safe-area-*): iPhone çentiği ve alt çubuğu için boşluk */
  padding:max(12px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom));
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit}
a{color:var(--ink)}
/* Sadece klavyeyle gezinirken görünen odak halkası */
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:12px}
/* Dil: i18n.js çevirisini bitirene kadar çevrilecek yazıları gizle (Türkçe
   yazının bir an görünüp İngilizceye "zıplamaması" için). i18n.js hiç
   yüklenmezse html'e "i18n" sınıfı eklenmez ve yazılar normal görünür. */
html.i18n:not(.i18n-ready) [data-i18n]{visibility:hidden}

/* 3. Gökyüzü ve bulutlar — her bulutun boyutu/hızı HTML'deki --w, --h, --dur ile verilir */
.sky{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.cloud{position:absolute;top:var(--top);width:var(--w);height:var(--h);background:var(--cream);border-radius:50px;opacity:.9;
  animation:drift var(--dur) linear var(--delay) infinite}
.cloud::before,.cloud::after{content:'';position:absolute;background:var(--cream);border-radius:50%}
.cloud::before{width:55%;height:150%;left:15%;top:-70%}
.cloud::after{width:40%;height:120%;right:12%;top:-45%}
@keyframes drift{from{transform:translateX(-200px)}to{transform:translateX(110vw)}}

/* 4. Üst çubuk */
.topbar{position:relative;z-index:3;width:100%;max-width:640px;margin:0 auto;
  display:flex;align-items:center;gap:10px}
.brand{display:flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;color:var(--ink);font-weight:800;font-size:24px;letter-spacing:.5px}
.brand-mark{width:40px;height:25px}
.brand b{color:var(--orange);font-weight:800}   /* logodaki ".net" */
/* Oyun sekmeleri: krem zemin üzerinde seçili sekme beyaz-turuncu çizgili */
.tabs{margin-left:auto;display:flex;background:rgba(255,248,236,.75);padding:4px;border-radius:16px;gap:4px;
  box-shadow:var(--shadow);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tab{border:0;background:none;cursor:pointer;font-weight:800;font-size:15px;white-space:nowrap;min-height:44px;padding:0 14px;border-radius:12px;color:var(--ink-mute);transition:background .15s,color .15s}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:inset 0 -3px 0 var(--orange)}
/* Ses ve dil düğmeleri: krem yuvarlak, 44 piksel */
.icon-btn{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--cream);cursor:pointer;box-shadow:var(--shadow);
  display:grid;place-items:center}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn .spk{fill:var(--ink)}
.icon-btn .off{display:none}
.icon-btn[aria-pressed="true"] .on{display:none}
.icon-btn[aria-pressed="true"] .off{display:inline}
/* Dil düğmesi: içinde "EN"/"TR" yazısı (metin sayfalarında bağlantı olarak) */
.lang-btn{font-weight:800;font-size:15px;letter-spacing:.5px;color:var(--ink)}
a.icon-btn{text-decoration:none}
/* Metin sayfaları (gizlilik, katkılar): üst çubuk kart genişliğinde, dil düğmesi sağda */
.doc-page .topbar{max-width:680px;margin-bottom:12px}
.doc-page .lang-btn{margin-left:auto}
.doc-page .foot{margin-top:16px}

/* 5. Oyun alanı */
/* Ana sayfa tek ekrana sığar (kaydırma yok): üst çubuk + oyun alanı + alt
   bilgi tam ekran yüksekliğine yerleşir; oyun alanı kalan her yeri alır.
   Çok kısa ekranlarda (560 pikselden az) sayfa kaydırılabilir. */
body.game-page{height:100vh;height:100dvh;min-height:560px}
.play{position:relative;z-index:1;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 0 4px;
  user-select:none;-webkit-user-select:none}   /* sürüklerken yazı seçilmesin */
.bubble{position:relative;z-index:2;background:var(--cream);border-radius:var(--radius);padding:10px 18px;font-size:clamp(16px,4.4vw,20px);font-weight:700;
  text-align:center;max-width:420px;min-height:1.5em;box-shadow:var(--shadow);transition:transform .15s}
.bubble::after{content:'';position:absolute;left:50%;bottom:-10px;margin-left:-10px;border:10px solid transparent;border-bottom:0;border-top-color:var(--cream)}
.bubble.pop{transform:scale(1.07)}
/* Oyun sahnesi: kalan alanı doldurur. En fazla ne kadar yatay olacağını
   app.js oyuna göre belirler (max-width). Oyun dünyası değişmez, ölçeklenir. */
.stage{position:relative;flex:1 1 auto;min-height:240px;width:100%;
  border-radius:26px;box-shadow:0 8px 0 rgba(16,41,72,.12)}
/* overflow:hidden — sahnenin (400x560) dışına çıkan her şey kesilir. Böylece
   Kayıp N'de kamyonet yolun sağ ucuna gelince yolla birlikte kaybolur. */
.stage > svg{width:100%;height:100%;display:block;touch-action:none;overflow:hidden;border-radius:26px}
/* Atlas kesitleri (iç svg'ler): yalnızca kendi dikdörtgenleri görünsün.
   Not: genişlik/yükseklik kuralları yalnız ana svg'ye (">") uygulanır;
   iç svg'lerin boyutu öznitelikten gelir. */
.stage svg.spr{overflow:hidden}
.truck-label{fill:var(--cream);font-family:var(--font-title);paint-order:stroke;stroke:rgba(16,41,72,.18);stroke-width:2px}
.truck-label.roof{letter-spacing:.5px;stroke:rgba(150,60,0,.35);stroke-width:1.6px}   /* üstten kamyonet: kasa üstüne boyanmış gibi */
.meta{text-align:center;min-height:2.6em;flex:none}
.hint{font-size:14px;color:var(--ink-soft)}
.best{font-size:13px;color:var(--ink-mute);font-weight:700}

/* 6. Alt bilgi */
/* Alt bilgi: tüm sayfalarda aynı bağlantılar ve sıra */
.foot{position:relative;z-index:2;flex:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 6px;font-size:13px;color:var(--ink-mute);text-align:center}
.foot a[aria-current="page"]{color:var(--ink);font-weight:800}
.foot a{color:var(--ink-soft);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 6px;border-radius:10px}
.foot a:hover{color:var(--ink);text-decoration:underline}
.ver{opacity:.7}
.noscript{position:fixed;inset:auto 16px 16px;z-index:10;background:var(--cream);border-radius:12px;padding:12px;text-align:center;font-weight:700}

/* 7. Çerez onay kutusu (analytics.js oluşturur) — ekranın altında sabit kart.
      Kabul ve Ret aynı boyutta ve benzer vurguda (seçimi yönlendirmemek için). */
.consent{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:20;
  width:min(560px,calc(100% - 24px));background:var(--cream);color:var(--ink);border-radius:var(--radius);padding:14px 16px;
  box-shadow:0 8px 0 rgba(16,41,72,.10),0 10px 30px rgba(16,41,72,.18);display:flex;gap:12px;align-items:center;
  font-family:var(--font-text);font-size:15px;line-height:1.4}
.consent p{flex:1}
.consent-actions{display:flex;flex:none;gap:8px}
.consent .btn{font-family:var(--font-title);font-size:15px;min-width:104px;min-height:44px;padding:0 16px;margin:0;
  background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink)}

/* 8. Oyun animasyonları */
.shake{animation:shake .4s}                    /* çarpışmada sahne sallanır */
@keyframes shake{20%,60%{transform:translateX(-8px) rotate(-1deg)}40%,80%{transform:translateX(8px) rotate(1deg)}}
.bob{animation:bob 1.4s ease-in-out infinite}  /* kamyonet rölantide hafif titrer */
@keyframes bob{50%{transform:translateY(-3px)}}
.puff{transform-box:fill-box;transform-origin:center;animation:puff .9s ease-out forwards}   /* egzoz dumanı */
@keyframes puff{from{opacity:.8;transform:scale(.4)}to{opacity:0;transform:translate(-40px,-20px) scale(1.6)}}
.wiggle{animation:wiggle .5s ease-in-out infinite}     /* yorulan N sallanır */
@keyframes wiggle{25%{rotate:-8deg}75%{rotate:8deg}}
.glow{animation:glow 1.2s ease-in-out infinite}        /* hedef yer yanıp söner */
@keyframes glow{50%{opacity:.35}}
/* Farlar: normalde kapalı; başarıda iki kez yavaşça yanıp söner, sonra açık
   kalır (stroboskop değil). Hareket azaltmada doğrudan açılır (.on). */
.lamp{opacity:0;pointer-events:none}
.lamp.flash{animation:lamp 1.5s ease-in-out forwards}
.lamp.on{opacity:.9}
@keyframes lamp{0%{opacity:0}18%{opacity:1}36%{opacity:.15}56%{opacity:1}74%{opacity:.35}100%{opacity:.9}}
.n-tile{cursor:pointer;outline:none}
.n-tile:focus-visible rect{stroke:var(--blue);stroke-width:6}

/* 9. Bitiş kartı, düğmeler, konfeti */
.end{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;animation:fade .3s}
@keyframes fade{from{opacity:0;transform:scale(.9)}}
.card{background:var(--cream);border-radius:24px;padding:22px 20px;text-align:center;width:86%;max-width:420px;box-shadow:0 10px 0 rgba(16,41,72,.14)}
.card h2{font-size:28px;font-weight:800;line-height:1.1;margin-bottom:6px}
.card p{font-size:17px;color:var(--ink-soft);margin-bottom:16px}
.btn{font-weight:800;font-size:17px;border:0;border-radius:14px;min-height:44px;padding:8px 18px;margin:4px;cursor:pointer;box-shadow:0 4px 0 rgba(16,41,72,.22);transition:transform .1s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(16,41,72,.22)}
.btn-primary{background:var(--orange);color:#fff}
.btn-secondary{background:#fff;color:var(--ink)}
/* Konfeti parçaları: --dx yatay sapma, --r dönüş açısı (JS rastgele verir) */
.conf{position:absolute;width:10px;height:14px;top:-20px;z-index:6;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translate(var(--dx),640px) rotate(var(--r));opacity:.9}}

/* 10. Uyarlamalar */
@media (max-width:520px){          /* telefonlar: logo yazısını ve ayraçları gizle, üst çubuğu sıkılaştır */
  .brand span,.foot .dot{display:none}
  .topbar{gap:6px}
  .tab{padding:0 10px;font-size:14px}
}
@media (max-width:370px){          /* çok dar telefonlar (360 px) */
  .brand-mark{width:34px}
  .tab{padding:0 8px}
}
@media (max-width:520px){          /* çerez kutusu: düğmeler metnin altına */
  .consent{flex-direction:column;align-items:stretch;text-align:center}
  .consent-actions{justify-content:center}
  .consent .btn{flex:1}
}
@media (max-height:620px){         /* kısa ekranlar: balonu küçült, sahneye yer aç */
  .bubble{padding:6px 14px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){   /* "hareketi azalt" açıksa sürekli animasyonları durdur */
  .cloud,.bob,.glow,.wiggle{animation:none}
  .bubble{transition:none}
}