/* ---------- Yazı tipleri: okulun kendi sunucusundan (assets/fonts) ----------
   Google Fonts yerine burada: sayfa daha hızlı açılır, yazı tipi değişince düzen kaymaz ve ziyaretçinin IP adresi
   Google'a gitmez (KVKK). Lisans: SIL Open Font License (Caveat, Fredoka, Nunito, Quicksand). Yalnızca Latin ve
   Türkçe harfler (latin, latin-ext). Quicksand dosyası yalnızca ğ Ğ ş Ş İ içerir (Fredoka'da bu harfler yok). */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/caveat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/caveat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/caveat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/caveat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* hebrew */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/fredoka-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/fredoka-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* hebrew */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/fredoka-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/fredoka-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* hebrew */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/fredoka-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/fredoka-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/nunito-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/nunito-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/nunito-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/nunito-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/nunito-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/nunito-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/nunito-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/nunito-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* tr */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/quicksand-tr.woff2) format('woff2');
  unicode-range: U+47, U+49, U+53, U+67, U+73, U+11e-123, U+12c, U+130, U+15e-15f, U+306-307, U+327, U+1e60-1e61;
}

/* =========================================================
   Anaokulu demo — stil dosyası
   1) ORTAK: renk değişkenleri, temel, buton, logo, giriş sahnesi…
      (paneller de bunları kullanır — app.css; değiştirirken dikkat)
   2) SİTE: herkese açık ana sayfa, "boya defteri" teması (#site)
   ========================================================= */

/* =========================================================
   1) ORTAK
   ========================================================= */
