/* masaloku.info — ön yüz: "Gece Lambası" düzeni, açık ve ferah renklerle (kırık beyaz zemin, nane yeşili, limon vurgu, daktilo yazısıyla küçük bilgiler) */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 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: 400 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; }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 400 600; font-display: swap; src: url(fonts/nunito-italic-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: italic; font-weight: 400 600; font-display: swap; src: url(fonts/nunito-italic-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; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(fonts/baloo2-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: "Baloo 2"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(fonts/baloo2-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; }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/spacemono-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: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/spacemono-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; }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/spacemono-700-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: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/spacemono-700-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; }

:root {
  --zemin: #f8faf3;
  --zemin-2: #eef5e6;
  --kart: #ffffff;
  --kart-2: #f6f9f0;
  --cizgi: #e2eadb;
  --yazi: #1e2a22;
  --metin-yazi: #34402f;
  --soluk: #6b7a68;
  --limon: #d4f15a;
  --limon-koyu: #a8c92a;
  --limon-zemin: rgba(212, 241, 90, .28);
  --vurgu: #3a8a35;
  --vurgu-cizgi: #9cc43a;
  --mor: #7d66e0;
  --mor-koyu: #6f5fe0;
  --mercan: #ee6a52;
  --mavi: #4f9de8;
  --koyu-yazi: #1b2410;
  --ders-zemin: #f5fbe0;
  --golge: 0 10px 28px rgba(60, 80, 40, .10);
  --baslik: "Baloo 2", "Nunito", system-ui, sans-serif;
  --govde: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --yaricap: 22px;
  --metin-boyut: 20px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--zemin); color: var(--yazi); font: 17px/1.65 var(--govde); }
