/* ═══════════════════════════════════════════════════════════════════════
   Miniko Web Sınıf — kapı sitesi (Faz 3, 16 Eyl 2026)
   Dil: Işık Adaları (uygulamanın D yönü) — mor şafak, krem adalar, güneş
   sarısı eylem, nane vurgu. Yazı: Nunito (değişken, SIL OFL; marka kiti).
   Ölçüt: güçlü ilk sahne · akıcı anlatı · gerçek ekranlar · özgün ama
   ölçülü hareket · yüksek işçilik; performansı bozan efekt yok.
   ═══════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Nunito";
  src: url("/font/nunito-bb55a5ca.ttf") format("truetype");
  font-weight: 200 1000;
  font-display: swap;
}
:root {
  --mor: #553AA8; --mor-koyu: #43287E; --mor-acik: #6B4BD0; --mor-marka: #5E17EB;
  --safak: #F3C6E4; --krem: #FFF8F0; --sut: #FFFDF7; --murekkep: #2D2438;
  --lavanta: #D6C1F4; --gunes: #FFB300; --nane: #16BEB6; --hata: #B26A00;
  --govde: #6C5F80;
  --golge: 0 18px 48px rgba(45, 36, 56, .22);
  --golge-yumusak: 0 8px 24px rgba(45, 36, 56, .12);
  --kavis: 28px;
  --gecis: 640ms cubic-bezier(.2, .8, .2, 1);
  --olcek-0: clamp(13px, .95vw, 15px);
  --olcek-1: clamp(15px, 1.15vw, 18px);
  --olcek-2: clamp(18px, 1.6vw, 22px);
  --olcek-3: clamp(22px, 2.4vw, 30px);
  --olcek-4: clamp(30px, 4vw, 48px);
  --olcek-5: clamp(42px, 6.6vw, 88px);
  --kenar: clamp(16px, 5vw, 72px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Nunito", -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--murekkep); background: var(--krem); line-height: 1.5;
  font-size: var(--olcek-1); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--nane); outline-offset: 3px; border-radius: 6px; }

.atla { position: absolute; left: 16px; top: -60px; background: var(--gunes); color: var(--murekkep);
  padding: 10px 14px; border-radius: 10px; font-weight: 800; z-index: 20; }
.atla:focus { top: 16px; }

/* ── Üst çubuk ─────────────────────────────────────────────────────── */
.ust { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px;
  padding: 14px var(--kenar); background: rgba(67, 40, 126, .72); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); color: #fff; }
.marka { font-weight: 900; letter-spacing: .08em; font-size: 18px; text-decoration: none; }
.marka span, .alt-marka span { color: var(--lavanta); font-weight: 600; letter-spacing: 0; margin-left: 6px; }
.menu { display: flex; gap: 22px; margin-left: auto; }
.menu a { text-decoration: none; font-weight: 700; opacity: .9; }
.menu a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }

/* ── Düğmeler ──────────────────────────────────────────────────────── */
.dugme { font: inherit; font-weight: 800; border: 0; border-radius: 16px; padding: 14px 22px;
  min-height: 48px; cursor: pointer; text-align: center; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms, filter 220ms; }
.dugme:hover { transform: translateY(-2px); }
.dugme:active { transform: translateY(0) scale(.98); }
.birincil { background: var(--gunes); color: var(--murekkep); box-shadow: 0 10px 24px rgba(255, 179, 0, .35); }
.birincil:hover { filter: brightness(1.04); box-shadow: 0 14px 30px rgba(255, 179, 0, .42); }
.cam { background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.cam:hover { background: rgba(255,255,255,.22); }
.ikincil { background: transparent; color: var(--murekkep); border: 2px solid var(--lavanta); margin-top: 10px; }
.kucuk-dugme { padding: 10px 16px; min-height: 40px; border-radius: 12px; font-size: 15px; }
.buyuk { font-size: var(--olcek-2); padding: 18px; width: 100%; }

/* ── Sahne ─────────────────────────────────────────────────────────── */
.sahne { position: relative; overflow: hidden; color: #fff; min-height: calc(100vh - 68px);
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center;
  gap: clamp(24px, 4vw, 64px); padding: clamp(48px, 8vh, 96px) var(--kenar) clamp(56px, 10vh, 120px);
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(243, 198, 228, .55), transparent 60%),
    radial-gradient(1100px 700px at 100% 100%, rgba(22, 190, 182, .28), transparent 62%),
    linear-gradient(170deg, var(--mor-acik) 0%, var(--mor) 48%, var(--mor-koyu) 100%); }