:root {
  --bg: #FFF9F2;
  --surface: #FFFFFF;
  --tint: #FDF0E4;
  --text: #46425A;
  --heading: #2A2545;
  --muted: #6B6680;
  --line: #EDE4DA;

  --accent: #C2452A;
  --accent-soft: #FCE3DA;
  --green: #2A7F60;
  --green-soft: #DDF3EA;
  --amber: #93600A;
  --amber-soft: #FDEFD3;
  --red: #B3372A;
  --red-soft: #FBE1DE;
  --sun: #FFD66B;

  --sky: #2F6A9A;   --sky-soft: #E2F0FB;
  --leaf: #2A7F60;  --leaf-soft: #E1F4E9;
  --sunc: #8A5A00;  --sunc-soft: #FFF0C7;
  --berry: #A5325F; --berry-soft: #FBE3EE;

  --radius: 18px;
  --shadow: 0 6px 24px rgba(42, 37, 69, .07);
  --font: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Fredoka", "Quicksand", "Nunito", system-ui, sans-serif;
  --header-h: 76px;

  /* site teması (boya defteri) */
  --ink: #2A2545;
  --paper: #FFFCF4;
  --grid: rgba(90, 150, 210, .12);
  --round: "Fredoka", "Quicksand", "Nunito", system-ui, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;
  --crayon-sun: #FFD66B;
  --crayon-sky: #A9D8F5;
  --crayon-mint: #BDE7CF;
  --crayon-pink: #F8C4D6;
  /* yırtık kâğıt kenarları (mask) ve el çizimi tik */
  --torn-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0H200V9L195 12 189 8 183 13 176 9 170 12 163 7 157 11 150 8 144 13 137 9 131 12 124 7 118 11 111 9 105 13 98 8 92 12 85 9 79 13 72 8 66 11 59 7 53 12 46 9 40 13 33 8 27 11 20 7 14 12 7 9 0 12Z'/%3E%3C/svg%3E");
  --torn-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M0 16H200V7L195 4 189 8 183 3 176 7 170 4 163 9 157 5 150 8 144 3 137 7 131 4 124 9 118 5 111 7 105 3 98 8 92 4 85 7 79 3 72 8 66 5 59 9 53 4 46 7 40 3 33 8 27 5 20 9 14 4 7 7 0 4Z'/%3E%3C/svg%3E");
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13c3 2 5 5 6 7 3-7 7-12 12-16' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.6; font-size: 16px; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { color: var(--heading); line-height: 1.2; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
.container--narrow { max-width: 820px; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 99; padding: 10px 16px; background: var(--heading); color: #fff; border-radius: 10px; }
.skip:focus { left: 16px; }

.demo-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; padding: 7px 16px; background: var(--heading); color: #E9E6F2; font-size: 13.5px; text-align: center; }
.demo-bar__links { display: inline-flex; gap: 14px; }
.demo-bar a, .demo-bar button { color: var(--sun); font-weight: 800; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Butonlar */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: 999px; font-weight: 800; font-size: 15px; white-space: nowrap; border: 2px solid transparent; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s; }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(194, 69, 42, .25); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(194, 69, 42, .3); }
.btn--ghost { border-color: var(--line); background: var(--surface); color: var(--heading); }
.btn--ghost:hover { border-color: var(--accent); }
.btn--lg { height: 56px; padding: 0 32px; font-size: 17px; }
.btn--sm { height: 38px; padding: 0 16px; font-size: 14px; }

.link-arrow { font-weight: 800; color: var(--heading); border-bottom: 2px solid var(--accent-soft); padding-bottom: 2px; }
.link-arrow::after { content: " →"; color: var(--accent); }
.link-arrow:hover { border-color: var(--accent); }

/* Logo */
.logo { display: flex; align-items: center; gap: 10px; flex: none; }
.logo__mark { flex: none; width: 38px; height: 38px; background: url("../img/logo-isaret.svg") center / contain no-repeat; }
.logo__text { font-size: 20px; font-weight: 900; color: var(--heading); }

/* Doluluk çubuğu */
.meter { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 0 0 10px; }
.meter span { display: block; height: 100%; border-radius: 99px; background: var(--c, var(--accent)); }

/* KVKK onay kutusu */
.consent { display: flex !important; grid-template-columns: none; gap: 10px !important; align-items: flex-start; font-weight: 600 !important; }
.consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.consent a { color: var(--accent); text-decoration: underline; }

/* Çizim sahnesi (panel giriş ekranı kullanır) */
.scene { position: absolute; inset: 0; }
.scene__sun { position: absolute; top: 12%; right: 14%; width: 16%; aspect-ratio: 1; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 14px rgba(255, 214, 107, .25); }
.scene__hill { position: absolute; bottom: -20%; border-radius: 50%; }
.scene__hill--a { left: -10%; width: 75%; height: 60%; background: #BFE3C8; }
.scene__hill--b { right: -15%; width: 80%; height: 52%; background: #A8D8B4; }
.scene__house { position: absolute; left: 22%; bottom: 22%; width: 30%; height: 30%; background: #fff; border-radius: 10px; box-shadow: var(--shadow); }
.scene__house::before { content: ""; position: absolute; left: -12%; right: -12%; bottom: 96%; height: 70%; background: var(--accent); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.scene__house i { position: absolute; left: 40%; bottom: 0; width: 22%; height: 45%; background: var(--sky-soft); border-radius: 8px 8px 0 0; border: 3px solid #fff; }
.scene__tree { position: absolute; right: 22%; bottom: 24%; width: 12%; height: 34%; }
.scene__tree::before { content: ""; position: absolute; left: 42%; bottom: 0; width: 16%; height: 45%; background: #9C6B45; border-radius: 4px; }
.scene__tree::after { content: ""; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; border-radius: 50%; background: #5DB57A; }

/* Bildirim */
.toast { position: fixed; left: 50%; bottom: 96px; z-index: 60; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 12px 20px; border-radius: 14px; background: var(--heading); color: #fff; font-weight: 700; box-shadow: 0 12px 30px rgba(0, 0, 0, .2); }
.toast[hidden] { display: none; }

@media (max-width: 600px) {
  .container { padding-inline: 16px; }
  .demo-bar { font-size: 12.5px; row-gap: 0; padding-block: 4px 2px; }
  .demo-bar a, .demo-bar button { padding: 7px 2px; }
}

/* =========================================================
   2) SİTE — "boya defteri"
   Kareli defter zemini, bantlı polaroidler, el yazısı, yırtık kâğıtlar
   ========================================================= */
#site {
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--text);
  overflow-x: clip;
}
#site h1, #site h2, #site h3 { font-family: var(--round); font-weight: 600; color: var(--ink); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hand { font-family: var(--hand); }

/* Sticker butonlar: kalın mürekkep çizgi + kaydırılmış gölge */
#site .btn { font-family: var(--round); font-weight: 600; letter-spacing: .01em; border: 2.5px solid var(--ink); border-radius: 14px 18px 14px 20px; box-shadow: 3px 4px 0 var(--ink); transition: transform .15s, box-shadow .15s, background .15s; }
#site .btn:hover { transform: translate(-1px, -2px) rotate(-1.2deg); box-shadow: 5px 6px 0 var(--ink); }
#site .btn:active { transform: translate(2px, 2px); box-shadow: 1px 2px 0 var(--ink); }
#site .btn--primary { background: var(--accent); color: #fff; }
#site .btn--ghost { background: #fff; color: var(--ink); }
#site .link-arrow { font-family: var(--hand); font-size: 25px; font-weight: 700; color: var(--ink); border: 0; padding: 0 2px 4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6'%3E%3Cpath d='M0 3q6-4 12 0t12 0' fill='none' stroke='%23C2452A' stroke-width='2'/%3E%3C/svg%3E") repeat-x 0 100% / 24px 6px; }
#site .link-arrow:hover { color: var(--accent); }

/* ---------- Üst çubuk ---------- */
.header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(255, 252, 244, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8'%3E%3Cpath d='M0 4q10-6 20 0t20 0' fill='none' stroke='%232A2545' stroke-opacity='.3' stroke-width='2'/%3E%3C/svg%3E") repeat-x 0 0 / 40px 8px; pointer-events: none; }
.header__inner { position: relative; z-index: 2; height: var(--header-h); display: flex; align-items: center; gap: 24px; } /* kurdeleler dalgalı çizginin üstünde */
/* Logo işareti (E1: sera kemeri ve fide). Paneller ve altbilgi de aynı dosyayı kullanır. */
#site .logo__mark { width: 42px; height: 42px; border-radius: 0; box-shadow: none; background: url("../img/logo-isaret.svg") center / contain no-repeat; }
#site .logo__text { font-family: var(--round); font-weight: 600; font-size: 22px; color: var(--ink); }
/* Menü: defter ayracı kurdeleleri. Üst kenardan sarkar, alt ucu V kesikli ve dikişli;
   üzerine gelince uzar, bulunulan bölümün kurdelesi (.is-aktif) aşağıda kalır. */
.nav { display: flex; align-self: stretch; align-items: flex-start; gap: 6px; margin-left: auto; }
.nav .ayrac {
  --uzun: 0px;
  --sark: 16px; /* üst çubuğun altına sarkma */
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;
  height: calc(var(--header-h) + var(--sark) + var(--uzun)); padding: 0 9px 22px;
  background: var(--rb); color: var(--ink); font: 600 15px/1.1 var(--round); white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 11px), 0 100%);
  filter: drop-shadow(0 3px 0 rgba(42, 37, 69, .18));
  transition: height .35s cubic-bezier(.3, 1.5, .5, 1);
}
/* dikiş: kurdelenin iki yanında ve kesiğin üstünde kesik çizgi */
.nav .ayrac::before { content: ""; position: absolute; inset: 0 4px 6px; border: 1.5px dashed rgba(42, 37, 69, .28); border-top: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4px), 50% calc(100% - 13px), 0 calc(100% - 4px)); pointer-events: none; }
.nav .ayrac svg { width: 20px; height: 20px; flex: none; }
.nav .ayrac:hover { --uzun: 8px; }
.nav .ayrac.is-aktif { --uzun: 16px; font-weight: 700; }
/* sayfa kaydırılınca kurdeleler kısalır, alttaki içeriği örtmez; bulunulan bölümünki biraz sarkmaya devam eder */
.header.is-scrolled .nav .ayrac { --sark: 0px; }
.header.is-scrolled .nav .ayrac.is-aktif { --uzun: 10px; }
.nav .ayrac:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
/* kaydırdıkça üst çubuğun dalgalı çizgisi pastel boyayla dolar */
.header__iz { position: absolute; left: 0; bottom: -7px; width: var(--ilerleme, 0%); height: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8'%3E%3Cpath d='M0 4q10-6 20 0t20 0' fill='none' stroke='%23F4A06B' stroke-width='3'/%3E%3C/svg%3E") repeat-x 0 0 / 40px 8px; pointer-events: none; }
.header__actions { display: flex; align-items: center; gap: 10px; }
/* Dil seçici (TR ↔ EN): kesik çizgili daire, üzerine gelince güneş sarısı */
.dil { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border: 2px dashed var(--ink); border-radius: 50%; font: 700 14px/1 var(--round); letter-spacing: .04em; color: var(--ink); transition: transform .15s, background .15s; }
.dil:hover { background: var(--crayon-sun); transform: rotate(-6deg); }
.dil:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.header__login { width: 42px; height: 42px; padding: 0; gap: 0; } /* yalnız simge; menüde "Veli Paneli" kurdelesi ve altbilgide öğretmen/yönetici girişi var */
.header__login span { display: none; }
.header__login svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.header__cta { height: 42px; padding: 0 18px; }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 13px 10px; border: 0; background: none; cursor: pointer; flex-direction: column; justify-content: space-between; }
.menu-toggle span { display: block; height: 3px; background: var(--ink); border-radius: 3px; transition: transform .25s, opacity .25s; }
.menu-toggle span:nth-child(2) { width: 75%; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Hero: video + not kâğıdı ---------- */
.hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(600px, calc(100vh - 110px), 800px); padding: 64px 0 120px; }
.hero__video {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background: #CFC3B5 url("../video/hero-poster.webp") center / cover;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 22px) no-repeat, var(--torn-b) bottom / 100% 23px no-repeat;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 22px) no-repeat, var(--torn-b) bottom / 100% 23px no-repeat;
}
/* telefonda kapak görselinin 720 px'lik hafif sürümü (index.html'deki önden yükleme ile aynı eşik: 700 px) */
@media (max-width: 700px) { .hero__video { background-image: url("../video/hero-poster-720.webp"); } }
.hero__vid { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(42, 37, 69, .5), rgba(42, 37, 69, .14) 48%, rgba(42, 37, 69, 0) 72%), linear-gradient(0deg, rgba(42, 37, 69, .28), rgba(42, 37, 69, 0) 38%); }
.plane { position: absolute; top: 12%; left: 0; width: 190px; color: #fff; animation: fly 24s linear infinite; }
.plane svg { display: block; width: 100%; height: auto; overflow: visible; animation: bob 3.2s ease-in-out infinite alternate; }
.hero__cloud { position: absolute; top: 7%; right: 24%; width: 104px; animation: drift 9s ease-in-out infinite alternate; }
.hero__cloud svg { display: block; width: 100%; height: auto; }
.hero__pause { position: absolute; top: 18px; right: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border: 0; border-radius: 999px; background: rgba(42, 37, 69, .6); color: #fff; font: 700 13px var(--font); cursor: pointer; backdrop-filter: blur(6px); }
.hero__pause[hidden] { display: none; }
.hero__pause-ic { width: 14px; height: 14px; background: linear-gradient(90deg, #fff 0 35%, transparent 35% 65%, #fff 65%); }
.hero__pause.is-paused .hero__pause-ic { background: #fff; clip-path: polygon(10% 0, 100% 50%, 10% 100%); }
.hero.is-off .plane, .hero.is-off .plane svg, .hero.is-off .hero__cloud, .hero.is-off .tour__ring { animation-play-state: paused; }

.hero__inner { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }

/* Çizgili not kâğıdı */
.paper-note {
  position: relative; width: min(100%, 590px); padding: 42px 42px 34px 76px;
  background-color: #FFFEF8;
  background-image: linear-gradient(90deg, transparent 54px, rgba(214, 80, 60, .45) 54px 56px, transparent 56px), repeating-linear-gradient(to bottom, transparent 0 33px, rgba(90, 150, 210, .22) 33px 34px);
  border-radius: 3px 3px 6px 4px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 26px 44px -10px rgba(20, 15, 40, .45);
  transform: rotate(-1.6deg);
}
.tape {
  position: absolute; width: 118px; height: 32px; z-index: 2;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .35) 0 6px, transparent 6px 12px), var(--tape, rgba(255, 214, 107, .88));
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 50% 2%, 92% 0, 96% 10%, 100% 4%, 100% 92%, 96% 100%, 92% 90%, 50% 98%, 8% 100%, 4% 90%, 0 96%);
}
.tape--top { top: -16px; left: 50%; transform: translateX(-50%) rotate(-3deg); }
.hero__eyebrow { display: block; font-size: 27px; font-weight: 700; line-height: 1.1; color: var(--accent); }
#site .hero__title { margin: 8px 0 16px; font-size: clamp(36px, 4.2vw, 56px); font-weight: 700; line-height: 1.06; letter-spacing: -.01em; }
.scribble { display: block; width: 62%; height: auto; margin-top: 6px; overflow: visible; }
.scribble path { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; animation: draw 1.2s .5s cubic-bezier(.6, .1, .3, 1) forwards; }
.hero__lead { margin: 0 0 26px; font-size: 17.5px; color: var(--text); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
/* min-height: liste JavaScript ile dolar; 4 satırlık yer baştan ayrılır, not kâğıdı dolunca yukarı kaymaz (CLS) */
.hero__facts { list-style: none; margin: 26px 0 0; padding: 18px 0 0; border-top: 2px dashed rgba(42, 37, 69, .15); display: grid; gap: 8px; align-content: start; min-height: 146px; }
.hero__facts li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.hero__facts svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hero__facts b { color: var(--ink); }
/* "Şu an okulda": günlük akıştan gerçek saatle; kapalıyken gri, açıkken nabız atan kırmızı nokta */
.hero__facts .canli { align-items: flex-start; }
.canli__nokta { position: relative; width: 20px; height: 20px; flex: none; display: grid; place-items: center; }
.canli__nokta::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(194, 69, 42, .45); animation: nabiz 1.8s ease-out infinite; }
.canli.is-kapali .canli__nokta::before { background: #A29CB3; animation: none; }
.canli__et { font: 800 11.5px/1 var(--font); letter-spacing: .08em; color: var(--accent); margin-right: 4px; }
.canli.is-kapali .canli__et { color: var(--muted); }
.canli a { color: var(--ink); font-weight: 800; text-decoration: underline wavy rgba(194, 69, 42, .55); text-underline-offset: 4px; }
.canli a:hover { color: var(--accent); }
@keyframes nabiz { 70% { box-shadow: 0 0 0 9px rgba(194, 69, 42, 0); } 100% { box-shadow: 0 0 0 0 rgba(194, 69, 42, 0); } }

/* "Okulu 60 saniyede gezin" dönen çıkartma */
.tour { position: relative; flex: none; width: 136px; height: 136px; margin-bottom: 8px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .45), 0 16px 30px rgba(0, 0, 0, .28); cursor: pointer; transition: transform .25s; }
.tour:hover { transform: scale(1.07) rotate(-4deg); }
.tour__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; }
.tour__ring text { font: 600 12px var(--round); letter-spacing: .08em; fill: var(--ink); }
.tour__play { position: absolute; inset: 36px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15); }
.tour__play::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -11px 0 0 -6px; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }

/* ---------- Güven çıkartmaları ---------- */
.stickers { position: relative; z-index: 2; margin-top: -92px; }
.stickers__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 30px; }
.sticker { --rot: -6deg; width: 164px; height: 164px; display: grid; place-content: center; gap: 4px; padding: 18px; border-radius: 50%; text-align: center; background: var(--sc); box-shadow: 0 0 0 7px #fff, 0 14px 26px rgba(42, 37, 69, .22); transform: rotate(var(--rot)); transition: transform .3s cubic-bezier(.2, .8, .3, 1.5); }
.sticker:hover { transform: rotate(calc(var(--rot) * -1)) scale(1.05); }
.sticker strong { font: 700 32px/1 var(--round); color: var(--ink); }
.sticker span { font-size: 13px; line-height: 1.25; font-weight: 800; color: rgba(42, 37, 69, .82); }
.sticker--sun  { --sc: var(--crayon-sun); }
.sticker--sky  { --sc: var(--crayon-sky);  --rot: 4deg; }
.sticker--mint { --sc: var(--crayon-mint); --rot: -3deg; }
.sticker--pink { --sc: var(--crayon-pink); --rot: 7deg; }

/* ---------- Bölüm ortak ---------- */
.section { position: relative; padding: 100px 0; }
.shead { max-width: 740px; margin-bottom: 46px; }
.shead--c { margin-inline: auto; text-align: center; }
.shead__kicker { display: inline-flex; align-items: flex-start; gap: 6px; margin-bottom: 6px; font: 700 29px/1 var(--hand); color: var(--accent); }
.shead__kicker svg { width: 46px; height: 30px; margin-top: 8px; color: var(--accent); }
#site .shead__title { margin: 0; font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.shead__sub, .section__lead { margin: 14px 0 0; font-size: 17px; font-weight: 600; color: var(--muted); }
.shead--c .shead__sub { max-width: 560px; margin-inline: auto; }
.section__lead { margin: 16px 0 24px; max-width: 520px; }

/* Fosforlu kalem vurgusu (görününce çizilir) */
.hl { padding: 0 .12em; color: inherit; border-radius: 6px; background: linear-gradient(100deg, transparent 0 2%, var(--hlc, var(--crayon-sun)) 2% 97%, transparent 97%) no-repeat 0 88% / 0% 44%; transition: background-size .9s cubic-bezier(.2, .7, .3, 1) .3s; }
.is-in .hl { background-size: 100% 44%; }
.hl--pink { --hlc: var(--crayon-pink); }
.hl--mint { --hlc: var(--crayon-mint); }
.hl--sky { --hlc: var(--crayon-sky); }
.hl--white { --hlc: #fff; }

/* Renkli el işi kâğıdı bölümler (üstü altı yırtık) */
.paper {
  background-color: var(--pc);
  -webkit-mask: var(--torn-t) top / 100% 23px no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 44px) no-repeat, var(--torn-b) bottom / 100% 23px no-repeat;
  mask: var(--torn-t) top / 100% 23px no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 44px) no-repeat, var(--torn-b) bottom / 100% 23px no-repeat;
}
.paper--sky  { --pc: #DDEFFB; }
.paper--sun  { --pc: #FFF1C4; }
.paper--mint { --pc: #DCF2E5; }

/* Kenar karalamaları */
.doodle { position: absolute; width: 70px; height: 70px; color: var(--dc, var(--accent)); opacity: .85; filter: url(#rough); pointer-events: none; animation: wiggle 5s ease-in-out infinite alternate; }
.doodle--a { top: 70px; right: 6%; width: 86px; height: 86px; --dc: #F2B632; }
.doodle--b { bottom: 70px; left: 3%; --dc: var(--berry); animation-duration: 7s; }
.doodle--c { top: 70px; left: 6%; --dc: var(--accent); }
.doodle--d { top: 60px; right: 5%; --dc: var(--accent); width: 60px; height: 60px; }
.doodle--e { top: 80px; right: 6%; --dc: var(--leaf); width: 80px; height: 80px; }
.doodle--f { top: 70px; left: 5%; --dc: #7DB8E4; width: 70px; height: 70px; }
.doodle--chalk1 { top: 50px; left: 5%; --dc: rgba(255, 255, 255, .7); width: 84px; height: 84px; }
.doodle--chalk2 { bottom: 70px; right: 6%; --dc: #FFD66B; animation-duration: 6s; }

/* Görününce "sayfaya yapıştırılma" efekti */
.reveal:not(.gameboard):not(.is-in) > *, .reveal-self:not(.is-in) { opacity: 0; }
.reveal.is-in:not(.gameboard) > * { animation: stick .7s cubic-bezier(.2, .8, .3, 1.25) backwards; }
.reveal.is-in > :nth-child(2) { animation-delay: .09s; }
.reveal.is-in > :nth-child(3) { animation-delay: .18s; }
.reveal.is-in > :nth-child(4) { animation-delay: .27s; }
.reveal.is-in > :nth-child(5) { animation-delay: .36s; }
.reveal.is-in > :nth-child(6) { animation-delay: .45s; }
.reveal-self.is-in { animation: rise .7s ease backwards; }

/* ---------- Yaş grupları: polaroidler ---------- */
.polaroids { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 26px; }
.pola { --rot: -2.2deg; position: relative; display: flex; flex-direction: column; padding: 12px 12px 22px; background: #fff; box-shadow: 0 2px 3px rgba(0, 0, 0, .06), 0 16px 30px rgba(42, 37, 69, .14); transform: rotate(var(--rot)); transition: transform .35s cubic-bezier(.2, .8, .3, 1.3), box-shadow .35s; }
.pola:nth-child(2) { --rot: 1.6deg; }
.pola:nth-child(3) { --rot: -1.2deg; }
.pola:nth-child(4) { --rot: 2.4deg; }
.pola:hover { z-index: 2; transform: rotate(0deg) translateY(-8px) scale(1.02); box-shadow: 0 2px 3px rgba(0, 0, 0, .06), 0 26px 44px rgba(42, 37, 69, .2); }
.pola .tape { top: -15px; left: 50%; transform: translateX(-50%) rotate(-4deg); }
.pola:nth-child(even) .tape { transform: translateX(-50%) rotate(3deg); }
.pola__photo { position: relative; aspect-ratio: 4 / 3; background: var(--c-soft); }
.pola__img { width: 100%; height: 100%; object-fit: cover; }
.pola__age { position: absolute; right: -12px; bottom: -20px; width: 72px; height: 72px; display: grid; place-items: center; padding: 8px; border-radius: 50%; text-align: center; font: 600 16px/1 var(--round); color: var(--ink); background: var(--cb); box-shadow: 0 0 0 4px #fff, 0 6px 12px rgba(42, 37, 69, .18); outline: 2px dashed rgba(42, 37, 69, .3); outline-offset: -8px; transform: rotate(10deg); }
#site .pola__name { margin: 18px 4px 4px; font: 700 36px/1 var(--hand); }
.pola__desc { margin: 0 4px 16px; font-size: 15px; }
.pola .meter { height: 14px; margin: auto 4px 8px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; }
.pola .meter span { border-radius: 0; background: repeating-linear-gradient(-45deg, var(--cb) 0 6px, var(--c) 6px 9px); }
.status { display: inline-flex; align-items: center; gap: 8px; margin: 0 4px; font-size: 14px; font-weight: 800; }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.status[data-status="acik"] { color: var(--green); }
.status[data-status="az"] { color: var(--amber); }
.status[data-status="dolu"] { color: var(--red); }
/* aynı yaşın tam gün ve yarım gün sınıfı: kesik çizgiyle ayrılmış iki satır */
#site .pola__name span { font-size: .7em; color: var(--muted); }
.pola__classes { list-style: none; margin: auto 4px 0; padding: 0; display: grid; gap: 10px; }
.pola__class { display: grid; gap: 6px; padding-top: 10px; border-top: 2px dashed rgba(42, 37, 69, .14); }
.pola__cname { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 600 16px/1.2 var(--round); color: var(--ink); }
.pola__cname small { flex: none; font: 800 11.5px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.pola .pola__class .meter { height: 11px; margin: 0; border-width: 1.5px; }
.pola__class .status { margin: 0; font-size: 13.5px; }
.pola__cta { align-self: flex-start; margin: 12px 4px 0; padding: 0; border: 0; background: none; font: 700 23px/1.1 var(--hand); color: var(--c); cursor: pointer; }
.pola__cta::after { content: " →"; }
.pola__cta:hover { text-decoration: underline wavy; text-underline-offset: 5px; }
.pola--sky   { --cb: var(--crayon-sky);  --c: var(--sky);   --c-soft: var(--sky-soft);   --tape: rgba(169, 216, 245, .92); }
.pola--leaf  { --cb: var(--crayon-mint); --c: var(--leaf);  --c-soft: var(--leaf-soft);  --tape: rgba(189, 231, 207, .95); }
.pola--sun   { --cb: var(--crayon-sun);  --c: var(--sunc);  --c-soft: var(--sunc-soft);  --tape: rgba(255, 214, 107, .9); }
.pola--berry { --cb: var(--crayon-pink); --c: var(--berry); --c-soft: var(--berry-soft); --tape: rgba(248, 196, 214, .95); }

/* ---------- Ücretler: spiralli defter + yapışkan not ---------- */
.price { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 44px; }
.notebook {
  --rot: -.6deg; position: relative; flex: 1 1 560px; max-width: 720px; padding: 46px 44px 40px 96px;
  background-color: #fff;
  background-image: linear-gradient(90deg, transparent 74px, rgba(214, 80, 60, .4) 74px 76px, transparent 76px), repeating-linear-gradient(transparent 0 35px, rgba(90, 150, 210, .18) 35px 36px);
  border-radius: 6px 14px 14px 6px; box-shadow: 0 2px 0 rgba(42, 37, 69, .05), 0 22px 44px -14px rgba(42, 37, 69, .3);
  transform: rotate(var(--rot));
}
.notebook::before { content: ""; position: absolute; left: -16px; top: 26px; bottom: 26px; width: 44px; background: radial-gradient(ellipse 15px 7px at 22px 50%, transparent 0 9px, #8E97AA 9.5px 12px, transparent 12.5px) 0 0 / 44px 40px repeat-y; }
.notebook::after { content: ""; position: absolute; left: 22px; top: 26px; bottom: 26px; width: 18px; background: radial-gradient(circle at 9px 20px, #EFE7D6 0 6px, transparent 6.5px) 0 0 / 18px 40px repeat-y; }
#site .notebook__title { margin: 0 0 12px; font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.25; }
.circled { position: relative; display: inline-block; padding: 0 .18em; white-space: nowrap; }
.circled::after { content: ""; position: absolute; inset: -8px -10px -6px -8px; border: 3px solid var(--accent); border-radius: 50% 45% 55% 48% / 55% 50% 45% 50%; transform: rotate(-2deg); filter: url(#rough); pointer-events: none; }
.notebook__note { margin: 14px 0 20px; color: var(--muted); font-weight: 600; }
.checklist { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 10px; font-weight: 700; color: var(--ink); }
.checklist li::before { content: ""; flex: none; width: 24px; height: 24px; background: var(--leaf); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }
.calc { margin: 8px 0 22px; padding: 20px; background: #FFFBEA; border: 2.5px dashed rgba(42, 37, 69, .3); border-radius: 18px 12px 20px 14px; }
.calc__title { margin: 0 0 12px; font: 700 26px/1 var(--hand); color: var(--accent); }
.calc__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc label, .rform label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
.calc select, .rform select, .rform input:not([type="radio"]):not([type="checkbox"]) { height: 46px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; font: inherit; color: var(--text); }
.calc select:focus, .rform select:focus, .rform input:focus { outline: 3px solid var(--crayon-sun); outline-offset: 1px; }
.calc__out { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 14px; font-weight: 700; }
.calc__out b { font: 700 30px var(--round); color: var(--ink); }
.calc__out span { color: var(--green); font-weight: 800; }
.calc__out small { flex-basis: 100%; color: var(--muted); font-size: 14px; font-weight: 700; }
.programs { display: flex; flex-wrap: wrap; gap: 10px; }
.programs span { display: grid; padding: 8px 14px; border: 2px solid var(--ink); border-radius: 12px 14px 10px 14px; background: #fff; box-shadow: 2px 3px 0 var(--ink); font-size: 14px; }
.programs b { font-family: var(--round); font-weight: 600; color: var(--ink); }
.programs span:nth-child(1) { background: var(--crayon-sun); }
.programs span:nth-child(2) { background: var(--crayon-mint); }
.programs span:nth-child(3) { background: var(--crayon-sky); }

.postit { --rot: 2.5deg; position: relative; flex: 0 1 350px; padding: 44px 30px 30px; background: linear-gradient(165deg, #FFE990, #FFD95C); border-radius: 2px 2px 28px 2px / 2px 2px 10px 2px; box-shadow: 0 24px 26px -18px rgba(90, 60, 0, .55), 0 2px 4px rgba(90, 60, 0, .1); color: var(--ink); transform: rotate(var(--rot)); }
.postit__pin { position: absolute; top: -10px; left: 50%; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FF9C8C, var(--accent) 55%, #7E2414); box-shadow: 0 6px 6px rgba(0, 0, 0, .25); }
.postit__tag { font: 700 27px/1 var(--hand); color: var(--accent); }
#site .postit h3 { margin: 8px 0 10px; font-size: 28px; font-weight: 700; line-height: 1.15; }
.postit p { margin: 0 0 14px; }
.postit ul { margin: 0 0 18px; padding-left: 20px; font-weight: 700; }
.postit__date { display: inline-block; font: 700 25px/1 var(--hand); border-bottom: 2px solid var(--accent); }

/* ---------- Bir günümüz: oyun tahtası ---------- */
.gameboard { position: relative; max-width: 1000px; margin: 0 auto; }
.board__path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.board__road { fill: none; stroke: #fff; stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.board__dots { fill: none; stroke: var(--ink); stroke-opacity: .4; stroke-width: 4; stroke-dasharray: 1 14; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.board__stops { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(var(--rows), 196px); }
.stop { grid-row: var(--r); grid-column: var(--c); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.stop time { width: 94px; height: 94px; display: grid; place-items: center; border-radius: 50%; background: var(--sc); border: 3px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); font: 600 23px var(--round); color: var(--ink); transition: transform .3s cubic-bezier(.2, .8, .3, 1.6); }
.stop:hover time { transform: rotate(-8deg) scale(1.08); }
.stop span { max-width: 210px; padding: 2px 12px; border-radius: 10px; background: rgba(255, 255, 255, .85); font: 700 24px/1.1 var(--hand); color: var(--ink); }
.stop span small { display: block; font-size: 19px; color: var(--muted); }
.stop em { position: absolute; top: 14px; left: 4%; font: 700 25px/1 var(--hand); font-style: normal; color: var(--accent); transform: rotate(-8deg); }
.stop:last-child em { left: auto; right: 4%; transform: rotate(6deg); }
.stop--sun { --sc: var(--crayon-sun); }
.stop--pink { --sc: var(--crayon-pink); }
.stop--mint { --sc: var(--crayon-mint); }
.stop--sky { --sc: #fff; }
/* oyuncak araba: yolun başından sonuna gider, duraklardaki saat dairelerinin altından geçer.
   Yol (offset-path) site.js arabaYolu() ile gerçek piksele göre verilir; destek yoksa araba gösterilmez. */
.araba { position: absolute; left: 0; top: 0; width: 46px; height: 29px; offset-rotate: auto; offset-distance: 0%; opacity: 0; pointer-events: none; filter: drop-shadow(0 3px 0 rgba(42, 37, 69, .22)); }
.araba svg { display: block; width: 100%; height: 100%; }
.gameboard.is-in .araba { animation: yolculuk 16s ease-in-out .8s infinite; }
@keyframes yolculuk { 0% { offset-distance: 0%; opacity: 0; } 3% { opacity: 1; } 90% { offset-distance: 100%; opacity: 1; } 97%, 100% { offset-distance: 100%; opacity: 0; } }
@supports not (offset-path: path("M0 0")) { .araba { display: none; } }
/* oyun piyonu: şu anki etkinliğin durağında durur */
.stop.is-now time { position: relative; outline: 4px dashed var(--accent); outline-offset: 5px; }
.piyon { position: absolute; top: -38px; right: -22px; width: 34px; height: 48px; z-index: 2; animation: hop 1.6s ease-in-out infinite; }
.stop__simdi { font: 700 22px/1 var(--hand); color: var(--accent); white-space: nowrap; transform: rotate(-3deg); }
@keyframes hop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-9px) rotate(-4deg); } 60% { transform: translateY(0); } }
.gameboard:not(.is-in) .stop, .gameboard:not(.is-in) .board__path { opacity: 0; }
.gameboard.is-in .board__path { animation: rise .8s ease backwards; }
.gameboard.is-in .stop { animation: pop .55s cubic-bezier(.2, .9, .3, 1.5) backwards; animation-delay: calc(var(--i) * 90ms + .2s); }

/* Mantar pano */
.cork {
  position: relative; margin-top: 90px; padding: 60px 36px 46px;
  background-color: #D6AE7B;
  background-image: radial-gradient(rgba(110, 70, 30, .28) 1px, transparent 1.6px), radial-gradient(rgba(255, 240, 210, .35) 1px, transparent 1.6px), radial-gradient(rgba(110, 70, 30, .16) 1.5px, transparent 2.2px);
  background-size: 9px 9px, 13px 13px, 23px 23px; background-position: 0 0, 4px 6px, 10px 3px;
  border: 16px solid #A5703F; border-image: linear-gradient(90deg, #A5703F, #BD8756 28%, #93602F 55%, #B47C49 80%, #9A6636) 1;
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, .28), 0 20px 36px rgba(42, 37, 69, .22);
}
#site .cork__title { position: absolute; top: -36px; left: 50%; margin: 0; transform: translateX(-50%) rotate(-1.5deg); white-space: nowrap; }
.cork__title span { position: relative; display: inline-block; padding: 12px 28px; background: #fff; font-size: 24px; font-weight: 600; box-shadow: 0 8px 14px rgba(0, 0, 0, .16); }
.cork__title span::before, .cork__title span::after { content: ""; position: absolute; top: -10px; width: 60px; height: 24px; background: rgba(169, 216, 245, .85); }
.cork__title span::before { left: -18px; transform: rotate(-24deg); }
.cork__title span::after { right: -18px; transform: rotate(24deg); }
.cork__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 30px; }
.pin-card { --rot: -2deg; position: relative; padding: 10px 10px 16px; background: #fff; box-shadow: 0 12px 20px rgba(60, 35, 10, .32); transform: rotate(var(--rot)); transition: transform .3s; }
.pin-card:nth-child(2) { --rot: 1.5deg; }
.pin-card:nth-child(3) { --rot: -1deg; }
.pin-card:nth-child(4) { --rot: 2deg; }
.pin-card:nth-child(5) { --rot: -1.5deg; }
.pin-card:nth-child(6) { --rot: 1deg; }
.pin-card:hover { transform: rotate(0deg) scale(1.03); z-index: 2; }
.pin-card::before { content: ""; position: absolute; top: -9px; left: 50%; z-index: 2; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7), var(--pin) 50%, rgba(0, 0, 0, .35)); box-shadow: 0 5px 5px rgba(0, 0, 0, .3); }
.pin-card__img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
#site .pin-card h4 { margin: 12px 4px 2px; font: 700 29px/1 var(--hand); color: var(--pcol); }
.pin-card p { margin: 0 4px; font-size: 14.5px; }
.pin-card--0 { --pin: #E0533A; --pcol: var(--sky); }
.pin-card--1 { --pin: #3E86C6; --pcol: var(--leaf); }
.pin-card--2 { --pin: #3AA66E; --pcol: var(--sunc); }
.pin-card--3 { --pin: #F2B632; --pcol: var(--berry); }

/* ---------- Güven: dikişli yamalar ---------- */
.patches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.patch { --rot: -1deg; position: relative; display: flex; gap: 16px; padding: 26px 24px; border-radius: 22px; background: var(--pb); box-shadow: 0 3px 0 rgba(42, 37, 69, .08), 0 14px 24px rgba(42, 37, 69, .08); transform: rotate(var(--rot)); }
.patch::before { content: ""; position: absolute; inset: 8px; border: 2px dashed var(--ps); border-radius: 15px; pointer-events: none; }
.patch:nth-child(4n+1) { --pb: #E3F5EA; --ps: #7DBF98; --pi: var(--leaf); }
.patch:nth-child(4n+2) { --pb: #E4F2FC; --ps: #86B9DE; --pi: var(--sky); --rot: .8deg; }
.patch:nth-child(4n+3) { --pb: #FFF3CC; --ps: #E3B94A; --pi: var(--sunc); --rot: -.5deg; }
.patch:nth-child(4n+4) { --pb: #FCE6EE; --ps: #E59AB6; --pi: var(--berry); --rot: 1.2deg; }
.patch svg { position: relative; width: 50px; height: 50px; flex: none; padding: 11px; border-radius: 50%; background: #fff; fill: none; stroke: var(--pi); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; box-shadow: 0 0 0 2px var(--ps); }
#site .patch h3 { margin: 2px 0 4px; font-size: 19px; font-weight: 600; }
.patch p { margin: 0; font-size: 15px; }
/* Beslenme kartında haftalık menü bağlantısı (el yazısı, altı dalgalı çizgi) */
.patch__menu { position: relative; margin-top: 8px; padding: 2px 0 4px; border: 0; background: none; font: 700 22px/1.1 var(--hand); color: var(--ink); cursor: pointer; text-decoration: underline wavy var(--ps); text-underline-offset: 5px; }
.patch__menu::after { content: " →"; color: var(--accent); }
.patch__menu:hover { color: var(--accent); }
.patch__menu:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

/* ---------- Veli uygulaması ---------- */
.app-preview { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.app-preview .checklist { margin-bottom: 28px; }
.dot-live { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--font); color: var(--green); }
.dot-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 1.6s infinite; }

/* ---------- Kadro: yaka kartları ---------- */
.nametags { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.nametag { --rot: -1.5deg; position: relative; overflow: hidden; border: 3px solid var(--nc); border-radius: 18px; background: #fff; box-shadow: 0 16px 28px rgba(42, 37, 69, .13); transform: rotate(var(--rot)); transition: transform .3s; }
.nametag:hover { transform: rotate(0deg) translateY(-6px); }
.nametag:nth-child(4n+1) { --nc: var(--accent); }
.nametag:nth-child(4n+2) { --nc: var(--sky); --rot: 1.2deg; }
.nametag:nth-child(4n+3) { --nc: var(--leaf); --rot: -.8deg; }
.nametag:nth-child(4n+4) { --nc: var(--berry); --rot: 1.8deg; }
.nametag::before { content: ""; position: absolute; top: 10px; left: 50%; width: 36px; height: 8px; margin-left: -18px; border-radius: 6px; background: var(--paper); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
/* kart bir düğmedir: basınca öğretmen tanıtımı açılır */
button.nametag { display: block; width: 100%; padding: 0; font: inherit; color: inherit; text-align: center; cursor: pointer; }
.nametag:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.nametag__band { display: block; padding: 28px 12px 50px; background: var(--nc); color: #fff; text-align: center; }
.nametag__band b { display: block; font: 600 30px/1 var(--round); letter-spacing: .08em; }
.nametag__band span { font-size: 15px; font-weight: 700; }
.nametag__body { display: grid; justify-items: center; gap: 4px; padding: 0 18px 20px; text-align: center; }
/* fotoğraf yaka kartının bandına taşar */
.nametag__foto { width: 104px; height: 104px; max-width: none; margin: -44px 0 6px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 0 0 3px var(--nc), 0 8px 16px rgba(42, 37, 69, .18); background: var(--paper); }
.nametag__foto--harf { display: grid; place-items: center; font: 600 40px var(--round); color: var(--ink); background: var(--crayon-sun); }
.nametag__ad { width: 100%; margin: 0 0 6px; padding-bottom: 6px; border-bottom: 2px solid rgba(42, 37, 69, .15); font: 700 32px/1.05 var(--hand); color: var(--ink); }
.nametag__role { font-size: 14px; font-weight: 800; color: var(--nc); }
.nametag__detail { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.nametag__tani { margin-top: 6px; font: 700 21px/1 var(--hand); color: var(--nc); transition: transform .2s; }
.nametag:hover .nametag__tani { transform: translateX(4px); }

/* ---------- Yorumlar: konuşma balonları ---------- */
.bubbles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: start; }
.bubble { margin: 0; }
.bubble:nth-child(3n+1) { --bc: var(--crayon-sun); }
.bubble:nth-child(3n+2) { --bc: var(--crayon-sky); --rot: 1deg; }
.bubble:nth-child(3n+3) { --bc: var(--crayon-pink); --rot: -1deg; }
.bubble__box { position: relative; padding: 24px 24px 22px; border: 2.5px solid var(--ink); border-radius: 30px; background: #fff; box-shadow: 6px 7px 0 var(--bc); }
.bubble__box::before { content: ""; position: absolute; left: 34px; bottom: -25px; width: 30px; height: 25px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 0 100%); }
.bubble__box::after { content: ""; position: absolute; left: 37px; bottom: -19px; width: 22px; height: 19px; background: #fff; clip-path: polygon(0 0, 100% 0, 0 100%); }
.bubble__stars { color: #F2A51A; font-size: 18px; letter-spacing: 3px; }
.bubble blockquote { margin: 8px 0 0; font: 700 25px/1.18 var(--hand); color: var(--ink); }
.bubble figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 32px; padding-left: 14px; font-size: 15px; }
.bubble__av { width: 42px; height: 42px; display: grid; place-items: center; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--bc); font: 600 18px var(--round); color: var(--ink); }
.bubble figcaption b { color: var(--ink); }
.bubble figcaption span:last-child { color: var(--muted); font-weight: 600; }

/* ---------- Kayıt: kara tahta + seksek ---------- */
.chalk {
  background-color: #2E4A3C;
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.5px), radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, .08), transparent 50%), radial-gradient(ellipse at 80% 75%, rgba(255, 255, 255, .06), transparent 50%);
  background-size: 6px 6px, 100% 100%, 100% 100%;
  border-top: 18px solid #9C6B45; border-bottom: 26px solid #86572F;
  box-shadow: inset 0 10px 20px rgba(0, 0, 0, .3);
  color: rgba(255, 255, 255, .88); padding-bottom: 130px;
}
.chalk::after { content: ""; position: absolute; bottom: -19px; left: 12%; width: 48px; height: 10px; border-radius: 4px; background: #fff; box-shadow: 64px 1px 0 var(--crayon-pink), 124px 0 0 var(--crayon-sun); }
.chalk .shead__kicker { color: var(--crayon-sun); }
#site .chalk .shead__title { color: #fff; font: 700 clamp(40px, 4.6vw, 60px)/1 var(--hand); }
.chalk .shead__sub { color: rgba(255, 255, 255, .78); }
.hop { list-style: none; margin: 0 auto; padding: 0; max-width: 1060px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.hop li { --rot: 0deg; position: relative; padding: 26px 22px 26px; text-align: center; transform: rotate(var(--rot)); }
.hop li:nth-child(even) { margin-top: 40px; --rot: 1.5deg; }
.hop li:nth-child(odd) { --rot: -1deg; }
.hop li::before { content: ""; position: absolute; inset: 0; border: 3px solid rgba(255, 255, 255, .82); border-radius: 6px; filter: url(#rough); }
.hop li:not(:last-child)::after { content: "→"; position: absolute; right: -30px; top: 42%; font: 700 38px/1 var(--hand); color: rgba(255, 255, 255, .65); }
.hop__n { display: block; font: 700 76px/1 var(--hand); color: var(--hc); }
.hop li:nth-child(1) { --hc: var(--crayon-sun); }
.hop li:nth-child(2) { --hc: var(--crayon-pink); }
.hop li:nth-child(3) { --hc: var(--crayon-mint); }
.hop li:nth-child(4) { --hc: var(--crayon-sky); }
#site .hop h3 { margin: 6px 0 6px; font-size: 21px; font-weight: 600; color: #fff; }
.hop p { margin: 0; font-size: 15px; }

/* ---------- SSS: fişli kartlar ---------- */
.faq { display: grid; gap: 14px; }
.faq details { border-left: 12px solid var(--tc); border-radius: 6px 16px 16px 6px; background: #fff repeating-linear-gradient(transparent 0 29px, rgba(90, 150, 210, .12) 29px 30px); box-shadow: 0 10px 20px rgba(42, 37, 69, .08); }
.faq details:nth-child(4n+1) { --tc: #F2B632; }
.faq details:nth-child(4n+2) { --tc: #E98AAE; }
.faq details:nth-child(4n+3) { --tc: #7DC79C; }
.faq details:nth-child(4n+4) { --tc: #7DB8E4; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; font: 600 18px/1.3 var(--round); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--tc); font: 600 22px/1 var(--round); transition: rotate .25s; }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { margin: 0; padding: 0 22px 22px; }

/* ---------- İletişim: uçak postası mektubu + çizilmiş harita ---------- */
.contact { display: grid; grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: center; }
.letter { position: relative; padding: 46px 40px 38px; background: #fff; border: 12px solid transparent; border-image: repeating-linear-gradient(-45deg, var(--accent) 0 14px, #fff 14px 26px, var(--sky) 26px 40px, #fff 40px 52px) 12; box-shadow: 0 22px 38px -14px rgba(42, 37, 69, .35); transform: rotate(-1deg); }
#site .letter .shead__title { font-size: clamp(28px, 3vw, 36px); padding-right: 80px; }
.stamp { --r: 4px; position: absolute; top: 18px; right: 18px; width: 78px; height: 92px; padding: var(--r); background: var(--crayon-sun); transform: rotate(7deg); -webkit-mask: radial-gradient(var(--r), transparent 97%, #000) calc(var(--r) * -1.5) calc(var(--r) * -1.5) / calc(var(--r) * 3) calc(var(--r) * 3) round, linear-gradient(#000 0 0) content-box; mask: radial-gradient(var(--r), transparent 97%, #000) calc(var(--r) * -1.5) calc(var(--r) * -1.5) / calc(var(--r) * 3) calc(var(--r) * 3) round, linear-gradient(#000 0 0) content-box; }
.stamp__in { height: 100%; display: grid; place-items: center; border: 2px solid rgba(42, 37, 69, .35); background: #fff; }
.contact__list { list-style: none; margin: 22px 0 28px; padding: 0; display: grid; }
.contact__list li { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 10px 0; border-bottom: 2px dashed rgba(42, 37, 69, .12); }
.contact__list strong { font: 700 23px/1.1 var(--hand); color: var(--accent); }
.contact__list a:hover { color: var(--accent); }
.contact__list small { display: block; color: var(--muted); font-size: 14px; }
.contact__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.map { position: relative; margin: 0; padding: 16px 16px 12px; border-radius: 8px; background: #FFF8E6 linear-gradient(90deg, transparent 33%, rgba(0, 0, 0, .05) 33% 33.4%, transparent 33.4% 66.3%, rgba(0, 0, 0, .05) 66.3% 66.7%, transparent 66.7%); box-shadow: 0 22px 38px -14px rgba(42, 37, 69, .35); transform: rotate(1.5deg); }
.map__art { display: block; width: 100%; height: auto; filter: url(#rough); }
.map__river { fill: none; stroke: var(--crayon-sky); stroke-width: 20; stroke-linecap: round; }
.map__road { fill: none; stroke: #E8DCC2; stroke-width: 14; }
.map__trees circle { fill: #9ED9A8; stroke: var(--leaf); stroke-width: 2; }
.map__route { fill: none; stroke: var(--accent); stroke-width: 4; stroke-dasharray: 2 10; stroke-linecap: round; animation: march 1.2s linear infinite; }
.map__metro rect { fill: var(--sky); }
.map__metro text { fill: #fff; font: 600 16px var(--round); text-anchor: middle; }
.map__school path { fill: var(--crayon-sun); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.map__school rect { fill: var(--accent); }
.map__x { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }
.map figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-top: 6px; }
.map figcaption .hand { font-size: 27px; font-weight: 700; color: var(--accent); }
.map figcaption small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.map__ac { display: inline-flex; align-items: center; min-height: 40px; font: 700 21px/1.1 var(--hand); color: var(--ink); text-decoration: underline wavy rgba(194, 69, 42, .55); text-underline-offset: 5px; }
.map__ac:hover { color: var(--accent); }
/* okul turu videosu penceresi */
.tur-modal { width: min(900px, calc(100% - 24px)); padding: 0; border: 0; border-radius: 18px; background: #0F0D1C; color: #fff; overflow: hidden; }
.tur-modal::backdrop { background: rgba(20, 18, 36, .7); }
.tur-modal video { display: block; width: 100%; max-height: 72vh; background: #000; }
.tur-modal__alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .75); }
.tur-modal__alt button { flex: none; height: 40px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 10px; background: transparent; color: #fff; font: inherit; font-weight: 800; cursor: pointer; }

/* ---------- Footer: pastel boya şeridi ---------- */
.footer { position: relative; padding: 70px 0 0; background: var(--ink); color: #C9C5D8; font-size: 15px; }
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 14px; background: linear-gradient(90deg, var(--accent) 0 16.6%, var(--crayon-sun) 0 33.3%, #7DC79C 0 50%, #7DB8E4 0 66.6%, #D77BA0 0 83.3%, #F29A5B 0); }
#site .footer .logo__text { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 48px; }
.footer__brand p { margin: 14px 0 0; max-width: 300px; }
.footer nav { display: flex; flex-direction: column; gap: 8px; }
.footer h3, #site .footer h3 { margin: 0 0 4px; font: 700 26px/1 var(--hand); color: var(--crayon-sun); } /* h3: başlık sırası atlamasın (erişilebilirlik) */
.footer a:hover { color: #fff; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 20px; padding-bottom: 20px; border-top: 1px dashed rgba(255, 255, 255, .18); font-size: 14px; }

/* ---------- Mobil alt çubuk ---------- */
.mobile-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 252, 244, .96); border-top: 2px solid var(--ink); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.mobile-bar a, .mobile-bar button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 48px; border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 2px 3px 0 var(--ink); font: 600 15px var(--round); color: var(--ink); cursor: pointer; }
.mobile-bar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.mobile-bar__cta { background: var(--accent) !important; color: #fff !important; }

/* ---------- Çerez notu ---------- */
.cookie { position: fixed; left: 16px; bottom: 16px; z-index: 30; max-width: 380px; display: grid; gap: 12px; padding: 18px; border: 2.5px solid var(--ink); border-radius: 16px; background: #FFFEF8; box-shadow: 5px 6px 0 var(--ink); font-size: 14px; }
.cookie p { margin: 0; }
.cookie p a { font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cookie div { display: flex; gap: 8px; justify-content: flex-end; }
.cookie[hidden] { display: none; }

/* ---------- Randevu penceresi ---------- */
.modal { width: min(640px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 3px solid var(--ink); border-radius: 24px; background: #FFFEF8; color: var(--text); box-shadow: 8px 10px 0 var(--ink); overflow-x: hidden; }
.modal::backdrop { background: rgba(42, 37, 69, .5); }
.modal__body { padding: 26px 28px 28px; }
.rform { display: grid; gap: 18px; min-width: 0; }
.rform__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rform__head .icon-btn { flex: none; }
#site .rform__head h2, #site .rdone h2 { margin: 0; font-size: 30px; font-weight: 700; }
.rform__lead { margin: -10px 0 0; color: var(--muted); font-weight: 600; }
.rform fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.rform fieldset select { width: 100%; max-width: 100%; min-width: 0; text-overflow: ellipsis; } /* uzun program adları (saatleriyle) dar ekranda taşmasın */
.rform legend { margin-bottom: 8px; font: 700 24px/1 var(--hand); color: var(--accent); }
.rform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rform label small { font-weight: 600; color: var(--muted); }
.icon-btn { width: 42px; height: 42px; border: 2.5px solid var(--ink); border-radius: 50%; background: #fff; font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; } /* gizli seçim kutusu kartın içinde kalsın: yoksa kaydırılan gün şeridi pencereyi yana taşırır */
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: grid; justify-items: center; min-width: 74px; padding: 9px 14px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; font-weight: 800; color: var(--ink); cursor: pointer; transition: background .15s, box-shadow .15s, transform .15s; }
.chip small { font-weight: 600; font-size: 12px; color: var(--muted); }
.chip input:checked + span { background: var(--crayon-sun); box-shadow: 2px 3px 0 var(--ink); transform: translate(-1px, -1px); }
.chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.chip input:disabled + span { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.chips--days { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 8px; }
.chip--day span { min-width: 62px; line-height: 1.15; text-transform: capitalize; }
.chip--day b { font: 600 22px var(--round); }
.hint { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.rform__sinif b { color: var(--ink); }
.rform__error { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--red-soft); color: var(--red); font-weight: 700; }
.rform__submit { width: 100%; }
.rdone { display: grid; gap: 10px; justify-items: center; padding: 10px 0; text-align: center; }
.rdone__icon svg { width: 76px; height: 76px; padding: 16px; border: 3px solid var(--ink); border-radius: 50%; background: var(--crayon-mint); fill: none; stroke: var(--ink); stroke-width: 2.5; }
.rdone p { margin: 0; max-width: 420px; }
.rdone small { color: var(--muted); }
.rdone__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }

/* ---------- Animasyonlar ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fly { from { transform: translateX(-240px); } to { transform: translateX(calc(100vw + 40px)); } }
@keyframes bob { from { transform: translateY(-14px) rotate(-5deg); } to { transform: translateY(12px) rotate(4deg); } }
@keyframes drift { from { transform: translateX(-24px); } to { transform: translateX(24px); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes wiggle { from { transform: rotate(-8deg) scale(.96); } to { transform: rotate(8deg) scale(1.04); } }
@keyframes stick { from { opacity: 0; transform: translateY(34px) rotate(calc(var(--rot, 0deg) + 5deg)) scale(1.08); } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes pop { from { opacity: 0; transform: scale(.5); } }
@keyframes pulse { 50% { opacity: .3; } }
@keyframes march { to { stroke-dashoffset: -24; } }

/* =========================================================
   Duyarlı düzen
   ========================================================= */
@media (max-width: 1150px) {
}

/* menü: 1180px altında kurdeleler hamburger menüye geçer (7 kurdele + logo + düğmeler masaüstünde bu genişliğe kadar sığar) */
@media (max-width: 1180px) {
  .menu-toggle { display: flex; }
  .header__actions { margin-left: auto; }
  .nav { position: absolute; top: var(--header-h); left: 0; right: 0; margin: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 20px; background: var(--paper); border-bottom: 2px solid var(--ink); box-shadow: 0 12px 24px rgba(42, 37, 69, .1); display: none; }
  .nav.is-open { display: flex; }
  /* telefonda kurdeleler yatay: sağ ucu V kesikli renkli şeritler */
  .nav { gap: 8px; }
  .nav .ayrac { --uzun: 0px; height: auto; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 13px 34px 13px 16px; font-size: 18px; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%); filter: none; }
  .nav .ayrac::before { display: none; }
  .nav .ayrac.is-aktif { box-shadow: inset 5px 0 0 var(--ink); }
  /* menü açılırken kurdeleler sırayla soldan kayar; kapanırken menü yukarı çekilir */
  .nav.is-open { animation: menu-ac .22s ease-out; }
  .nav.is-open .ayrac { animation: kurdele-gel .42s cubic-bezier(.2, .9, .3, 1.3) backwards; }
  .nav.is-open .ayrac:nth-child(2) { animation-delay: .04s; }
  .nav.is-open .ayrac:nth-child(3) { animation-delay: .08s; }
  .nav.is-open .ayrac:nth-child(4) { animation-delay: .12s; }
  .nav.is-open .ayrac:nth-child(5) { animation-delay: .16s; }
  .nav.is-open .ayrac:nth-child(6) { animation-delay: .2s; }
  .nav.is-open .ayrac:nth-child(7) { animation-delay: .24s; }
  .nav.is-kapaniyor { animation: menu-kapan .19s ease-in forwards; }
  .nav.is-kapaniyor .ayrac { animation: none; }
}
@media (max-width: 1100px) {

  .polaroids, .nametags { grid-template-columns: 1fr 1fr; gap: 40px 28px; }
  .patches, .cork__grid { grid-template-columns: 1fr 1fr; }
  .hop { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .hop li:nth-child(even) { margin-top: 0; }
  .hop li::after { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .hero { display: block; min-height: 0; padding: 0 0 36px; }
  .hero__video { position: relative; inset: auto; z-index: 0; height: clamp(320px, 84vw, 520px); }
  .hero__vid, .hero__video { background-position: 62% center; }
  .hero__vid { object-position: 62% center; }
  .hero__inner { position: static; display: block; margin-top: -64px; }
  .paper-note { margin: 0 auto; transform: rotate(-1deg); }
  .tour { position: absolute; top: 14px; left: 14px; width: 96px; height: 96px; margin: 0; z-index: 3; }
  .tour__play { inset: 26px; }
  .tour__ring text { font-size: 12.5px; }
  .hero__pause { top: 14px; right: 14px; }
  .plane { width: 140px; top: 30%; }
  .hero__cloud { width: 76px; right: 38%; top: 10%; }
  .stickers { margin-top: 8px; }

  .doodle { display: none; }
  .app-preview, .contact { grid-template-columns: minmax(0, 1fr); }
  .contact > * { min-width: 0; }
  .bubbles { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; gap: 26px; }

  .board__path { display: none; }
  .board__stops { grid-template-columns: 1fr; grid-template-rows: none; gap: 14px; max-width: 460px; margin: 0 auto; }
  .board__stops::before { content: ""; position: absolute; left: 34px; top: 20px; bottom: 20px; border-left: 4px dotted rgba(42, 37, 69, .35); }
  .stop { grid-row: auto; grid-column: auto; flex-direction: row; justify-content: flex-start; gap: 14px; text-align: left; }
  .stop time { width: 70px; height: 70px; font-size: 18px; box-shadow: 3px 4px 0 var(--ink); }
  .stop em { display: none; }
  .stop span { max-width: none; font-size: 23px; }
  .stop.is-now { flex-wrap: wrap; row-gap: 2px; }
  .stop__simdi { flex-basis: 100%; padding-left: 84px; font-size: 20px; }
  .piyon { top: -30px; right: -18px; width: 28px; height: 40px; }
  .araba { z-index: 3; width: 40px; height: 25px; } /* dikey listede yol dairelerin altında kalır; araba durakların üstünden geçer */
}

@media (max-width: 600px) {
  :root { --header-h: 64px; }
  .header__cta { display: none; }
  .header__login span { display: none; }
  .header__login { width: 42px; padding: 0; }
  #site .logo__mark { width: 34px; height: 34px; }
  #site .logo__text { font-size: 19px; }
  .nav { padding: 8px 16px 20px; }

  .paper-note { padding: 34px 18px 24px 40px; background-image: linear-gradient(90deg, transparent 26px, rgba(214, 80, 60, .45) 26px 28px, transparent 28px), repeating-linear-gradient(to bottom, transparent 0 33px, rgba(90, 150, 210, .22) 33px 34px); }
  .hero__eyebrow { font-size: 23px; }
  .hero__lead { font-size: 16px; }
  .hero__actions .btn--lg { width: 100%; }
  .scribble { width: 80%; }

  .stickers__row { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; gap: 18px 10px; }
  .sticker { width: 146px; height: 146px; padding: 14px; }
  .sticker strong { font-size: 27px; }
  .sticker span { font-size: 12px; }

  .section { padding: 70px 0; }
  .shead { margin-bottom: 34px; }
  .shead__kicker { font-size: 26px; }
  .shead__sub, .section__lead { font-size: 16px; }

  .polaroids { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; gap: 44px; }
  .pola__photo { aspect-ratio: 16 / 10; }

  .notebook { padding: 36px 20px 28px 52px; background-image: linear-gradient(90deg, transparent 38px, rgba(214, 80, 60, .4) 38px 40px, transparent 40px), repeating-linear-gradient(transparent 0 35px, rgba(90, 150, 210, .18) 35px 36px); }
  .notebook::before { left: -20px; }
  .notebook::after { left: 8px; }
  .calc { padding: 16px; }
  .calc__row, .rform__grid { grid-template-columns: 1fr; }
  .postit { padding: 40px 22px 26px; }

  .cork { padding: 54px 14px 30px; border-width: 12px; margin-top: 80px; }
  .cork__title span { font-size: 19px; padding: 10px 18px; }
  .cork__grid { grid-template-columns: 1fr; gap: 22px; }
  .pin-card { display: grid; grid-template-columns: 96px 1fr; column-gap: 12px; align-items: center; padding: 10px; }
  .pin-card__img { grid-row: span 2; width: 96px; aspect-ratio: 1; }
  #site .pin-card h4 { margin: 0 0 2px; font-size: 26px; }
  .pin-card p { margin: 0; font-size: 14px; }

  .patches { grid-template-columns: 1fr; }
  .nametags { gap: 20px 14px; }
  .nametag__band { padding: 24px 8px 42px; }
  .nametag__foto { width: 84px; height: 84px; margin-top: -36px; }
  .nametag__band b { font-size: 21px; }
  .nametag__band span { font-size: 13px; }
  .nametag__body { padding: 0 10px 16px; }
  .nametag__ad { font-size: 26px; }
  .nametag__tani { font-size: 19px; }
  .nametag__role, .nametag__detail { font-size: 12.5px; }

  .hop { grid-template-columns: 1fr; max-width: 360px; }
  .chalk { padding-bottom: 80px; }

  .letter { padding: 36px 20px 28px; border-width: 10px; }
  #site .letter .shead__title { padding-right: 64px; }
  .stamp { width: 62px; height: 74px; top: 14px; right: 12px; }
  .contact__list li { grid-template-columns: 76px minmax(0, 1fr); }
  .contact__list a { overflow-wrap: break-word; }

  .footer { padding-top: 54px; }
  .footer__bottom { flex-direction: column; gap: 0; }
  .footer nav { gap: 0; }
  .footer nav a, .footer__bottom a { display: inline-block; padding: 7px 0; }
  .pola__cta { min-height: 44px; }

  .mobile-bar { display: grid; }
  /* alt çubuğun payı footer’a verilir; #site’a verilirse footer’ın altında açık renkli şerit kalır */
  .footer { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .modal__body { padding: 20px 18px 22px; }
  #site .rform__head h2 { font-size: 25px; }
  .cookie { left: 12px; right: 12px; bottom: 88px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  #site *, #site *::before, #site *::after { animation: none !important; }
  .scribble path { stroke-dashoffset: 0; }
  .piyon, .canli__nokta::before { animation: none; }
  .araba { opacity: 1; } /* hareket yok: araba yolun başında park eder */
  .nav .ayrac { transition: none; }
  .plane { display: none; }
}

/* =========================================================
   Öğretmen tanıtımı (kadro kartına ya da veli panelinde "Tanıyın"a basınca)
   <body>'ye eklenen pencere: #site kapsamı dışında da (paneller açıkken) aynı görünür
   ========================================================= */
/* Haftalık menü penceresi */
.menu-modal { width: min(720px, calc(100% - 24px)); overflow-y: auto; overscroll-behavior: contain; }
.menu { display: grid; gap: 18px; }
.menu__gunler { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.menu__gun { padding: 14px 16px; border: 2px solid rgba(42, 37, 69, .14); border-radius: 16px; background: #fff; }
.menu__gun.is-bugun { border-color: var(--ink); background: #FFF6D6; box-shadow: 3px 4px 0 var(--ink); }
#site .menu__gun h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 19px; font-weight: 600; }
.menu__gun h3 small { padding: 2px 9px; border-radius: 999px; background: var(--crayon-sun); font: 700 12px/1.4 var(--font); text-transform: uppercase; letter-spacing: .04em; }
.menu__gun dl { display: grid; gap: 4px; margin: 0; }
.menu__gun dl div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; }
.menu__gun dt { font: 700 19px/1.2 var(--hand); color: var(--accent); }
.menu__gun dd { margin: 0; font-size: 15px; }
.menu__alerjen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; }
.menu__alerjen span { font-weight: 700; color: var(--muted); }
.menu__alerjen b { padding: 1px 9px; border-radius: 999px; background: #FCE6EE; color: #8A2E4F; font-weight: 700; }
.menu__not { margin: 0; font-size: 14px; color: var(--muted); }
/* KVKK aydınlatma metni ve çerez politikası penceresi: uzun metin, rahat okunur satır */
.yasal-modal { width: min(720px, calc(100% - 24px)); overflow-y: auto; overscroll-behavior: contain; }
.yasal { font-size: 15px; line-height: 1.65; }
.yasal__alt { margin: 4px 0 0; color: var(--muted); font-weight: 600; }
.yasal__ornek { margin: 16px 0 6px; padding: 10px 14px; border: 2px dashed #E3B94A; border-radius: 12px; background: #FFF6D6; font-size: 14px; }
#site .yasal h3 { margin: 22px 0 6px; font-size: 18px; font-weight: 600; }
.yasal p { margin: 0 0 10px; }
.yasal ul { margin: 0 0 10px; padding-left: 20px; }
.yasal li { margin-bottom: 4px; }
.yasal a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: break-word; }
.yasal__cerez { list-style: none; padding: 0 !important; display: grid; gap: 8px; }
.yasal__cerez li { margin: 0; padding: 10px 14px; border: 2px solid rgba(42, 37, 69, .12); border-radius: 12px; background: #fff; }
.yasal__cerez b { display: block; }
.yasal__cerez span { display: block; font-size: 14px; color: var(--muted); }
.ogr-modal { width: min(800px, calc(100% - 24px)); overflow-y: auto; overscroll-behavior: contain; font-family: var(--font); }
.ogr { position: relative; display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 24px 32px; padding: 32px 32px 18px; }
.ogr__x { position: absolute; top: 14px; right: 14px; z-index: 2; }
.ogr__foto { position: relative; align-self: start; margin: 10px 0 0; padding: 10px 10px 8px; background: #fff; box-shadow: 0 2px 3px rgba(0, 0, 0, .06), 0 16px 30px rgba(42, 37, 69, .16); transform: rotate(-2deg); }
.ogr__foto .tape { top: -14px; left: 50%; width: 92px; height: 26px; transform: translateX(-50%) rotate(-4deg); }
.ogr__foto img, .ogr__harf { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; } /* height:auto: img öznitelikleri oranı ezmesin */
.ogr__harf { display: grid; place-items: center; background: var(--crayon-sun); font: 600 72px var(--round); color: var(--ink); }
.ogr__foto figcaption { margin-top: 6px; text-align: center; font: 700 24px/1.1 var(--hand); color: var(--ink); }
.ogr__tx { min-width: 0; display: grid; align-content: start; gap: 12px; }
.ogr__gorev { font: 700 24px/1 var(--hand); color: var(--accent); }
.ogr h2 { margin: -4px 0 0; padding-right: 44px; font: 600 clamp(28px, 4vw, 36px)/1.05 var(--round); color: var(--ink); text-wrap: balance; }
.ogr__soz { margin: 0; padding: 10px 14px; border-left: 4px solid var(--crayon-sun); background: rgba(255, 214, 107, .2); font: 700 23px/1.25 var(--hand); color: var(--ink); }
.ogr__hakkinda { margin: 0; line-height: 1.6; color: var(--text); }
.ogr__dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 0; }
.ogr__dl div { padding: 8px 12px; border: 2px dashed rgba(42, 37, 69, .16); border-radius: 12px; }
.ogr__dl dt { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ogr__dl dd { margin: 2px 0 0; font-weight: 700; line-height: 1.35; color: var(--ink); }
.ogr__rozet { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ogr__rozet li { padding: 4px 11px; border-radius: 99px; background: var(--leaf-soft); color: var(--leaf); font-size: 13px; font-weight: 800; }
.ogr__sinif { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 14px; border: 2.5px solid var(--ink); border-radius: 14px 18px 14px 20px; background: #fff; box-shadow: 3px 4px 0 var(--ink); }
.ogr__sinif b { font: 600 18px var(--round); color: var(--ink); }
.ogr__sinif > span:not(.status) { font-size: 14px; font-weight: 700; color: var(--muted); }
.ogr__sinif .status { margin: 0 0 0 auto; }
.ogr__eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 4px; }
.ogr .btn { font-family: var(--round); font-weight: 600; border: 2.5px solid var(--ink); border-radius: 14px 18px 14px 20px; box-shadow: 3px 4px 0 var(--ink); transition: transform .15s, box-shadow .15s; }
.ogr .btn:hover { transform: translate(-1px, -2px); box-shadow: 5px 6px 0 var(--ink); }
.ogr .btn--primary { background: var(--accent); color: #fff; }
.ogr__link { display: inline-flex; align-items: center; min-height: 44px; font: 700 21px/1.2 var(--hand); color: var(--ink); text-decoration: underline wavy rgba(194, 69, 42, .55); text-underline-offset: 5px; }
.ogr__link:hover { color: var(--accent); }
.ogr__gez { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; border-top: 2px dashed rgba(42, 37, 69, .15); }
.ogr__gez button { min-height: 40px; padding: 6px 4px; border: 0; background: none; font: 600 16px var(--round); color: var(--ink); cursor: pointer; }
.ogr__gez button:hover { color: var(--accent); }
.ogr__gez span { font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.ogr__not { grid-column: 1 / -1; margin: -10px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
@media (max-width: 640px) {
  .ogr { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 18px 14px; }
  .ogr__foto { width: min(62%, 220px); justify-self: center; }
  .ogr__eylem .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ogr .btn, .nametag__tani { transition: none; } }
@keyframes menu-ac { from { opacity: 0; transform: translateY(-10px); } }
@keyframes menu-kapan { to { opacity: 0; transform: translateY(-10px); } }
@keyframes kurdele-gel { from { opacity: 0; transform: translateX(-36px) rotate(-2deg); } }

/* =========================================================
   Branş panosu: kartlar sırayla asılır — yukarıdan düşer, raptiyede sarkaç gibi sallanıp durur, raptiye çakılır
   ========================================================= */
.pin-card { transform-origin: 50% 0; }
.cork__grid.reveal.is-in > .pin-card { animation: asil 1.1s cubic-bezier(.3, .7, .4, 1) backwards; }
.cork__grid.reveal.is-in > .pin-card::before { animation: igne .35s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: inherit; }
.cork__grid.reveal.is-in > .pin-card:nth-child(1) { animation-delay: .05s; }
.cork__grid.reveal.is-in > .pin-card:nth-child(2) { animation-delay: .25s; }
.cork__grid.reveal.is-in > .pin-card:nth-child(3) { animation-delay: .45s; }
.cork__grid.reveal.is-in > .pin-card:nth-child(4) { animation-delay: .65s; }
.cork__grid.reveal.is-in > .pin-card:nth-child(5) { animation-delay: .85s; }
.cork__grid.reveal.is-in > .pin-card:nth-child(6) { animation-delay: 1.05s; }
@keyframes asil {
  0% { opacity: 0; transform: translateY(-80px) rotate(calc(var(--rot) - 16deg)); }
  30% { opacity: 1; transform: translateY(0) rotate(calc(var(--rot) + 10deg)); }
  50% { transform: rotate(calc(var(--rot) - 6deg)); }
  68% { transform: rotate(calc(var(--rot) + 3deg)); }
  84% { transform: rotate(calc(var(--rot) - 1.2deg)); }
  100% { transform: rotate(var(--rot)); }
}
@keyframes igne { 0%, 25% { opacity: 0; transform: scale(2.2); } 100% { opacity: 1; transform: scale(1); } }

/* =========================================================
   Veli uygulaması sahnesi: dizüstünde veli paneli, önünde telefon (site.js cihaz + sahneAyarla).
   Ölçüler sahne genişliğine göre (cqw): her ekranda aynı oranla küçülür.
   ========================================================= */
.sahne-wrap { margin: 0; display: grid; justify-items: center; gap: 10px; }
.sahne { container-type: inline-size; position: relative; width: min(100%, 600px); aspect-ratio: 540 / 400; }
.sahne svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sahne img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.sahne__not { display: flex; align-items: center; gap: 6px; margin: 0; font-size: clamp(19px, 5vw, 25px); line-height: 1.15; font-weight: 700; color: var(--ink); text-align: center; }
.sahne__not svg { flex: none; width: 46px; height: 30px; color: var(--accent); transform: scaleY(-1) rotate(-12deg); }

.laptop { position: absolute; top: 0; right: 0; width: 80cqw; filter: drop-shadow(0 3cqw 4cqw rgba(42, 37, 69, .22)); }
.laptop__ekran { aspect-ratio: 16 / 10.2; padding: 1.6cqw; border-radius: 2.6cqw 2.6cqw .8cqw .8cqw; background: var(--ink); }
.laptop__alt { position: relative; height: 2.4cqw; margin: 0 -5cqw; border-radius: 0 0 2.4cqw 2.4cqw; background: linear-gradient(#DAD5E0, #BDB6C8); }
.laptop__alt::before { content: ""; position: absolute; top: 0; left: 50%; width: 14cqw; height: .9cqw; margin-left: -7cqw; border-radius: 0 0 1cqw 1cqw; background: #A9A1B6; }
.lp { display: grid; grid-template-columns: 7cqw minmax(0, 1fr); height: 100%; overflow: hidden; border-radius: .8cqw; background: #E6DFD5; font-family: var(--font); color: #1F1C34; }
.lp__yan { display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; padding: 2cqw 0; background: #1F1C34; }
.lp__yan i { width: 3.6cqw; height: .9cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .25); }
.lp__yan .lp__logo { width: 3.6cqw; height: 3.6cqw; margin-bottom: .6cqw; background: url("../img/logo-isaret.svg") center / contain no-repeat; }
.lp__yan .on { background: #FFD66B; }
.lp__ana { min-width: 0; display: grid; align-content: start; gap: 1.5cqw; padding: 2cqw 2.4cqw; }
.lp__ust { display: flex; justify-content: space-between; align-items: center; font-size: 2.3cqw; font-weight: 800; }
.lp__zil { position: relative; display: grid; place-items: center; width: 4cqw; height: 4cqw; border-radius: 1cqw; background: #C2452A; color: #fff; }
.lp__zil svg { width: 2.4cqw; height: 2.4cqw; }
.lp__zil i { position: absolute; top: -1cqw; right: -1cqw; min-width: 2.4cqw; height: 2.4cqw; padding: 0 .5cqw; border-radius: 2cqw; background: #fff; color: #C2452A; font: 800 1.5cqw/2.4cqw var(--font); font-style: normal; text-align: center; }
.lp__hero { display: grid; gap: 1.6cqw; padding: 2cqw 2.2cqw; background: #25213D; color: #fff; box-shadow: inset 0 .5cqw 0 #F4A06B; }
.lp__kim { display: flex; align-items: center; gap: 1.4cqw; min-width: 0; }
.lp__av { display: grid; place-items: center; flex: none; width: 4.6cqw; height: 4.6cqw; background: #FFD66B; box-shadow: .5cqw .5cqw 0 #F4A06B; font-size: 2.2cqw; font-weight: 800; color: #1F1C34; }
.lp__kim small { display: block; font-size: 1.3cqw; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.lp__kim b { font-size: 2.6cqw; }
.lp__durum { margin-left: auto; padding: .6cqw 1.2cqw; border: 1px solid rgba(255, 255, 255, .22); font: 800 1.5cqw var(--font); font-style: normal; white-space: nowrap; }
.lp__akis { height: 1.1cqw; background: rgba(255, 255, 255, .14); }
.lp__akis i { display: block; width: 6%; height: 100%; background: linear-gradient(90deg, #FFD66B, #F4A06B); transition: width 1s ease; }
.sahne.a1 .lp__akis i { width: 14%; }
.sahne.a2 .lp__akis i { width: 24%; }
.sahne.a3 .lp__akis i { width: 34%; }
.sahne.a4 .lp__akis i { width: 46%; }
.sahne.a5 .lp__akis i { width: 56%; }
.sahne.a6 .lp__akis i { width: 84%; }
.lp__kutular { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2cqw; }
.lp__k { min-width: 0; min-height: 11cqw; display: grid; align-content: start; gap: .6cqw; padding: 1.4cqw; background: #fff; }
.lp__k small { font-size: 1.3cqw; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #75708A; }
.lp__k b { font-size: 1.9cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp__bar { height: .9cqw; background: #F1EDE8; }
.lp__bar i { display: block; width: 0; height: 100%; background: #E9A23B; transition: width .9s ease; }
.sahne.a2 .lp__bar i { width: 100%; }
.sahne.a4 .lp__bar i { width: 75%; }
.lp__foto { display: grid; grid-template-columns: 1fr 1fr; gap: .6cqw; }
.lp__not { padding: 1.2cqw 1.6cqw; background: #FFF2C6; font: 700 1.9cqw/1.25 var(--hand); }
.lp__not b { margin-right: .6cqw; font: 800 1.3cqw var(--font); letter-spacing: .05em; text-transform: uppercase; color: #8A6200; }
.parla { animation: parla 1.2s ease-out; }
@keyframes parla { from { box-shadow: 0 0 0 0 rgba(244, 160, 107, .95); } to { box-shadow: 0 0 0 1.8cqw rgba(244, 160, 107, 0); } }

.tel { position: absolute; left: 1cqw; bottom: 0; width: 31cqw; padding: 1.6cqw; border-radius: 5.4cqw; background: var(--ink); box-shadow: 0 4cqw 6cqw rgba(42, 37, 69, .3); transform: rotate(-4deg); }
.tel__ekran { position: relative; height: 58cqw; display: grid; align-content: start; gap: 1.4cqw; padding: 3.6cqw 2cqw 2cqw; overflow: hidden; border-radius: 4cqw; background: var(--paper); }
.tel__ekran::before { content: ""; position: absolute; top: 1.2cqw; left: 50%; width: 9cqw; height: 1.6cqw; margin-left: -4.5cqw; border-radius: 2cqw; background: var(--ink); }
.tel__ust { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; font: 600 2.6cqw var(--round); color: var(--ink); }
.tel__ust .dot-live { font-size: 1.6cqw; gap: .8cqw; }
.tel__ust .dot-live::before { width: 1.2cqw; height: 1.2cqw; }
.tel__bildirim { position: absolute; top: 1cqw; left: 1.4cqw; right: 1.4cqw; z-index: 2; display: flex; align-items: center; gap: 1cqw; padding: 1.3cqw 1.4cqw; border-radius: 2cqw; background: #fff; box-shadow: 0 1.4cqw 3cqw rgba(42, 37, 69, .25); font-size: 1.8cqw; line-height: 1.25; color: var(--ink); opacity: 0; transform: translateY(-140%); }
.tel__bildirim i { display: grid; place-items: center; flex: none; width: 3.6cqw; height: 3.6cqw; border-radius: 1cqw; background: #C2452A; color: #fff; }
.tel__bildirim svg { width: 2.2cqw; height: 2.2cqw; }
.tel__bildirim.is-yeni { animation: bildirim 1.7s ease both; }
@keyframes bildirim { 0% { opacity: 0; transform: translateY(-140%); } 15%, 75% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-140%); } }
.tel__akis { list-style: none; margin: 0; padding: 0; display: grid; gap: 1cqw; }
.tel__s { display: flex; align-items: flex-start; gap: 1.2cqw; max-height: 30cqw; padding: 1.2cqw; border-radius: 1.8cqw; background: #fff; transition: opacity .45s, transform .5s cubic-bezier(.2, .9, .3, 1.3), max-height .45s, padding .45s, margin .45s; }
.tel__s i { display: grid; place-items: center; flex: none; width: 3.6cqw; height: 3.6cqw; border-radius: 1cqw; background: #DCF1EC; color: #1C7465; }
.tel__s--yemek i { background: #FFF0D9; color: #9C5A00; }
.tel__s--foto i { background: #E3EFF9; color: #2E6896; }
.tel__s--uyku i { background: #E9ECFB; color: #4450A8; }
.tel__s--not i { background: #FBE8EF; color: #A0365F; }
.tel__s svg { width: 2.2cqw; height: 2.2cqw; }
.tel__s > span { min-width: 0; display: grid; gap: .3cqw; }
.tel__s b { font-size: 1.9cqw; line-height: 1.2; color: var(--ink); }
.tel__s small { font-size: 1.5cqw; font-weight: 700; color: var(--muted); }
.tel__s em { font: 700 1.8cqw/1.2 var(--hand); font-style: normal; color: var(--ink); }
.tel__foto { display: grid; grid-template-columns: 1fr 1fr; gap: .6cqw; margin-top: .4cqw; }
.tel__foto img { border-radius: 1cqw; }
/* adım görünürlüğü: .cN o adımda belirir, .cN-gizle o adımda kaybolur */
.sahne:not(.a1) .tel__s.c1, .sahne:not(.a2) .tel__s.c2, .sahne:not(.a3) .tel__s.c3,
.sahne:not(.a4) .tel__s.c4, .sahne:not(.a5) .tel__s.c5, .sahne:not(.a6) .tel__s.c6 { max-height: 0; margin-bottom: -1cqw; padding-block: 0; opacity: 0; transform: translateY(-2cqw) scale(.95); }
.sahne:not(.a1) span.c1, .sahne:not(.a2) span.c2, .sahne:not(.a4) span.c4, .sahne:not(.a5) span.c5, .sahne:not(.a6) .lp__not.c6,
.sahne.a1 .c1-gizle, .sahne.a2 .c2-gizle, .sahne.a4 .c4-gizle, .sahne.a5 .c5-gizle { display: none; }
.lp__foto img { transition: opacity .4s, transform .5s cubic-bezier(.2, .9, .3, 1.5); }
.sahne:not(.a3) .lp__foto img.c3 { opacity: 0; transform: scale(.5); }

/* =========================================================
   Kayıt süreci: kara tahtaya tebeşirle yazılıyor — önce başlık, sonra kareler sırayla
   (numara, başlık, açıklama soldan sağa belirir; küçük bir tebeşir yazının üstünde gezer)
   ========================================================= */
.chalk .shead.is-in .shead__title { animation: tebesir-yaz 1s steps(16) .15s backwards; }
.hop.reveal.is-in > li { animation: none; --t: calc(.9s + var(--i) * 1.3s); }
.hop.is-in li::before { animation: tebesir-kare .3s steps(4) var(--t) backwards; }
.hop.is-in .hop__n { animation: tebesir-yaz .3s steps(4) calc(var(--t) + .2s) backwards; }
.hop.is-in li h3 { animation: tebesir-yaz .4s steps(8) calc(var(--t) + .45s) backwards; }
.hop.is-in li p { animation: tebesir-yaz .5s steps(12) calc(var(--t) + .8s) backwards; }
.hop.is-in li:not(:last-child)::after { animation: tebesir-ok .3s calc(var(--t) + 1.25s) backwards; }
.hop__tebesir { position: absolute; top: 20%; left: 30%; width: 24px; height: 8px; border-radius: 3px; background: #F4F1E8; box-shadow: 0 0 8px rgba(255, 255, 255, .5); opacity: 0; transform: rotate(-35deg); pointer-events: none; }
.hop.is-in .hop__tebesir { animation: tebesir-gez 1.1s linear calc(var(--t) + .2s) backwards; }
@keyframes tebesir-yaz { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tebesir-kare { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tebesir-ok { from { opacity: 0; transform: translateX(-10px); } }
@keyframes tebesir-gez {
  0% { opacity: 0; left: 40%; top: 20%; } 4% { opacity: 1; } 22% { left: 58%; top: 22%; }
  26% { left: 18%; top: 42%; } 56% { left: 82%; top: 44%; }
  60% { left: 14%; top: 62%; } 95% { opacity: 1; left: 86%; top: 72%; } 100% { opacity: 0; left: 86%; top: 72%; }
}

/* =========================================================
   SSS: konu çipleri + arama, konulu soru kartları; yanda "soru kutusu" yapışkan not
   ========================================================= */
.sss { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 40px; align-items: start; max-width: 1080px; margin: 0 auto; }
.sss__ara { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; border: 2.5px solid var(--ink); border-radius: 14px 18px 14px 20px; background: #fff; box-shadow: 3px 4px 0 var(--ink); cursor: text; }
.sss__ara:focus-within { box-shadow: 3px 4px 0 var(--ink), 0 0 0 4px var(--crayon-sun); }
.sss__ara svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.sss__ara input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 600 17px var(--font); color: var(--ink); }
.sss__konular { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.sss__konu { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 99px; background: #fff; font: 600 14.5px var(--round); color: var(--ink); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.sss__konu::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--kc); box-shadow: 0 0 0 1.5px var(--ink); }
.sss__konu small { font: 800 12px var(--font); color: var(--muted); }
.sss__konu:hover { transform: translateY(-2px); }
.sss__konu[aria-pressed="true"] { background: var(--kc); box-shadow: 2px 3px 0 var(--ink); }
.sss__konu[aria-pressed="true"] small { color: var(--ink); }
.sss__sayi { margin: 8px 4px 12px; font-size: 14px; font-weight: 700; color: var(--muted); }
.faq details[hidden] { display: none; }
.faq__q { display: grid; justify-items: start; gap: 6px; }
.faq__etiket { padding: 2px 9px; border-radius: 6px; background: color-mix(in srgb, var(--tc) 30%, #fff); font: 800 11.5px var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.faq details { transition: transform .2s; }
.faq details:not([open]):hover { transform: translateX(4px); }
.sss__bos { display: grid; gap: 4px; padding: 28px 20px; border: 2px dashed rgba(42, 37, 69, .22); border-radius: 16px; text-align: center; color: var(--muted); }
.sss__bos b { color: var(--ink); }
.sss__bos[hidden] { display: none; }
.soru-kutu { position: sticky; top: calc(var(--header-h) + 40px); padding: 40px 24px 24px; background: #FFE58A; box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 22px 34px -14px rgba(42, 37, 69, .4); transform: rotate(1.6deg); }
.soru-kutu .tape--top { top: -15px; }
.soru-kutu__isaret { position: absolute; top: 6px; right: 16px; font: 700 76px/1 var(--hand); color: rgba(42, 37, 69, .12); }
.soru-kutu__baslik { margin: 0 0 10px; font: 700 34px/1.05 var(--hand); color: var(--ink); }
.soru-kutu p { margin: 0 0 18px; }
.soru-kutu__eylem { display: grid; gap: 12px; }
.soru-kutu__eylem .btn { width: 100%; }
@media (max-width: 900px) {
  .sss { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .soru-kutu { position: static; transform: rotate(-1deg); }
}
/* telefonda konu çipleri tek satır, yana kaydırılır (sayfa kenarına kadar uzanır) */
@media (max-width: 560px) {
  .sss__konular { flex-wrap: nowrap; overflow-x: auto; margin: 14px -16px 2px; padding: 2px 16px 6px; scrollbar-width: none; }
  .sss__konular::-webkit-scrollbar { display: none; }
  .sss__konu { flex: none; }
  .sss__ara input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tel__s, .lp__akis i, .lp__bar i, .lp__foto img, .faq details, .sss__konu { transition: none; }
}