img { max-width: 100%; height: auto; }
a { color: var(--vurgu); }
a:hover { color: #fff; }
h1, h2, h3, h4 { font-family: var(--baslik); line-height: 1.15; }
.mono { font-family: var(--mono); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: absolute; left: -999px; top: 8px; background: var(--limon); color: var(--koyu-yazi); padding: 8px 12px; z-index: 50; }
.atla:focus { left: 8px; }
.kap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.dar { max-width: 760px; }
.soluk { color: var(--soluk); }
.kucuk { font-size: 14px; }
.ortala { text-align: center; margin-top: 22px; }
:focus-visible { outline: 3px solid var(--vurgu-cizgi); outline-offset: 2px; }
::selection { background: var(--limon); color: var(--koyu-yazi); }

/* düğmeler */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border: 0; border-radius: 14px; background: var(--limon); color: var(--koyu-yazi); font: 800 16px/1 var(--govde); text-decoration: none; cursor: pointer; transition: transform .12s, background .15s, box-shadow .15s; }
.dugme:hover { color: var(--koyu-yazi); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(168, 201, 42, .35); }
.dugme.limon, .dugme.sari { background: var(--limon); color: var(--koyu-yazi); }
.dugme.cizgi, .dugme.cizgi-koyu { background: transparent; color: var(--yazi); box-shadow: inset 0 0 0 2px var(--cizgi); }
.dugme.cizgi:hover, .dugme.cizgi-koyu:hover { color: var(--vurgu); box-shadow: inset 0 0 0 2px var(--vurgu-cizgi); }
.dugme.koyu { background: var(--koyu-yazi); color: var(--limon); }
.dugme.koyu:hover { color: #fff; box-shadow: none; }

/* üst bölüm */
.ust { position: sticky; top: 0; z-index: 20; background: rgba(251, 248, 239, .94); border-bottom: 1px solid var(--cizgi); backdrop-filter: blur(10px); }
.ust-ic { display: flex; align-items: center; gap: 22px; min-height: 76px; }
.logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo img { display: block; height: 46px; width: auto; }
.menu { display: flex; align-items: center; gap: 4px; margin-left: auto; min-width: 0; }
.menu > a, .menu-alt-ac { display: inline-flex; align-items: center; gap: 6px; color: var(--yazi); text-decoration: none; padding: 9px 13px; border-radius: 12px; font: 700 15.5px/1.2 var(--govde); white-space: nowrap; transition: background .15s, color .15s; }
.menu > a:hover, .menu-alt-ac:hover, .menu-alt-ac[aria-expanded="true"] { background: var(--kart); color: var(--vurgu); }
.menu .menu-zar { margin-left: 8px; background: var(--limon); color: var(--koyu-yazi); border-radius: 14px; padding: 11px 18px; font-weight: 800; }
.menu .menu-zar:hover { background: #e9ff86; color: var(--koyu-yazi); }
.menu-alt { position: relative; }
.menu-alt-ac { border: 0; background: none; cursor: pointer; }
.menu-alt-ac svg { transition: transform .15s; }
.menu-alt-ac[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu-alt-liste { display: none; position: absolute; left: 0; top: calc(100% + 10px); min-width: 300px; padding: 8px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 18px; box-shadow: 0 20px 44px rgba(60, 80, 40, .16); z-index: 30; }
.menu-alt-liste::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.menu-alt-liste.acik { display: block; }
@media (hover: hover) and (min-width: 1101px) { .menu-alt:hover .menu-alt-liste { display: block; } }
.menu-alt-liste a { display: flex; gap: 12px; align-items: center; color: var(--yazi); text-decoration: none; padding: 9px 12px; border-radius: 12px; font-weight: 700; }
.menu-alt-liste a:hover { background: var(--kart-2); color: var(--vurgu); }
.menu-alt-liste small { display: block; color: var(--soluk); font-weight: 600; font-size: 13px; }
.menu-ikon { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(145deg, #b8acff, #7a6be0); font-size: 19px; box-shadow: 0 3px 0 #5847b8; }
.menu-ikon.yas { background: var(--limon); color: var(--koyu-yazi); font: 700 12px/1 var(--mono); box-shadow: 0 3px 0 var(--limon-koyu); }
.ust-dugmeler { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ara-ac { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--cizgi); border-radius: 14px; background: var(--kart); color: var(--yazi); cursor: pointer; }
.ara-ac:hover, .ara-ac[aria-expanded="true"] { border-color: var(--vurgu); color: var(--vurgu); }
.ara-panel { border-top: 1px solid var(--cizgi); }
.ara-panel-ic { display: flex; gap: 10px; padding-top: 14px; padding-bottom: 14px; }
.ara-panel input, .giris-ara input, .ara-buyuk input { flex: 1; min-width: 0; height: 50px; padding: 0 18px; border: 1px solid var(--cizgi); border-radius: 14px; background: var(--kart); color: var(--yazi); font: inherit; }
.ara-panel input::placeholder, .giris-ara input::placeholder, .ara-buyuk input::placeholder { color: #93a08f; }
.ara-panel input:focus, .giris-ara input:focus, .ara-buyuk input:focus { outline: none; border-color: var(--vurgu); }
.ara-panel button, .giris-ara button, .ara-buyuk button { height: 50px; padding: 0 24px; border: 0; border-radius: 14px; background: var(--limon); color: var(--koyu-yazi); font: 800 16px var(--govde); cursor: pointer; }
.menu-ac { display: none; width: 44px; height: 44px; border: 1px solid var(--cizgi); border-radius: 14px; background: var(--kart); cursor: pointer; position: relative; }
.menu-ac > span:first-child, .menu-ac > span:first-child::before, .menu-ac > span:first-child::after { position: absolute; left: 12px; width: 18px; height: 2px; border-radius: 2px; background: var(--yazi); content: ""; }
.menu-ac > span:first-child { top: 20px; }
.menu-ac > span:first-child::before { left: 0; top: -6px; }
.menu-ac > span:first-child::after { left: 0; top: 6px; }
@media (max-width: 1100px) {
  .menu-ac { display: block; }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 20px 20px; background: var(--zemin-2); border-bottom: 1px solid var(--cizgi); box-shadow: 0 16px 30px rgba(60, 80, 40, .14); max-height: calc(100vh - 76px); overflow-y: auto; }
  .menu.acik { display: flex; }
  .menu > a, .menu-alt-ac { width: 100%; padding: 12px 14px; font-size: 17px; }
  .menu .menu-zar { margin: 8px 0 0; justify-content: center; }
  .menu-alt-liste { position: static; min-width: 0; margin: 4px 0 8px; box-shadow: none; }
}

/* anasayfa: giriş */
section.giris { position: relative; overflow: hidden; padding: 84px 0 120px; text-align: center; background: radial-gradient(700px 300px at 20% 100%, rgba(184, 220, 46, .5), transparent 70%), linear-gradient(180deg, #fbf8ef 0%, #f6f4e4 34%, #e2efc0 66%, #b8dc2e 100%); }
section.giris::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 90px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 50 C200 10 380 20 560 48 S900 90 1100 52 1340 18 1440 36 V90 H0Z' fill='%2394bd1c' opacity='.6'/%3E%3Cpath d='M0 70 C240 40 460 52 700 70 S1120 92 1300 66 1440 58 1440 58 V90 H0Z' fill='%23f8faf3'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; pointer-events: none; }
html.gece section.giris::after { display: none; }
section.giris .dugme.cizgi { background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9); }
section.giris .dugme.limon { background: var(--koyu-yazi); color: var(--limon); }
section.giris .dugme.limon:hover { color: #fff; box-shadow: 0 8px 22px rgba(27, 36, 16, .3); }
html section.giris h1 em { color: #24561f; }
section.giris .giris-one { color: #2f3d1c; }
section.giris .giris-one a { text-decoration-color: #24561f; }
section.giris .giris-ara button { background: var(--koyu-yazi); color: var(--limon); }
section.giris .giris-ara input { border-color: rgba(255, 255, 255, .9); }
section.giris .giris-rozet { color: #24561f; }
section.giris .dugme.cizgi:hover { background: #fff; color: var(--vurgu); }
section.giris::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(4px 4px at 8% 18%, rgba(125, 102, 224, .35), transparent), radial-gradient(3px 3px at 22% 64%, rgba(168, 201, 42, .5), transparent), radial-gradient(4px 4px at 36% 12%, rgba(238, 106, 82, .3), transparent), radial-gradient(3px 3px at 64% 22%, rgba(125, 102, 224, .35), transparent), radial-gradient(4px 4px at 78% 70%, rgba(168, 201, 42, .5), transparent), radial-gradient(3px 3px at 92% 30%, rgba(238, 106, 82, .3), transparent); animation: parilti 6s ease-in-out infinite alternate; }
@keyframes parilti { from { opacity: .3; } to { opacity: .65; } }
.giris-ic { position: relative; }
.giris-rozet { display: inline-block; padding: 6px 14px; border: 1px solid var(--cizgi); border-radius: 999px; background: var(--kart); color: var(--vurgu); font: 700 13px var(--mono); }
section.giris h1 { max-width: 900px; margin: 18px auto 16px; font-size: clamp(40px, 6vw, 70px); font-weight: 800; letter-spacing: -.02em; line-height: 1.02; }
section.giris h1 em { font-style: normal; color: var(--vurgu); }
.giris-one { max-width: 640px; margin: 0 auto 30px; color: var(--soluk); font: 15px/1.9 var(--mono); }
.giris-one a { color: var(--yazi); text-decoration: underline; text-decoration-color: var(--limon-koyu); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.giris-one a:hover { color: var(--vurgu); }
.giris-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 26px; }
.giris-ara { display: flex; gap: 8px; max-width: 540px; margin: 0 auto; }
.yuzen { position: absolute; font-size: 42px; line-height: 1; filter: drop-shadow(0 10px 14px rgba(60, 80, 40, .22)); animation: yuz 7s ease-in-out infinite; pointer-events: none; }
.yuzen.y1 { left: 8%; top: 22%; }
.yuzen.y2 { right: 9%; top: 44%; animation-delay: -2s; }
.yuzen.y3 { left: 14%; bottom: 14%; font-size: 34px; animation-delay: -4s; }
.yuzen.y4 { right: 17%; top: 13%; font-size: 26px; animation-delay: -1s; }
.yuzen.y5 { right: 6%; bottom: 10%; font-size: 30px; animation-delay: -3s; }
@keyframes yuz { 50% { transform: translateY(-14px) rotate(7deg); } }

.bu-gece { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 30px; align-items: center; padding: 16px; border-radius: 28px; background: var(--kart); border: 1px solid var(--cizgi); color: var(--yazi); text-decoration: none; transition: border-color .15s; }
.bu-gece:hover { border-color: var(--vurgu); color: var(--yazi); }
.bu-gece img { display: block; width: 100%; border-radius: 18px; aspect-ratio: 16 / 9; object-fit: cover; }
.bu-gece-ic { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 10px 14px 10px 0; }
.bu-gece-rozet { padding: 5px 12px; border-radius: 999px; background: var(--limon); color: var(--koyu-yazi); font: 700 13px var(--mono); }
.bu-gece-ic strong { font: 800 clamp(28px, 3vw, 38px)/1.1 var(--baslik); }
.bu-gece-ozet { color: var(--soluk); }
.bu-gece-alt { color: var(--soluk); font-size: 13px; }
.bu-gece-alt b { margin-right: 8px; color: var(--vurgu); font-weight: 700; }
.bu-gece .dugme { margin-top: 6px; }

/* bölümler */
.bolum { padding-top: 56px; padding-bottom: 6px; }
.bolum-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.bolum-baslik { margin: 0 0 18px; font-size: clamp(28px, 3.2vw, 36px); font-weight: 800; color: var(--yazi); }
.bolum-bas .bolum-baslik { margin: 0; }
.bolum-baslik em { font-style: normal; color: var(--vurgu); }
.raf-tumu { flex-shrink: 0; color: var(--soluk); font-size: 13px; font-weight: 700; text-decoration: none; }
.raf-tumu:hover { color: var(--vurgu); }

.siralama { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 26px; }
.sira { display: flex; align-items: center; gap: 16px; padding: 20px 10px; border-bottom: 1px solid var(--cizgi); border-radius: 16px; color: var(--yazi); text-decoration: none; transition: background .15s; }
.sira:hover { background: var(--kart); color: var(--yazi); }
.sira-no { min-width: 52px; color: var(--soluk); font-size: 26px; font-weight: 700; }
.sira:hover .sira-no { color: var(--vurgu); }
.sira-ikon { display: grid; place-items: center; flex-shrink: 0; width: 56px; height: 56px; border-radius: 17px; background: linear-gradient(145deg, #b8acff, #7a6be0); font-size: 27px; box-shadow: 0 6px 0 #5847b8, 0 12px 20px rgba(88, 71, 184, .2); transform: rotate(-6deg); transition: transform .2s; }
.sira:hover .sira-ikon { transform: rotate(4deg) scale(1.05); }
.sira-metin strong { display: block; font: 700 20px/1.2 var(--baslik); }
.sira-metin small { display: block; margin-top: 2px; color: var(--soluk); font-size: 12px; }

.yas-kutular { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.yas-kutu { position: relative; display: flex; align-items: center; gap: 16px; padding: 22px; border-radius: var(--yaricap); background: var(--kart); border: 1px solid var(--cizgi); color: var(--yazi); text-decoration: none; transition: transform .15s, border-color .15s; }
.yas-kutu:hover { transform: translateY(-4px); border-color: var(--vurgu); color: var(--yazi); }
.yas-sayi { display: grid; place-items: center; flex-shrink: 0; width: 74px; height: 74px; border-radius: 22px; font: 800 24px/1 var(--baslik); color: var(--koyu-yazi); }
.renk1 .yas-sayi { background: var(--limon); }
.renk2 .yas-sayi { background: var(--mor); }
.renk3 .yas-sayi { background: var(--mercan); }
.yas-metin strong { display: block; font: 800 22px/1.2 var(--baslik); }
.yas-metin small { display: block; color: var(--soluk); font-size: 15px; font-weight: 600; }
.yas-adet { position: absolute; top: 14px; right: 16px; color: var(--soluk); font-size: 12px; }

.etkinlik-kutular { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.etkinlik-kutu { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 24px 22px 22px; border-radius: var(--yaricap); background: var(--kart); border: 1px solid var(--cizgi); color: var(--yazi); text-decoration: none; transition: transform .15s, border-color .15s; }
.etkinlik-kutu:hover { transform: translateY(-4px); border-color: var(--vurgu); color: var(--yazi); }
.etkinlik-ikon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 10px; border-radius: 17px; background: linear-gradient(145deg, #b8acff, #7a6be0); font-size: 28px; box-shadow: 0 6px 0 #5847b8; transform: rotate(-6deg); }
.etkinlik-kutu.e2 .etkinlik-ikon { background: linear-gradient(145deg, #e9ff8c, #c3dd45); box-shadow: 0 6px 0 #97ad22; }
.etkinlik-kutu.e3 .etkinlik-ikon { background: linear-gradient(145deg, #ffb3a5, #ff7f6a); box-shadow: 0 6px 0 #d45a46; }
.etkinlik-kutu.e4 .etkinlik-ikon { background: linear-gradient(145deg, #a8dcff, #5eaee8); box-shadow: 0 6px 0 #3a86c0; }
.etkinlik-kutu strong { font: 800 21px/1.2 var(--baslik); }
.etkinlik-kutu small { color: var(--soluk); font-size: 15px; font-weight: 600; }
.etkinlik-ok { position: absolute; right: 22px; top: 22px; color: var(--vurgu); font-size: 22px; font-weight: 800; }

.bant { position: relative; margin-top: 64px; padding: 56px 30px; border-radius: 32px; background: var(--limon); color: var(--koyu-yazi); text-align: center; overflow: hidden; }
.bant-yildiz { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .45; }
.bant h2 { position: relative; max-width: 760px; margin: 0 auto 10px; font-size: clamp(28px, 3.6vw, 40px); }
.bant p { position: relative; max-width: 600px; margin: 0 auto 22px; font-weight: 600; }
.bant .dugme { position: relative; }
.tanitim { max-width: 900px; padding: 30px 34px; border-radius: var(--yaricap); background: var(--kart); border: 1px solid var(--cizgi); color: var(--metin-yazi); }
.tanitim h2 { margin-top: 0; color: var(--yazi); }

/* kartlar */
.kartlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kart { display: flex; flex-direction: column; padding: 12px; border-radius: var(--yaricap); background: var(--kart); border: 1px solid var(--cizgi); transition: transform .15s, border-color .15s; }
.kart:hover { transform: translateY(-4px); border-color: var(--vurgu); }
.kart-gorsel { position: relative; display: block; overflow: hidden; border-radius: 14px; aspect-ratio: 16 / 9; background: var(--kart-2); }
.kart-gorsel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.kart:hover .kart-gorsel img { transform: scale(1.04); }
.kart-bos { display: grid; place-items: center; height: 100%; font: 800 48px var(--baslik); color: var(--vurgu); }
.kart-etiket { position: absolute; top: 9px; right: 9px; max-width: calc(100% - 18px); padding: 4px 11px; border-radius: 999px; background: var(--limon); color: var(--koyu-yazi); font-weight: 800; font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kart h3 { margin: 14px 4px 6px; font-size: 19px; font-weight: 700; line-height: 1.25; }
.kart h3 a { color: var(--yazi); text-decoration: none; }
.kart h3 a:hover { color: var(--vurgu); }
.kart p { margin: 0 4px 12px; color: var(--soluk); font-size: 14.5px; line-height: 1.5; }
.kart-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin: auto 4px 0; padding-top: 10px; border-top: 1px solid var(--cizgi); color: var(--soluk); font-size: 12px; }
.kart-deger { color: var(--vurgu); }
.etiket { align-self: flex-start; display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--limon); color: var(--koyu-yazi); font-weight: 800; font-size: 12.5px; text-decoration: none; }
.etiket:hover { background: #fff; color: var(--koyu-yazi); }

/* liste sayfaları */
.yol { margin: 24px 0 12px; color: var(--soluk); font: 12.5px var(--mono); }
.yol a { color: var(--soluk); text-decoration: none; }
.yol a:hover { color: var(--vurgu); }
.liste-bas { position: relative; margin-bottom: 28px; padding: 32px 34px; border-radius: 28px; background: var(--kart); border: 1px solid var(--cizgi); overflow: hidden; }
.liste-bas::after { content: "✦"; position: absolute; right: 30px; top: 18px; color: var(--vurgu); font-size: 40px; opacity: .8; }
.liste-bas h1 { margin: 0 0 8px; font-size: clamp(32px, 4.4vw, 48px); font-weight: 800; }
.liste-alt { margin: 0; color: var(--vurgu); font-weight: 800; }
.liste-giris { max-width: 780px; color: var(--soluk); font-size: 17px; }
.yazar-bas { display: flex; gap: 22px; align-items: center; }
.yazar-foto { border-radius: 50%; }
.alt-kategoriler { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ara-buyuk { display: flex; gap: 8px; margin: 0 0 24px; }
.bos-mesaj { padding: 30px; border-radius: var(--yaricap); background: var(--kart); border: 1px solid var(--cizgi); text-align: center; color: var(--soluk); }
.sayfalar { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 36px 0 10px; }
.sayfalar a, .sayfalar span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 12px; background: var(--kart); border: 1px solid var(--cizgi); color: var(--yazi); font: 700 14px var(--mono); text-decoration: none; }
.sayfalar a:hover { border-color: var(--vurgu); color: var(--vurgu); }
.sayfalar span[aria-current] { background: var(--limon); border-color: var(--vurgu); color: var(--koyu-yazi); }
.sayfalar .bos { background: none; border: 0; }

/* masal sayfası */
.yazi-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 36px; align-items: start; }
.yazi-duzen.tek { grid-template-columns: minmax(0, 860px); justify-content: center; }
.yazi { padding: 30px 38px 34px; border-radius: 30px; background: var(--kart); border: 1px solid var(--cizgi); }
.yazi .yol { margin-top: 0; }
.yazi-bas h1 { margin: 4px 0 16px; font-size: clamp(32px, 4.6vw, 48px); font-weight: 800; }
.kunye { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.kunye li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; border: 1px solid var(--cizgi); color: var(--soluk); font: 12.5px var(--mono); }
.kunye a { color: inherit; text-decoration: none; }
.kunye .k-yas { background: var(--limon); border-color: var(--vurgu); color: var(--koyu-yazi); font-weight: 700; }
.kapak { margin: 0 0 18px; }
.kapak img { display: block; width: 100%; border-radius: 20px; }
.okuma-cubugu { position: sticky; top: 86px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 26px; padding: 8px; border-radius: 18px; background: rgba(255, 255, 255, .94); border: 1px solid var(--cizgi); box-shadow: var(--golge); backdrop-filter: blur(8px); }
.okuma-cubugu button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; height: 42px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--kart); color: var(--yazi); font: 800 15px var(--govde); cursor: pointer; }
.okuma-cubugu button:hover { color: var(--vurgu); }
.okuma-cubugu .oc-dinle { background: var(--limon); color: var(--koyu-yazi); }
.okuma-cubugu .oc-dinle:hover { color: var(--koyu-yazi); background: #e9ff86; }
.okuma-cubugu .oc-dinle[aria-pressed="true"] { background: var(--mercan); }
.okuma-cubugu .oc-gece { margin-left: auto; }
.okuma-cubugu .oc-gece[aria-pressed="true"] { background: #1d1d22; color: #dcf36a; }
.oc-grup { display: inline-flex; gap: 4px; }
.oc-grup button { min-width: 48px; justify-content: center; }

.metin { font-size: var(--metin-boyut); line-height: 1.85; color: var(--metin-yazi); }
.metin > p { margin: 0 0 1.05em; }
.metin a { color: var(--vurgu); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.metin strong, .metin b { color: var(--yazi); }
.masal .metin > p.giris { font-size: .95em; font-style: italic; color: var(--soluk); padding-bottom: 1em; border-bottom: 1px dashed var(--cizgi); }
.masal .metin > p.giris + p::first-letter { float: left; margin: .1em .12em 0 0; font: 800 3.3em/.8 var(--baslik); color: var(--vurgu); }
.metin h2 { margin: 1.6em 0 .6em; font-size: 1.4em; font-weight: 800; color: var(--yazi); }
.metin h3 { margin: 1.4em 0 .5em; font-size: 1.2em; color: var(--yazi); }
.metin ul, .metin ol { padding-left: 1.3em; }
.metin li { margin-bottom: .4em; }
.metin li::marker { color: var(--vurgu); }
.metin .okunuyor { background: var(--limon-zemin); border-left: 4px solid var(--vurgu-cizgi); padding-left: 16px; margin-left: -20px; border-radius: 0 10px 10px 0; }
.metin .ders { position: relative; margin: 2em 0; padding: 22px 26px 18px 88px; border-radius: 22px; background: var(--ders-zemin); border: 1px dashed var(--vurgu-cizgi); font-size: .9em; }
.metin .ders::before { content: "★"; position: absolute; left: 22px; top: 20px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--limon); color: var(--koyu-yazi); font-size: 26px; line-height: 1; transform: rotate(-6deg); }
.metin .ders > b { display: block; margin-bottom: 4px; font: 800 1.2em/1.3 var(--baslik); color: var(--vurgu); }
.metin .ders p { margin: 0 0 .5em; }
.metin .ders ul { margin: .4em 0 .2em; }
.metin dl.kelimeler { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0; font-size: .82em; }
.metin dl.kelimeler > div { padding: 14px 18px; border-radius: 16px; background: var(--kart-2); border: 1px solid var(--cizgi); line-height: 1.55; }
.metin dl.kelimeler dt { margin-bottom: 2px; font: 800 1.2em var(--baslik); color: var(--mor); }
.metin dl.kelimeler dd { margin: 0; }
.metin ul.sorular { list-style: none; padding: 0; }
.metin ul.sorular li { position: relative; margin-bottom: 10px; padding: 12px 16px 12px 58px; border-radius: 16px; background: var(--kart-2); border: 1px solid var(--cizgi); font-size: .92em; }
.metin ul.sorular li::before { content: "?"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--mor); color: var(--koyu-yazi); font: 800 17px/1 var(--baslik); }
.metin details { margin-bottom: 10px; padding: 14px 18px; border-radius: 16px; background: var(--kart-2); border: 1px solid var(--cizgi); font-size: .9em; }
.metin summary { font-weight: 800; color: var(--yazi); cursor: pointer; }
.metin details p { margin: .6em 0 0; }
.metin table { width: 100%; border-collapse: collapse; font-size: .85em; }
.metin th, .metin td { padding: 10px 12px; border-bottom: 1px solid var(--cizgi); text-align: left; }
.tablo { overflow-x: auto; margin-bottom: 1.2em; }

.metin figure.sahne { margin: 1.6em -10px 1.8em; }
.metin figure.sahne img { display: block; width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--cizgi); }
.metin figure.sahne figcaption { display: flex; gap: 8px; align-items: baseline; margin-top: 10px; padding: 0 6px; color: var(--soluk); font: 13px/1.6 var(--mono); }
.metin figure.sahne figcaption::before { content: "✦"; color: var(--vurgu); }
.masal-son { position: relative; margin: 34px 0 24px; padding: 34px 24px; border-radius: 26px; background: var(--limon); color: var(--koyu-yazi); text-align: center; overflow: hidden; }
.masal-son-yildiz { font-size: 24px; letter-spacing: .3em; }
.masal-son strong { display: block; margin-top: 4px; font: 800 30px/1.2 var(--baslik); }
.masal-son p { margin: 4px 0 18px; font-weight: 600; }
.masal-son-dugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.masal-son .dugme.sari, .masal-son .dugme.limon { background: var(--koyu-yazi); color: var(--limon); }
.masal-son .dugme.cizgi-koyu { color: var(--koyu-yazi); box-shadow: inset 0 0 0 2px var(--koyu-yazi); }
.masal-son .dugme.cizgi-koyu:hover { background: rgba(0, 0, 0, .08); }
.yazar-kutu { display: flex; gap: 18px; align-items: flex-start; margin: 26px 0 0; padding: 22px 24px; border-radius: var(--yaricap); background: var(--kart-2); border: 1px solid var(--cizgi); }
.yazar-kutu img { border-radius: 50%; flex-shrink: 0; }
.yazar-kutu-ust { color: var(--soluk); font: 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.yazar-kutu-ad { font: 800 20px var(--baslik); color: var(--yazi); text-decoration: none; }
.yazar-kutu p { margin: 6px 0 0; font-size: 15px; color: var(--metin-yazi); }
.yazar-kutu .soluk { font: 12px var(--mono); color: var(--soluk); }
.icindekiler { border-radius: var(--yaricap); background: var(--kart); border: 1px solid var(--cizgi); }
.icindekiler.masaustu { position: sticky; top: 100px; padding: 18px 20px; }
.icindekiler.mobil { display: none; margin-bottom: 24px; padding: 14px 18px; background: var(--kart-2); }
.icindekiler summary, .yan-baslik { font: 800 18px var(--baslik); color: var(--yazi); cursor: pointer; }
.icindekiler ol { margin: 10px 0 0; padding-left: 20px; font-size: 15px; }
.icindekiler li { margin-bottom: 6px; }
.icindekiler li::marker { color: var(--vurgu); font-family: var(--mono); font-size: 12px; }
.icindekiler a { color: var(--soluk); text-decoration: none; }
.icindekiler a:hover, .icindekiler a.aktif { color: var(--vurgu); font-weight: 800; }
.ilgili { padding-bottom: 10px; }

/* masal testi ve boyama bağlantısı */
.masal-test { margin: 34px 0 10px; padding: 26px 26px 18px; border-radius: 24px; background: var(--kart-2); border: 1px solid var(--cizgi); }
.masal-test h2 { margin: 0 0 4px; font-size: 28px; color: var(--yazi); }
.test-giris { margin: 0 0 16px; color: var(--soluk); font: 13px var(--mono); }
.test-sorular { margin: 0; padding-left: 1.6em; }
.test-soru { margin-bottom: 18px; color: var(--vurgu); font: 700 15px var(--mono); }
.test-metin { margin: 0 0 8px; color: var(--yazi); font: 700 18px/1.4 var(--govde); }
.test-secenekler { display: flex; flex-wrap: wrap; gap: 8px; }
.test-secenek { min-height: 44px; padding: 8px 18px; border: 1px solid var(--cizgi); border-radius: 12px; background: var(--kart); color: var(--yazi); font: 700 16px var(--govde); cursor: pointer; transition: border-color .12s, color .12s; }
.test-secenek:hover { border-color: var(--vurgu); color: var(--vurgu); }
.bitti .test-secenek { cursor: default; }
.bitti .test-secenek:hover { border-color: var(--cizgi); color: var(--yazi); }
.test-secenek.dogru, .bitti .test-secenek.dogru:hover { border-color: var(--vurgu); background: var(--limon); color: var(--koyu-yazi); }
.test-secenek.dogru::before { content: "✓ "; }
.test-secenek.yanlis, .bitti .test-secenek.yanlis:hover { border-color: var(--mercan); background: rgba(255, 138, 117, .12); color: var(--mercan); }
.test-secenek.yanlis::before { content: "✗ "; }
.test-aciklama { margin: 8px 0 0; color: var(--soluk); font: 600 15px/1.5 var(--govde); }
.test-sonuc { margin: 6px 0 4px; padding: 14px 18px; border-radius: 16px; background: var(--limon); color: var(--koyu-yazi); font: 700 15px var(--mono); }
.masal-boyama { display: flex; gap: 18px; align-items: center; margin: 26px 0 0; padding: 14px; border-radius: var(--yaricap); background: var(--kart-2); border: 1px solid var(--cizgi); color: var(--yazi); text-decoration: none; transition: border-color .15s; }
.masal-boyama:hover { border-color: var(--vurgu); color: var(--yazi); }
.masal-boyama img { width: 150px; border-radius: 12px; flex-shrink: 0; background: #fff; }
.masal-boyama small { display: block; color: var(--vurgu); font: 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.masal-boyama strong { display: block; font: 800 22px/1.2 var(--baslik); }
.masal-boyama span span { display: block; color: var(--soluk); font-size: 15px; }

/* kurumsal sayfalar ve formlar */
.yazi:not(.masal) .metin { font-size: 18px; }
.iletisim-form { display: grid; gap: 14px; margin: 1em 0; padding: 24px; border-radius: var(--yaricap); background: var(--kart-2); border: 1px solid var(--cizgi); font-size: 16px; }
.iletisim-form label { display: grid; gap: 6px; font-weight: 800; color: var(--yazi); }
.iletisim-form input, .iletisim-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: 12px; background: var(--zemin); color: var(--yazi); font: inherit; font-weight: 400; }
.iletisim-form input:focus, .iletisim-form textarea:focus { outline: none; border-color: var(--vurgu); }
.iki { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gizli-alan { position: absolute; left: -9999px; }
.bildirim { padding: 12px 16px; border-radius: 12px; background: var(--limon-zemin); border: 1px solid var(--limon); color: var(--yazi); font-weight: 700; }
.bildirim.hata { background: rgba(255, 138, 117, .12); border-color: var(--mercan); }
.bulunamadi { margin: 40px auto 10px; text-align: center; }
.bulunamadi h1 { font-size: 42px; }
.reklam { margin: 1.6em 0; min-height: 100px; }

/* alt bölüm */
.alt { margin-top: 80px; padding: 54px 0 0; border-top: 1px solid var(--cizgi); background: var(--zemin-2); color: var(--soluk); }
.alt-tepe { display: none; }
.alt-ic { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 30px; }
.alt h2 { margin: 0 0 14px; color: var(--yazi); font-size: 19px; }
.alt ul { margin: 0; padding: 0; list-style: none; font: 13px/1.5 var(--mono); }
.alt li { margin-bottom: 9px; }
.alt a { color: var(--soluk); text-decoration: none; }
.alt a:hover { color: var(--vurgu); }
.alt-hakkinda p { font-size: 15px; }
.telif { margin-top: 34px; padding-top: 20px; padding-bottom: 26px; border-top: 1px solid var(--cizgi); font: 12px var(--mono); color: var(--soluk); }

/* gece modu: uyku öncesi okuma için koyu tema (Gece Lambası renkleri) */
html.gece body { --zemin: #131316; --zemin-2: #18181c; --kart: #1d1d22; --kart-2: #24242b; --cizgi: #2c2c34; --yazi: #f2f2f4; --metin-yazi: #dedee6; --soluk: #9d9dac; --limon-zemin: rgba(220, 243, 106, .1); --vurgu: #dcf36a; --vurgu-cizgi: #dcf36a; --mor: #a99cff; --ders-zemin: #23241a; --golge: 0 12px 30px rgba(0, 0, 0, .35); color-scheme: dark; }
html.gece .ust { background: rgba(19, 19, 22, .94); }
html.gece .logo img { content: url(logo-beyaz.png); }
html.gece .okuma-cubugu { background: rgba(36, 36, 43, .94); }

/* duyarlı */
@media (max-width: 1100px) {
  .kartlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .siralama { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yazi-duzen { grid-template-columns: minmax(0, 1fr); }
  .yan { display: none; }
  .icindekiler.mobil { display: block; }
  .yuzen.y2, .yuzen.y5 { display: none; }
}
@media (max-width: 860px) {
  section.giris { padding: 56px 0 90px; }
  .yuzen.y1 { left: 4%; top: 6%; font-size: 30px; }
  .bu-gece { grid-template-columns: 1fr; gap: 14px; }
  .bu-gece-ic { padding: 0 6px 6px; }
  .kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .yas-kutular { grid-template-columns: 1fr; }
  .alt-ic { grid-template-columns: 1fr 1fr; }
  .alt-hakkinda { grid-column: 1 / -1; }
  .yazi { padding: 22px 22px 26px; border-radius: 24px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  :root { --metin-boyut: 18px; }
  .kap { padding: 0 16px; }
  .ust-ic { min-height: 66px; gap: 10px; }
  .logo img { height: 38px; }
  .menu { max-height: calc(100vh - 66px); }
  section.giris h1 { font-size: 40px; }
  .giris-one { font-size: 13.5px; }
  .giris-dugmeler .dugme { flex: 1 1 100%; }
  .yuzen { font-size: 28px; }
  .yuzen.y3, .yuzen.y4 { display: none; }
  .siralama { grid-template-columns: 1fr; }
  .sira { padding: 16px 6px; }
  .sira-no { min-width: 42px; font-size: 21px; }
  .kartlar { grid-template-columns: 1fr; }
  .bolum { padding-top: 44px; }
  .bolum-bas { flex-direction: column; gap: 4px; }
  .bant { padding: 40px 20px; border-radius: 24px; }
  .liste-bas { padding: 24px 22px; }
  .yazi { margin: 0 -16px; padding: 18px 16px 24px; border-radius: 0; border-left: 0; border-right: 0; }
  .okuma-cubugu { top: 72px; flex-wrap: nowrap; gap: 6px; }
  .okuma-cubugu button { height: 40px; padding: 0 12px; font-size: 14px; }
  .okuma-cubugu .oc-etiket { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .okuma-cubugu .oc-gece { margin-left: 0; }
  .oc-grup button { min-width: 42px; }
  .metin .ders { padding: 76px 18px 16px; }
  .metin .ders::before { top: 14px; }
  .metin .okunuyor { margin-left: -12px; padding-left: 8px; }
  .metin figure.sahne { margin-left: 0; margin-right: 0; }
  .metin figure.sahne img { border-radius: 14px; }
  .masal-test { padding: 20px 16px 12px; }
  .masal-boyama { flex-direction: column; align-items: flex-start; }
  .masal-boyama img { width: 100%; }
  .iki { grid-template-columns: 1fr; }
  .alt-ic { grid-template-columns: 1fr; }
  .yazar-kutu { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ========================================================== etkinlikler */
.sayfa-baslik { margin: 6px 0 10px; font-size: clamp(34px, 4.8vw, 52px); font-weight: 800; }
.sayfa-giris { max-width: 820px; margin: 0 0 26px; color: var(--soluk); font: 15px/1.85 var(--mono); }
.etkinlik-metin { margin-top: 36px; }
.etkinlik-metin h2 { font-size: 26px; color: var(--yazi); }
.etkinlik-metin h2:not(:first-child) { margin-top: 1.4em; }
.etkinlik-metin li::marker { color: var(--vurgu); }
.etkinlik-metin details { margin-bottom: 10px; padding: 12px 16px; border-radius: 14px; background: var(--kart-2); border: 1px solid var(--cizgi); }
.etkinlik-metin summary { font-weight: 800; color: var(--yazi); cursor: pointer; }

/* boyama */
.boyama-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.boyama-kart { display: block; padding: 10px; border-radius: var(--yaricap); background: var(--kart); border: 1px solid var(--cizgi); color: var(--yazi); text-decoration: none; text-align: center; transition: transform .15s, border-color .15s; }
.boyama-kart:hover { transform: translateY(-4px) rotate(-1deg); border-color: var(--vurgu); color: var(--vurgu); }
.boyama-kart img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: #fff; }
.boyama-kart strong { display: block; padding: 10px 8px 4px; font: 700 18px/1.2 var(--baslik); }
.boya { padding: 16px; border-radius: 26px; background: var(--kart); border: 1px solid var(--cizgi); }
.boya-arac { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.boya-renkler { display: flex; flex-wrap: wrap; gap: 7px; }
.boya-renk { position: relative; width: 36px; height: 36px; padding: 0; border: 3px solid var(--kart); border-radius: 50%; background: var(--r); box-shadow: 0 0 0 1px var(--cizgi); cursor: pointer; }
.boya-renk.secili { box-shadow: 0 0 0 3px var(--vurgu); transform: scale(1.12); }
.boya-renk.ozel { --r: conic-gradient(#e8423a, #ffc83d, #8fd16a, #4f9de8, #8f72ea, #e8423a); background: var(--r); overflow: hidden; }
.boya-renk.ozel input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.boya-dugmeler { display: flex; flex-wrap: wrap; gap: 6px; }
.boya-dugmeler button { height: 40px; padding: 0 14px; border: 1px solid var(--cizgi); border-radius: 12px; background: var(--kart-2); color: var(--yazi); font: 800 14.5px var(--govde); cursor: pointer; white-space: nowrap; }
.boya-dugmeler button:hover { border-color: var(--vurgu); color: var(--vurgu); }
.boya-dugmeler button.secili { background: var(--limon); border-color: var(--vurgu); color: var(--koyu-yazi); }
.boya-dugmeler button:disabled { opacity: .4; cursor: default; }
.boya-tuval { position: relative; border-radius: 18px; overflow: hidden; background: #fff; }
.boya-tuval canvas { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: none; }
.boya-tuval canvas.firca { cursor: cell; }
.boya-yukleniyor { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #777; font-weight: 800; }
.boya-alt { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.yazdir-resim { display: none; }
.boya-masal a { display: flex; gap: 18px; align-items: center; margin: 28px 0 0; padding: 14px; border-radius: var(--yaricap); background: var(--kart); border: 1px solid var(--cizgi); color: var(--yazi); text-decoration: none; }
.boya-masal a:hover { border-color: var(--vurgu); color: var(--yazi); }
.boya-masal img { width: 220px; border-radius: 14px; flex-shrink: 0; }
.boya-masal small { display: block; color: var(--vurgu); font: 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.boya-masal strong { display: block; font: 800 22px/1.2 var(--baslik); }
.boya-masal span span { display: block; color: var(--soluk); font-size: 15px; }

/* uyku köşesi */
.uyku { padding: 22px; border-radius: 26px; background: var(--kart); border: 1px solid var(--cizgi); }
.uyku-sesler { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.uyku-ses { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px; border: 1px solid var(--cizgi); border-radius: 18px; background: var(--kart-2); color: var(--yazi); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.uyku-ses span { font-size: 30px; line-height: 1.2; }
.uyku-ses strong { font: 800 19px/1.2 var(--baslik); }
.uyku-ses small { color: var(--soluk); font-size: 14px; font-weight: 600; }
.uyku-ses:hover { border-color: var(--vurgu); }
.uyku-ses[aria-pressed="true"] { border-color: var(--vurgu); background: var(--limon-zemin); box-shadow: 0 0 24px rgba(220, 243, 106, .15); }
.uyku-ses[aria-pressed="true"] strong::after { content: " ●"; color: var(--vurgu); animation: parilti 1.2s ease-in-out infinite alternate; }
.uyku-ayar { margin-top: 20px; }
.uyku-ses-duzey { display: flex; align-items: center; gap: 14px; font-weight: 800; }
.uyku-ses-duzey input { flex: 1; max-width: 360px; accent-color: var(--vurgu); }
.uyku-zaman { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; font-weight: 800; }
.uyku-zaman button { height: 38px; padding: 0 14px; border: 1px solid var(--cizgi); border-radius: 12px; background: var(--kart-2); color: var(--yazi); font: 700 13px var(--mono); cursor: pointer; }
.uyku-zaman button[aria-pressed="true"] { border-color: var(--vurgu); background: var(--limon); color: var(--koyu-yazi); }
.uyku-durum { margin: 14px 0; color: var(--soluk); font: 13px var(--mono); }
.uyku-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; }
.lamba { position: fixed; inset: 0; z-index: 100; overflow: hidden; cursor: pointer; transition: background 1s; }
.lamba[data-renk="amber"] { background: radial-gradient(circle at 50% 45%, #6b3f12 0%, #2a1606 55%, #0d0703 100%); }
.lamba[data-renk="pembe"] { background: radial-gradient(circle at 50% 45%, #6b2a4a 0%, #2a0f1e 55%, #0d0509 100%); }
.lamba[data-renk="mavi"] { background: radial-gradient(circle at 50% 45%, #233a7a 0%, #0f1a3a 55%, #05080f 100%); }
.lamba[data-renk="yesil"] { background: radial-gradient(circle at 50% 45%, #1f5a45 0%, #0b2a20 55%, #030d0a 100%); }
.lamba-yildizlar span { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff6d6; opacity: 0; animation: lamba-yildiz 8s ease-in-out infinite; }
@keyframes lamba-yildiz { 0%, 100% { opacity: 0; transform: scale(.6); } 50% { opacity: .7; transform: scale(1.2); } }
.lamba-renkler, .lamba-kapat { opacity: 0; transition: opacity .3s; }
.lamba.dugmeler-acik .lamba-renkler, .lamba.dugmeler-acik .lamba-kapat { opacity: 1; }
.lamba-renkler { position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%); display: flex; gap: 14px; }
.lamba-renkler button { width: 44px; height: 44px; border: 2px solid rgba(255, 255, 255, .5); border-radius: 50%; cursor: pointer; }
.lamba-renkler [data-renk="amber"] { background: #c47a2a; } .lamba-renkler [data-renk="pembe"] { background: #c0507f; } .lamba-renkler [data-renk="mavi"] { background: #4566c0; } .lamba-renkler [data-renk="yesil"] { background: #3a9a74; }
.lamba-kapat { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); padding: 10px 20px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .15); color: #fff; font: 800 15px var(--govde); cursor: pointer; }
html.lamba-acik body { overflow: hidden; }

/* kendi masalını kur */
.masal-kur { padding: 24px; border-radius: 26px; background: var(--kart); border: 1px solid var(--cizgi); }
.kur-adim { margin-bottom: 24px; }
.kur-etiket { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font: 800 21px/1.2 var(--baslik); color: var(--yazi); }
.kur-no { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--limon); color: var(--koyu-yazi); font: 700 15px var(--mono); flex-shrink: 0; transform: rotate(-6deg); }
.kur-ad { width: 100%; max-width: 420px; height: 52px; padding: 0 18px; border: 1px solid var(--cizgi); border-radius: 14px; background: var(--zemin); color: var(--yazi); font: 700 18px var(--govde); }
.kur-ad:focus { outline: none; border-color: var(--vurgu); }
.kur-not { margin: 8px 0 0; color: var(--soluk); font: 12px var(--mono); }
.kur-secenekler { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.kur-secenek { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px 12px; border: 1px solid var(--cizgi); border-radius: 16px; background: var(--kart-2); color: var(--yazi); font: inherit; cursor: pointer; transition: transform .12s, border-color .12s; }
.kur-secenek span { font-size: 34px; line-height: 1.1; }
.kur-secenek strong { font-size: 14.5px; line-height: 1.25; text-align: center; }
.kur-secenek:hover { transform: translateY(-2px); border-color: var(--vurgu); }
.kur-secenek[aria-checked="true"] { border: 2px solid var(--vurgu-cizgi); background: var(--limon-zemin); color: var(--vurgu); }
.kur-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; }
.kur-masal { margin-top: 30px; padding: 26px 0 0; border-top: 1px dashed var(--cizgi); background: none; border-radius: 0; }
.kur-baslik { margin: 0 0 16px; font-size: clamp(28px, 4vw, 40px); color: var(--yazi); }
.kur-masal .metin > p:first-child::first-letter { float: left; margin: .1em .12em 0 0; font: 800 3.2em/.8 var(--baslik); color: var(--vurgu); }
@media (max-width: 560px) {
  .boya { padding: 10px; border-radius: 18px; }
  .boya-renk { width: 32px; height: 32px; }
  .boya-masal a { flex-direction: column; align-items: flex-start; }
  .boya-masal img { width: 100%; }
  .uyku, .masal-kur { padding: 16px; }
  .kur-secenekler { grid-template-columns: repeat(3, 1fr); }
}

/* yazdırma */
@media print {
  .ust, .alt, .yol, .okuma-cubugu, .boya, .boya-masal, .bolum .bolum-baslik, .boyama-kartlar, .ortala, .etkinlik-metin, .etkinlik-kutular, .kur-adim, .kur-dugmeler, .masal-son, .yazar-kutu, .ilgili, .reklam, .sayfa-giris, .masal-test, .masal-boyama { display: none !important; }
  body { background: #fff; color: #111; }
  .yazi, .masal-kur { background: #fff; border: 0; padding: 0; }
  .metin, .yazi-bas h1, .kur-baslik { color: #111; }
  .yazdir-resim { display: block; width: 100%; height: auto; }
  .kur-masal { border: 0; margin: 0; padding: 0; }
}