/* Etkinlik sayfalarının ortak stili (etkinlik-*.html). Makale düzeni rehber sayfalarındaki satır içi stilin aynısıdır. */

.article-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px
}

.article-header {
    text-align: center;
    margin-bottom: 40px
}

.article-title {
    font-size: 2.2rem;
    margin-bottom: 15px;
    color: var(--text)
}

.article-meta {
    color: var(--muted);
    font-size: 0.9rem
}

.article-body {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text)
}

.article-body h2 {
    margin-top: 35px;
    margin-bottom: 15px;
    color: var(--accent-pink)
}

.article-body h3 {
    margin-top: 25px;
    margin-bottom: 10px;
    font-weight: 600
}

.article-body p {
    margin-bottom: 18px
}

.article-body ul,
.article-body ol {
    margin-bottom: 18px;
    padding-left: 20px
}

.article-body li {
    margin-bottom: 8px
}

.breadcrumb {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 20px
}

.breadcrumb a {
    color: var(--muted);
    text-decoration: none
}

.breadcrumb a:hover {
    color: var(--text)
}

.table-responsive {
    overflow-x: auto;
    margin: 20px 0;
    border-radius: 8px;
    border: var(--glass-border)
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 460px
}

th,
td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1)
}

th {
    background: rgba(255, 255, 255, 0.05);
    font-weight: 600
}

.info-box {
    background: rgba(0, 153, 255, 0.1);
    border-left: 4px solid #0099ff;
    padding: 20px;
    margin: 25px 0;
    border-radius: 4px
}

.warning-box {
    background: rgba(255, 193, 7, 0.1);
    border-left: 4px solid #ffc107;
    padding: 20px;
    margin: 25px 0;
    border-radius: 4px
}

.related-articles {
    margin-top: 40px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08)
}

.related-articles h3 {
    margin-top: 0;
    color: var(--accent-pink)
}

.related-articles a {
    color: var(--text);
    text-decoration: none;
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05)
}

.related-articles a:hover {
    color: var(--accent-pink)
}

.related-articles a:last-child {
    border-bottom: none
}

.article-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    color: var(--muted);
    text-align: center
}

.article-footer a {
    color: var(--muted);
    text-decoration: none;
    margin: 0 8px
}

/* Etkinlik katmanları: çocuk oyunu (.kid-zone), etkinlik kartı, gözlem formu, yazdırma.
   Oyuna özgü parçaların stili kendi sayfasındadır. */
.kid-zone {
    --k-bg: #fff8e7;
    --k-ink: #2b2140;
    --k-soft: #5a4e72;
    background: var(--k-bg);
    color: var(--k-ink);
    border-radius: 28px;
    padding: 24px 18px 28px;
    margin: 24px 0 32px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}

.kid-zone h2 {
    /* sitenin h2 rengi açık zeminde okunmuyor */
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--k-ink);
    margin: 0 0 4px;
    font-size: 1.6rem;
}

.kid-zone .kid-sub {
    margin: 0 0 18px;
    color: var(--k-soft);
}

.stars {
    font-size: 1.8rem;
    letter-spacing: 4px;
    min-height: 2.4rem;
    /* 10 yıldız 375 px'te kutuya sığmaz; boşluksuz dizi alt satıra geçsin, sayfa yana taşmasın */
    overflow-wrap: anywhere;
}

.kid-btn {
    border: 0;
    border-radius: 999px;
    padding: 14px 28px;
    font: inherit;
    font-weight: 800;
    font-size: 1.1rem;
    background: var(--k-ink);
    color: #fff;
    cursor: pointer;
}

.kid-btn:focus-visible {
    outline: 4px solid var(--k-ink);
    outline-offset: 3px;
}

.kid-status {
    min-height: 1.6rem;
    margin: 12px 0 0;
    font-weight: 700;
}

.kid-note {
    font-size: .85rem;
    color: var(--k-soft);
    margin: 14px auto 0;
    max-width: 520px;
}

/* "Seç" oyunlarının büyük seçim düğmeleri (etkinlik-oyun.js); dinleme oyunlarında iki, görsel sorularda üç */
.secimler {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 420px;
    margin: 12px auto 18px;
}

.secim {
    border: 0;
    border-radius: 22px;
    padding: 16px 6px 12px;
    min-height: 128px;
    font: inherit;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    background: #007a7a;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    box-shadow: 0 6px 0 rgba(0, 0, 0, .18);
    transition: transform 90ms ease, box-shadow 90ms ease;
}

