/* Misko web sitesi: oyunun tasarım dili (Krem / Kömür / Amber / Orman, Nunito). */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap');

:root {
  --krem: #F5EFE2; --krem-2: #EDE4D0; --komur: #2D2B25; --soluk: #6B675C;
  --amber: #F4AE42; --amber-koyu: #D98C1F; --orman: #203D34; --orman-koyu: #142822;
  --kart: #FFFaF0; --golge: 0 10px 30px rgba(32, 61, 52, .12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--krem); color: var(--komur);
       font: 17px/1.65 "Nunito", -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--orman); text-underline-offset: 3px; }
a:hover { color: var(--amber-koyu); }

/* Üst çubuk */
.ust { position: sticky; top: 0; z-index: 10; background: rgba(32, 61, 52, .96); backdrop-filter: blur(8px); }
.ust-ic { max-width: 960px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 16px; }
.marka { display: flex; align-items: center; gap: 10px; color: var(--krem); text-decoration: none;
         font-weight: 900; font-size: 22px; letter-spacing: 2px; }
.marka:hover { color: var(--krem); }
.misket { width: 26px; height: 26px; border-radius: 50%; flex: none;
          background: radial-gradient(circle at 35% 30%, #fff8 0 12%, transparent 13%),
                      radial-gradient(circle at 50% 50%, #F4AE42 0 58%, #C77A12 100%);
          box-shadow: 0 2px 4px #0005; }
.menu { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.menu a { color: var(--krem); opacity: .82; text-decoration: none; font-weight: 700; font-size: 15px;
          padding: 6px 12px; border-radius: 20px; }
.menu a:hover, .menu a.aktif { opacity: 1; background: rgba(245, 239, 226, .12); color: var(--krem); }

/* Sayfa */
.sayfa { max-width: 760px; margin: 0 auto; padding: 40px 16px 72px; }
.etiket { display: inline-block; background: var(--amber); color: var(--komur); font-weight: 800; font-size: 13px;
          letter-spacing: 1.5px; padding: 4px 12px; border-radius: 20px; text-transform: uppercase; }
h1 { color: var(--orman); font-weight: 900; font-size: clamp(30px, 6vw, 42px); line-height: 1.15; margin: 14px 0 6px; }
h2 { color: var(--orman); font-weight: 800; font-size: 21px; margin: 36px 0 8px; }
.tarih { color: var(--soluk); font-size: 14px; }
.ozet { background: var(--kart); border-left: 5px solid var(--amber); padding: 16px 20px; border-radius: 12px;
        box-shadow: var(--golge); margin: 24px 0; }
.dil { display: flex; gap: 8px; margin: 18px 0 8px; }
.dil a { text-decoration: none; font-weight: 800; font-size: 14px; padding: 6px 14px; border-radius: 20px;
         background: var(--krem-2); color: var(--komur); }
.dil a:hover { background: var(--amber); color: var(--komur); }
.ayrac { border: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--amber), transparent); margin: 64px 0; }

/* Destek: iletişim kartı + SSS */
.iletisim { background: var(--orman); color: var(--krem); border-radius: 20px; padding: 24px; box-shadow: var(--golge); margin: 24px 0 8px; }
.iletisim p { margin: 0 0 12px; opacity: .9; }
.dugme { display: inline-block; background: var(--amber); color: var(--komur); text-decoration: none; font-weight: 800;
         padding: 12px 24px; border-radius: 28px; box-shadow: 0 4px 0 var(--amber-koyu); }
.dugme:hover { color: var(--komur); transform: translateY(1px); box-shadow: 0 3px 0 var(--amber-koyu); }
.ince { font-size: 14px; opacity: .75; margin-top: 12px !important; }
details { background: var(--kart); border-radius: 14px; margin: 10px 0; box-shadow: 0 2px 10px rgba(32, 61, 52, .07); }
summary { cursor: pointer; font-weight: 800; color: var(--orman); padding: 16px 20px; list-style: none; position: relative; padding-right: 48px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 20px; top: 12px; font-size: 24px; color: var(--amber-koyu); }
details[open] summary::after { content: "–"; }
details p { margin: 0; padding: 0 20px 18px; }

/* Ana sayfa */
.giris { background: radial-gradient(ellipse at 70% 45%, rgba(244,174,66,.16), transparent 55%),
                     linear-gradient(180deg, rgba(20,40,34,.35), rgba(20,40,34,.8)), url(img/asfalt.webp) center/cover;
         color: var(--krem); overflow: hidden; }
.giris-ic { max-width: 1080px; margin: 0 auto; padding: 64px 20px 72px; display: grid; gap: 32px;
            grid-template-columns: 1fr 1fr; align-items: center; }
.giris-logo { width: 100%; max-width: 480px; height: auto; display: block; filter: drop-shadow(0 6px 18px rgba(0,0,0,.5)); }
.giris-slogan { font-style: italic; font-weight: 800; font-size: 22px; margin: 6px 0 16px; color: #fff8ea; }
.giris-metin { font-size: 18px; opacity: .88; max-width: 470px; margin: 0 0 24px; }
.giris-ozet { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.giris-ozet li { background: rgba(245,239,226,.1); border: 1px solid rgba(245,239,226,.22); padding: 6px 14px;
                 border-radius: 20px; font-weight: 700; font-size: 15px; }
.giris-ozet b { color: var(--amber); font-weight: 900; }
.giris-not { font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--amber); margin: 0; }

/* Tebeşir sahnesi: çember ve üçgen çizilir, misketler yerine düşer (oyunun açılışı gibi) */
.sahne { position: relative; width: min(420px, 100%); aspect-ratio: 1; justify-self: center; }
.tebesir { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cizgi { fill: none; stroke: #f7f1e3; stroke-linecap: round; stroke-linejoin: round; filter: url(#tebesir-doku);
         stroke-dasharray: 100; stroke-dashoffset: 100; animation: ciz 1.3s ease-out forwards; }
.halka { stroke-width: 7; opacity: .92; }
.ucgen { stroke-width: 5; opacity: .8; animation-delay: 1.1s; animation-duration: .8s; }
@keyframes ciz { to { stroke-dashoffset: 0; } }
.top { position: absolute; width: 15%; aspect-ratio: 1; border-radius: 50%; transform: scale(0);
       animation: dus .35s cubic-bezier(.3,1.6,.5,1) forwards;
       box-shadow: 0 6px 10px rgba(0,0,0,.45), inset -5px -7px 10px rgba(0,0,0,.25); }
.top::after { content: ""; position: absolute; left: 22%; top: 16%; width: 28%; height: 22%; border-radius: 50%;
              background: rgba(255,255,255,.85); filter: blur(.5px); }
.top::before { content: ""; position: absolute; inset: 18% 30%; border-radius: 40%; border: 3px solid rgba(255,255,255,.35);
               border-left-color: transparent; border-bottom-color: transparent; transform: rotate(-30deg); }
@keyframes dus { to { transform: scale(1); } }
.t1 { left: 42.5%; top: 34%; background: radial-gradient(circle at 40% 35%, #FFC45A, #E8912A 60%, #B8650F); animation-delay: 1.9s; }
.t2 { left: 34%;   top: 48%; background: radial-gradient(circle at 40% 35%, #43D1D9, #16A6B0 60%, #0B6F76); animation-delay: 2.0s; }
.t3 { left: 51%;   top: 48%; background: radial-gradient(circle at 40% 35%, #77D35F, #43A83A 60%, #276B20); animation-delay: 2.1s; }
.t4 { left: 25.5%; top: 62%; background: radial-gradient(circle at 40% 35%, #FF7A70, #E5473F 60%, #9E2620); animation-delay: 2.2s; }
.t5 { left: 42.5%; top: 62%; background: radial-gradient(circle at 40% 35%, #A58CFF, #7453E0 60%, #45299E); animation-delay: 2.3s; }
.t6 { left: 59.5%; top: 62%; background: radial-gradient(circle at 40% 35%, #FFFFFF, #CFDDF2 60%, #8FA4C4); animation-delay: 2.4s; }
.atici { width: 17%; left: 41.5%; top: 104%; background: radial-gradient(circle at 40% 35%, #FFD27A, #F4AE42 55%, #B8650F);
         animation: dus .35s cubic-bezier(.3,1.6,.5,1) 2.7s forwards, bekle 2.4s ease-in-out 3.2s infinite; }
@keyframes bekle { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .cizgi, .top { animation: none; stroke-dashoffset: 0; transform: none; } }

.bolum { max-width: 1040px; margin: 0 auto; padding: 72px 20px; }
.bolum.koyu { max-width: none; background: var(--orman); color: var(--krem); }
.bolum.koyu > * { max-width: 1000px; margin-left: auto; margin-right: auto; }
.ust-baslik { color: var(--amber-koyu); font-weight: 900; letter-spacing: 2px; text-transform: uppercase; font-size: 13px; margin: 0 0 6px; }
.koyu .ust-baslik { color: var(--amber); }
.bolum-baslik { font-size: clamp(28px, 5vw, 40px); font-weight: 900; margin: 0 0 32px; line-height: 1.15; }
.koyu .bolum-baslik { color: var(--krem); }

.haritalar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.harita-kart { background: var(--kart); border-radius: 22px; overflow: hidden; box-shadow: var(--golge); }
.harita-resim { aspect-ratio: 8 / 3; background: center/cover no-repeat; }
.harita-yazi { padding: 20px 24px 26px; }
.harita-yazi h3 { color: var(--orman); font-size: 28px; font-weight: 900; margin: 10px 0 4px; }
.harita-yazi p { color: var(--soluk); margin: 0; }

.serit { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 28px 2px 12px; margin-top: 8px; }
.serit figure { flex: 0 0 132px; margin: 0; scroll-snap-align: start; }
.serit img { width: 132px; height: 352px; object-fit: cover; border-radius: 16px; display: block; box-shadow: 0 6px 16px rgba(32,61,52,.18); }
.serit figcaption { font-weight: 800; font-size: 14px; color: var(--orman); margin-top: 8px; text-align: center; }

.mekanikler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mekanik { background: rgba(245,239,226,.06); border: 1px solid rgba(245,239,226,.12); border-radius: 18px; padding: 20px; }
.mekanik b { display: block; font-size: 18px; font-weight: 900; margin: 12px 0 2px; }
.mekanik span:last-child { opacity: .78; font-size: 15px; }
.ikon { display: block; width: 52px; height: 52px; border-radius: 50%; }
.ikon.buz { background: radial-gradient(circle at 36% 30%, #fff 0 10%, transparent 12%), radial-gradient(circle, #9fd9ee 0 55%, #5aa9c9 100%);
            box-shadow: 0 0 0 5px rgba(170,225,245,.35); }
.ikon.karpuz { background: radial-gradient(circle at 36% 30%, #fff9 0 9%, transparent 11%), repeating-linear-gradient(100deg, #2f7d32 0 7px, #1d5220 7px 12px); }
.ikon.kum { background: radial-gradient(circle, #e7cf96 0 60%, #cdb070 100%); border-radius: 46% 54% 50% 50%; }
.ikon.camur { background: radial-gradient(circle at 40% 35%, #6b4f38 0 30%, #3d2b1d 100%); border-radius: 55% 45% 52% 48%; }
.ikon.egim { background: linear-gradient(135deg, #6f9a5a, #3f6b33); clip-path: polygon(0 100%, 100% 20%, 100% 100%); border-radius: 8px; }
.ikon.cukur { background: radial-gradient(circle, #1a130d 0 45%, #6b5238 62%, #a88b62 100%); }

.yolculuk { background: center 70%/cover no-repeat; position: relative; }
.yolculuk::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,40,34,.92) 0%, rgba(20,40,34,.7) 50%, rgba(20,40,34,.15) 100%); }
.yolculuk-ic { position: relative; max-width: 1000px; margin: 0 auto; padding: 110px 20px; color: var(--krem); }
.yolculuk h2 { color: var(--krem); text-shadow: 0 2px 12px rgba(0,0,0,.4); font-size: clamp(30px, 5vw, 46px); font-weight: 900; line-height: 1.1; margin: 0 0 14px; }
.yolculuk p:last-child { max-width: 440px; opacity: .9; font-size: 18px; }
.yolculuk .ust-baslik { color: var(--amber); }

.ozellik-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ozellik { background: var(--kart); border-radius: 18px; padding: 24px; box-shadow: var(--golge); }
.ozellik .no { display: block; color: var(--amber-koyu); font-weight: 900; font-size: 14px; letter-spacing: 1px; }
.ozellik b { display: block; color: var(--orman); font-size: 20px; font-weight: 900; margin: 4px 0 6px; }
.ozellik span:last-child { color: var(--soluk); font-size: 16px; }

.cagri { background: linear-gradient(180deg, rgba(20,40,34,.8), rgba(20,40,34,.95)), url(img/asfalt.webp) center/cover;
         color: var(--krem); text-align: center; padding: 72px 20px; }
.cagri img { width: min(360px, 80%); height: auto; }
.cagri p { font-size: 20px; font-weight: 800; margin: 16px 0 4px; }
.cagri .en { font-size: 15px; font-weight: 600; opacity: .7; }
.cagri a { color: var(--amber); }

@media (max-width: 760px) {
  .giris-ic { grid-template-columns: 1fr; text-align: center; padding: 40px 16px 88px; }
  .giris-logo, .giris-metin { margin-left: auto; margin-right: auto; }
  .giris-ozet { justify-content: center; }
  .sahne { width: min(300px, 80%); }
  .haritalar, .ozellik-izgara { grid-template-columns: 1fr; }
  .mekanikler { grid-template-columns: 1fr 1fr; }
  .bolum { padding: 56px 16px; }
  .yolculuk-ic { padding: 80px 16px; }
  .yolculuk::before { background: rgba(20,40,34,.72); }
}

/* Alt bilgi */
.alt { background: var(--orman-koyu); color: rgba(245, 239, 226, .7); font-size: 14px; }
.alt-ic { max-width: 960px; margin: 0 auto; padding: 24px 16px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.alt a { color: rgba(245, 239, 226, .85); text-decoration: none; }
.alt a:hover { color: var(--amber); }
.alt .sag { margin-left: auto; }