.ustyazi { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: var(--olcek-0);
  color: var(--lavanta); margin-bottom: 14px; }
.sahne h1 { font-size: var(--olcek-5); font-weight: 900; }
.giris-cumlesi { margin-top: 20px; font-size: var(--olcek-2); max-width: 30ch; color: rgba(255,255,255,.9); }
.eylemler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Işık izi: yedi nokta, yumuşak nabız; azaltılmış harekette durur */
.isik-izi { position: absolute; inset: 0; pointer-events: none; }
.isik-izi span { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff;
  opacity: .0; box-shadow: 0 0 18px 6px rgba(255, 255, 255, .55); animation: parilti 6s ease-in-out infinite; }
.isik-izi span:nth-child(1) { left: 6%;  top: 18%; animation-delay: 0s; }
.isik-izi span:nth-child(2) { left: 18%; top: 78%; animation-delay: .9s; }
.isik-izi span:nth-child(3) { left: 34%; top: 32%; animation-delay: 1.7s; }
.isik-izi span:nth-child(4) { left: 46%; top: 88%; animation-delay: 2.6s; }
.isik-izi span:nth-child(5) { left: 62%; top: 10%; animation-delay: 3.4s; }
.isik-izi span:nth-child(6) { left: 84%; top: 26%; animation-delay: 4.3s; }
.isik-izi span:nth-child(7) { left: 93%; top: 70%; animation-delay: 5.1s; }
@keyframes parilti { 0%, 100% { opacity: 0; transform: scale(.6); } 50% { opacity: .9; transform: scale(1.1); } }

/* Tahta: 16:9 çerçeve, kalın koyu çerçeve + hafif parlama, süzülme */
.tahta { margin: 0; position: relative; perspective: 1400px; }
.tahta-cerceve { border-radius: 22px; padding: 10px; background: linear-gradient(180deg, #2A2141, #1B1530);
  box-shadow: 0 30px 80px rgba(20, 12, 44, .55), 0 0 0 1px rgba(255,255,255,.08), 0 0 80px rgba(214, 193, 244, .18);
  transform: rotateY(var(--ry, -6deg)) rotateX(var(--rx, 3deg)); transform-style: preserve-3d;
  transition: transform 500ms cubic-bezier(.2,.8,.2,1); animation: suzul 7s ease-in-out infinite; }
.tahta-cerceve img { border-radius: 14px; }
.tahta figcaption { margin-top: 14px; text-align: center; font-size: var(--olcek-0); color: var(--lavanta); font-weight: 700; letter-spacing: .06em; }
@keyframes suzul { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* ── Bölüm başlıkları ──────────────────────────────────────────────── */
.bolum-baslik { font-size: var(--olcek-4); font-weight: 900; }
.bolum-alt { margin-top: 10px; color: var(--govde); font-size: var(--olcek-2); max-width: 52ch; }

/* ── Adalar ────────────────────────────────────────────────────────── */
.adalar { padding: clamp(64px, 10vh, 128px) var(--kenar); position: relative; }
.adalar::before { content: ""; position: absolute; left: 50%; top: 220px; bottom: 80px; width: 0;
  border-left: 3px dotted var(--lavanta); transform: translateX(-50%); opacity: .8; }
.ada { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 64px); align-items: center;
  margin-top: clamp(48px, 8vh, 96px); position: relative; }
.ada.ters .ada-gorsel { order: 2; }
.ada-gorsel { margin: 0; border-radius: var(--kavis); overflow: hidden; background: #fff; padding: 8px;
  box-shadow: var(--golge); transition: transform 500ms cubic-bezier(.2,.8,.2,1), box-shadow 500ms; }
.ada-gorsel:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 28px 64px rgba(45,36,56,.28); }
.ada-gorsel img { border-radius: calc(var(--kavis) - 8px); }
.ada-metin { background: var(--sut); border-radius: var(--kavis); padding: clamp(22px, 3vw, 40px);
  box-shadow: var(--golge-yumusak); border: 1px solid rgba(214, 193, 244, .6); }
.ada-etiket { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: var(--olcek-0); color: var(--mor-marka); }
.ada-metin h3 { margin-top: 10px; font-size: var(--olcek-3); font-weight: 900; }
.ada-metin p:last-child { margin-top: 12px; color: var(--govde); }