.secim + .secim { background: #6a3df0; }
.secim .ico { font-size: 3rem; line-height: 1; }
.secim:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.secim:disabled { opacity: .45; cursor: default; }
.secim.ok { opacity: 1; outline: 5px solid #1f9d3a; outline-offset: 3px; }
.secim.no { opacity: 1; outline: 5px dashed #c0392b; outline-offset: 3px; }
.secim:focus-visible { outline: 4px solid var(--k-ink); outline-offset: 3px; }

/* Görsel sorular: soru alanı ve üç düğme; düğme yazısı sayı ya da şekil */
.soru {
    font-size: 2.2rem;
    line-height: 1.3;
    letter-spacing: 2px;
    white-space: pre-line;
    overflow-wrap: anywhere;
    min-height: 3rem;
    margin: 8px auto 4px;
    max-width: 460px;
}

.secimler.uc { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 460px; }
.secimler.uc .secim { min-height: 96px; font-size: 2.4rem; justify-content: center; }
.secimler.uc .secim:nth-child(3) { background: #b35200; }
/* Düğmede resim ve ad birlikte (Dengeli Tabak, Hangi Sanat?): uzun ad ("Süt ürünleri") düğmeye sığsın */
.secimler.uc.adli .secim { font-size: 1.05rem; line-height: 1.3; }

/* Yaş seçimi ve tek büyük kart: yetişkinin okuduğu, doğru ya da yanlışı olmayan oyunlar (Hareket Zarı, Eser İnceleme).
   .hap aynı biçimde başka bir seçimdir (Serbest Resim'de kalem kalınlığı). */
.yas-sec { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 14px; }
.yas, .hap {
    border: 2px solid var(--k-ink);
    border-radius: 999px;
    background: #fff;
    color: var(--k-ink);
    font: inherit;
    font-weight: 700;
    min-height: 44px;
    padding: 6px 14px;
    cursor: pointer;
}
.yas[aria-pressed="true"], .hap[aria-pressed="true"] { background: var(--k-ink); color: #fff; }
.yas:focus-visible, .hap:focus-visible { outline: 4px solid var(--k-ink); outline-offset: 2px; }
.buyuk-kart {
    background: #fff;
    border: 2px solid var(--k-ink);
    border-radius: 22px;
    max-width: 420px;
    margin: 0 auto 16px;
    padding: 16px 12px;
    min-height: 150px;
}
.buyuk-kart .ico { display: block; font-size: 3.4rem; line-height: 1.1; }
.buyuk-kart .yazi { display: block; font-weight: 700; font-size: 1.1rem; margin-top: 8px; }
.buyuk-kart .alt { display: block; font-size: .85rem; color: var(--k-soft); margin-top: 4px; text-wrap: balance; }

/* Oyunlar sayfası (oyunlar.html): her oyun, etkinlik sayfasının oyun bölümüne giden büyük bir kart */
.kid-zone .oyun-liste {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}
.kid-zone .oyun-liste li { margin: 0; }
a.buyuk-kart { display: block; box-sizing: border-box; height: 100%; margin: 0; color: var(--k-ink); text-decoration: none; }
a.buyuk-kart:hover { background: #fff1c9; }
a.buyuk-kart:focus-visible { outline: 4px solid var(--k-ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .secim { transition: none; }
    .secim:active { transform: none; }
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 16px 0 24px;
}

.fact {
    background: var(--glass);
    border: var(--glass-border);
    border-radius: 16px;
    padding: 12px 14px;
}

.fact b {
    display: block;
    font-size: .8rem;
    color: var(--muted);
    font-weight: 600;
}

.ours {
    display: inline-block;
    font-size: .75rem;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--muted);
    color: var(--muted);
    vertical-align: middle;
}

/* Gözlem formunun doldurma alanları: çizgi CSS ile çizilir, dar ekranda alt satıra geçer */
.yazi-alanlari {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0 0 18px;
}

.yazi-alanlari span {
    flex: 1 1 9em;
    padding-bottom: 1.6em;
    border-bottom: 1px solid var(--muted);
    font-size: .85rem;
    color: var(--muted);
}

.yazi-alanlari .genis {
    flex-basis: 100%;
    padding-bottom: 3em;
}

@media print {
    .yazi-alanlari span { border-bottom-color: #000 !important; }
}

.obs td:not(:first-child) {
    text-align: center;
    width: 64px;
}

.print-btn {
    border: var(--glass-border);
    background: var(--glass);
    color: var(--text);
    border-radius: 999px;
    padding: 10px 18px;
    font: inherit;
    cursor: pointer;
}

@media print {
    html, body { background: #fff !important; color: #000 !important; }
    /* "arka plan grafikleri" açık basılsa da koyu tema zemini kâğıda geçmesin */
    body * { background: transparent !important; box-shadow: none !important; }
    .site-nav, .breadcrumb, .kid-zone, .print-btn, .related-articles, .correction-callout, .article-footer,
    .privacy-banner, .privacy-settings { display: none !important; }
    .article-container, .article-body { max-width: none !important; padding: 0 !important; }
    .article-body * { color: #000 !important; }
    /* sitenin başlık degradesi (saydam yazı rengi) kâğıtta basılmaz */
    h1, h2, h3, .article-title, .article-meta {
        background: none !important;
        -webkit-text-fill-color: #000 !important;
        color: #000 !important;
    }
    table, th, td { border: 1px solid #000 !important; }
    h2, h3 { break-after: avoid; }
    /* başlık, doldurma alanları ve form aynı sayfada kalır */
    .obs, .gozlem { break-inside: avoid; }
}

/* Etkinlik Bankası: süzgeç (style.css .field) ve kart listesi. display kuralı hidden özniteliğini ezmesin. */
.suzgec { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 4px; }
.suzgec[hidden] { display: none; }
.suzgec .field { flex: 1 1 200px; }
.secici { position: relative; display: block; }
/* .field select tarayıcı okunu kaldırır; açılır liste olduğu ok işaretiyle görünür */
.secici::after { content: '▾'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.suzgec .field select { padding-right: 36px; border: 1px solid var(--muted); }
/* style.css .field select:focus kenarlığını ezmesin */
.suzgec .field select:focus { border-color: var(--accent-pink); }
.sayac { font-weight: 600; margin: 8px 0 12px; }
.bos[hidden] { display: none; }
.article-body .banka-liste { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.banka-kart { position: relative; display: flex; flex-direction: column; background: var(--glass); border: var(--glass-border); border-radius: 16px; padding: 14px 16px; margin: 0; }
.banka-kart[hidden] { display: none; }
.article-body .banka-kart h3 { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.35; }
.article-body .banka-kart p { margin: 0 0 6px; }
.article-body .banka-kart .banka-bilgi { font-size: .85rem; color: var(--muted); }
/* sitenin bağlantı rengi (style.css .resource-box a); altı çizili, karta dokunulacağı belli olsun */
.banka-kart h3 a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.banka-kart h3 a:hover { color: var(--accent-pink); }
/* bütün kart dokunulabilir: iki satıra kırılan başlığın satır arası da bağlantıya gider */
.banka-kart h3 a::after { content: ''; position: absolute; inset: 0; border-radius: 16px; }
.banka-kart h3 a:focus-visible { outline: 3px solid var(--accent-pink); outline-offset: 3px; }

@media print {
    .suzgec, .sayac, .bos { display: none !important; }
    .banka-kart { break-inside: avoid; border: 1px solid #000 !important; }
}

/* Belirli gün ve haftalar takvimi (belirli-gun-ve-haftalar.html): her gün ve hafta bir satır */
.article-body .gun-liste { list-style: none; padding: 0; margin: 0 0 24px; }
.gun-satir { background: var(--glass); border: var(--glass-border); border-radius: 16px; padding: 12px 16px; margin: 0 0 10px; }
.article-body .gun-satir p { margin: 0 0 4px; }
.article-body .gun-satir .gun-tarih { color: var(--muted); }
.gun-satir .gun-oneri a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.gun-satir .gun-oneri a:hover { color: var(--accent-pink); }
.gun-satir .gun-oneri a:focus-visible { outline: 3px solid var(--accent-pink); outline-offset: 2px; }
.article-body .gun-satir .gun-fark { font-size: .9rem; color: var(--muted); border-left: 3px solid var(--accent-pink); padding-left: 8px; margin-top: 6px; }

@media print {
    .gun-satir { break-inside: avoid; border: 1px solid #000 !important; }
}