/* ── Sınıfta nasıl ─────────────────────────────────────────────────── */
.nasil { padding: clamp(64px, 10vh, 128px) var(--kenar); background: linear-gradient(180deg, var(--krem), #F4ECFF); }
.adimlar { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: adim; }
.adimlar li { background: #fff; border-radius: var(--kavis); padding: 28px; box-shadow: var(--golge-yumusak); position: relative; }
.no { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gunes);
  color: var(--murekkep); font-weight: 900; font-size: 20px; margin-bottom: 16px; }
.adimlar h3 { font-size: var(--olcek-2); font-weight: 900; }
.adimlar p { margin-top: 8px; color: var(--govde); }

/* ── Güven ─────────────────────────────────────────────────────────── */
.guven { padding: clamp(64px, 10vh, 128px) var(--kenar); background: var(--mor-koyu); color: #fff; }
.guven-liste { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.guven-liste li { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 18px;
  padding: 18px 20px; font-weight: 700; font-size: var(--olcek-1); }
.guven-liste li::before { content: "✓"; color: var(--nane); font-weight: 900; margin-right: 10px; }
.feragat { margin-top: 24px; color: rgba(255,255,255,.72); font-size: var(--olcek-0); }

/* ── Kapı (giriş) ──────────────────────────────────────────────────── */
.kapi-bolum { padding: clamp(64px, 10vh, 128px) var(--kenar); display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 80px); align-items: center; background:
    radial-gradient(700px 400px at 0% 100%, rgba(22,190,182,.14), transparent 60%), var(--krem); }
.kapi-metin p { margin-top: 12px; color: var(--govde); font-size: var(--olcek-2); }
.not { display: inline-block; background: rgba(255,179,0,.16); border: 1px solid rgba(255,179,0,.6); color: var(--murekkep);
  border-radius: 12px; padding: 10px 14px; font-weight: 700; margin-top: 16px; }
.kart { background: #fff; border-radius: var(--kavis); padding: clamp(20px, 3vw, 32px); box-shadow: var(--golge); }
.sekmeler { display: flex; gap: 8px; margin-bottom: 18px; background: var(--krem); padding: 6px; border-radius: 16px; }
.sekme { flex: 1; border: 0; background: transparent; padding: 10px; border-radius: 12px; font: inherit; font-weight: 800; color: var(--govde); cursor: pointer; }
.sekme.etkin { background: #fff; color: var(--murekkep); box-shadow: 0 2px 8px rgba(45,36,56,.12); }
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 800; font-size: 14px; }
.form input { font: inherit; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--lavanta); background: #fff; min-height: 46px; }
.form input:focus { outline: 3px solid var(--nane); outline-offset: 1px; border-color: var(--nane); }
.selam { font-size: var(--olcek-2); margin-bottom: 16px; }
.hata { color: var(--hata); font-weight: 800; }
.kucuk { font-size: 13px; color: var(--govde); }
.kucuk a { color: var(--mor); }
.turnstile:empty { display: none; }

/* ── Alt ───────────────────────────────────────────────────────────── */
.alt { padding: 32px var(--kenar) 40px; background: var(--mor-koyu); color: rgba(255,255,255,.8);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; font-size: 14px; }
.alt-marka { font-weight: 900; letter-spacing: .08em; color: #fff; }
.alt nav { display: flex; flex-wrap: wrap; gap: 16px 22px; margin-left: auto; }
.alt a { color: rgba(255,255,255,.85); text-decoration: none; }
.alt a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── Kaydırma ile belirme ──────────────────────────────────────────── */
.goster { opacity: 0; transform: translateY(24px); transition: opacity var(--gecis), transform var(--gecis); }
.goster.gorundu { opacity: 1; transform: none; }
.adimlar li:nth-child(2) { transition-delay: 90ms; } .adimlar li:nth-child(3) { transition-delay: 180ms; }
.guven-liste li:nth-child(2) { transition-delay: 70ms; } .guven-liste li:nth-child(3) { transition-delay: 140ms; } .guven-liste li:nth-child(4) { transition-delay: 210ms; }

/* ── Duyarlı ───────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .menu { display: none; }
  .sahne { grid-template-columns: 1fr; min-height: 0; padding-top: 40px; }
  .giris-cumlesi { max-width: none; }
  .ada, .ada.ters { grid-template-columns: 1fr; }
  .ada.ters .ada-gorsel { order: 0; }
  .adalar::before { display: none; }
  .adimlar { grid-template-columns: 1fr; }
  .guven-liste { grid-template-columns: 1fr; }
  .kapi-bolum { grid-template-columns: 1fr; }
  .tahta-cerceve { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .isik-izi span, .tahta-cerceve { animation: none; }
  .tahta-cerceve { transform: none; transition: none; }
  .goster { opacity: 1; transform: none; transition: none; }
  .dugme, .ada-gorsel { transition: none; }
  .dugme:hover, .ada-gorsel:hover { transform: none; }
}