/* ============================================================
   Dr. MAC — Topluluk Kuralları sayfası
   Bootstrap 5 üzerine ek stiller. Mobil öncelikli.
   ============================================================ */

:root {
    --k-kenar: #e3e7ee;
    --k-zemin: #f7f9fc;
    --k-mavi: #0d6efd;
    --k-kirmizi: #dc3545;
    --k-yesil: #198754;
    --k-sari: #ffc107;
    --k-metin-soluk: #5b6472;
}

/* ── Üst başlık ─────────────────────────────────────────── */
.kural-ust {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--k-kenar);
    margin-bottom: 1.25rem;
}
.kural-ust select { min-width: 200px; }

/* ── "Ne yapmalıyım?" kutusu ────────────────────────────── */
.kural-sor {
    background: linear-gradient(135deg, #eef4ff 0%, #f7f9fc 100%);
    border: 1px solid #d6e2f7;
    border-radius: 14px;
    padding: 1.25rem;
}
.kural-sor h2 { color: #123a7a; }
.kural-sor-alt { color: var(--k-metin-soluk); font-size: .9rem; margin-bottom: .9rem; }

.kural-sor-form { display: flex; gap: .5rem; }
.kural-sor-form input { flex: 1 1 auto; }

.kural-cip-kutu { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }
.kural-hazir-soru {
    background: #fff;
    border: 1px solid #c9d8f0;
    color: #17458f;
    border-radius: 999px;
    padding: .35rem .8rem;
    font-size: .82rem;
    line-height: 1.3;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.kural-hazir-soru:hover,
.kural-hazir-soru:focus-visible { background: #17458f; border-color: #17458f; color: #fff; }

/* ── Arama sonucu ───────────────────────────────────────── */
.kural-sonuc-kutu { margin-top: 1rem; }
.kural-yukleniyor { color: var(--k-metin-soluk); font-size: .9rem; padding: .75rem 0; }

.sonuc-baslik { margin-bottom: .6rem; }
.sonuc-soru {
    display: inline-block;
    background: #fff;
    border: 1px dashed #b9c9e4;
    border-radius: 8px;
    padding: .3rem .7rem;
    font-size: .85rem;
    color: #33415c;
}

.sonuc-cevap {
    background: #fff;
    border: 1px solid #cfe0f8;
    border-left: 5px solid var(--k-mavi);
    border-radius: 10px;
    overflow: hidden;
}
.sonuc-cevap-bas {
    background: #eaf2ff;
    padding: .65rem .9rem;
    font-weight: 600;
    color: #123a7a;
}
.sonuc-cevap-govde { padding: .9rem; }
.sonuc-cevap-govde p:last-child { margin-bottom: 0; }
.sonuc-cevap-govde ol,
.sonuc-cevap-govde ul { padding-left: 1.2rem; margin-bottom: .6rem; }
.sonuc-cevap-govde li { margin-bottom: .25rem; }
.sonuc-cevap-govde .tehlike { color: var(--k-kirmizi); }
.sonuc-cevap-govde .iyi { color: var(--k-yesil); font-weight: 600; }

/* Yapay zekâ cevabı */
.sonuc-cevap.yapay-zeka { border-left-color: #6f42c1; border-color: #ddd0f5; }
.sonuc-cevap.yapay-zeka .sonuc-cevap-bas {
    background: #f3edfd; color: #4c2889;
    display: flex; align-items: center; gap: .5rem;
}
.sonuc-cevap.yapay-zeka.belirsiz { border-left-color: #b4820b; border-color: #ffe0a3; }
.sonuc-cevap.yapay-zeka.belirsiz .sonuc-cevap-bas { background: #fff8e8; color: #7a5906; }
.ai-rozet {
    margin-left: auto;
    background: #6f42c1; color: #fff;
    font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: .12rem .45rem; border-radius: 999px;
}
.sonuc-cevap.yapay-zeka.belirsiz .ai-rozet { background: #b4820b; }
.ai-uyari {
    margin-top: .5rem;
    background: #fffdf3; border: 1px solid #ffe8a3; border-radius: 8px;
    padding: .55rem .75rem; font-size: .8rem; color: #6b5310;
}

/* Yükleniyor animasyonu */
.kural-nokta {
    display: inline-block; width: .4rem; height: .4rem; border-radius: 50%;
    background: #6f42c1; margin-right: .18rem;
    animation: kuralZipla 1s infinite ease-in-out;
}
.kural-nokta:nth-child(2) { animation-delay: .15s; }
.kural-nokta:nth-child(3) { animation-delay: .3s; }
@keyframes kuralZipla {
    0%, 60%, 100% { transform: translateY(0); opacity: .45; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

.sonuc-maddeler {
    margin-top: .85rem;
    background: #fff;
    border: 1px solid var(--k-kenar);
    border-radius: 10px;
    overflow: hidden;
}
.sonuc-maddeler-bas {
    background: var(--k-zemin);
    padding: .5rem .9rem;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--k-metin-soluk);
    font-weight: 600;
}
.sonuc-madde {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .65rem .9rem;
    border-top: 1px solid #eef1f6;
    text-decoration: none;
    color: inherit;
}
.sonuc-madde:hover { background: #f4f8ff; }
.sonuc-madde-no {
    flex: 0 0 auto;
    background: #123a7a;
    color: #fff;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 700;
    padding: .15rem .45rem;
    min-width: 2.6rem;
    text-align: center;
}
.sonuc-madde-metin { flex: 1 1 auto; font-size: .88rem; }
.sonuc-madde-metin strong { display: block; }
.sonuc-madde-metin span { color: var(--k-metin-soluk); }

.sonuc-bos {
    background: #fffdf3;
    border: 1px solid #ffe8a3;
    border-radius: 10px;
    padding: .9rem;
}
.sonuc-not { font-size: .78rem; color: var(--k-metin-soluk); margin: .6rem 0 0; }

/* ── Altın kurallar ─────────────────────────────────────── */
.altin-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: .75rem;
}
.altin-kart {
    background: #fff;
    border: 1px solid var(--k-kenar);
    border-top: 3px solid var(--k-mavi);
    border-radius: 10px;
    padding: .85rem;
}
.altin-kart i { font-size: 1.35rem; color: var(--k-mavi); }
.altin-kart h3 { font-size: .95rem; font-weight: 700; margin: .35rem 0 .25rem; }
.altin-kart p { font-size: .82rem; color: var(--k-metin-soluk); margin: 0; line-height: 1.45; }

/* ── Haftalık akış ──────────────────────────────────────── */
.hafta-seridi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .5rem;
}
.gun-kutu {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid var(--k-kenar);
    border-radius: 10px;
    padding: .7rem .65rem;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.gun-kutu:hover { border-color: var(--k-mavi); box-shadow: 0 2px 8px rgba(13,110,253,.12); }
.gun-kutu.bugun { border-color: var(--k-yesil); background: #f2fbf6; }
.gun-kutu.secili { border-color: var(--k-mavi); background: #eef4ff; }
.gun-no { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--k-metin-soluk); }
.gun-ad { display: none; }
.gun-tam { display: block; font-size: 1rem; font-weight: 700; margin-bottom: .2rem; }
.gun-bugun {
    position: absolute; top: .5rem; right: .5rem;
    background: var(--k-yesil); color: #fff;
    font-size: .6rem; font-weight: 700; letter-spacing: .05em;
    padding: .1rem .35rem; border-radius: 4px;
}
.gun-ozet { display: block; font-size: .75rem; color: var(--k-metin-soluk); line-height: 1.35; }
.gun-sayi { display: block; font-size: .7rem; color: var(--k-mavi); margin-top: .35rem; font-weight: 600; }

.saat-seridi { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.saat-oge {
    background: #fff; border: 1px solid var(--k-kenar); border-radius: 8px;
    padding: .45rem .7rem; font-size: .8rem; color: var(--k-metin-soluk);
}
.saat-oge .saat {
    display: inline-block; font-weight: 700; color: #123a7a;
    background: #eaf2ff; border-radius: 5px; padding: .05rem .4rem; margin-right: .35rem;
}
.saat-oge.son .saat { color: #8a1c25; background: #fdeaec; }

/* ── Akış şeması ────────────────────────────────────────── */
.akis-semasi {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .5rem;
    margin-bottom: .6rem;
}
.akis-adim {
    flex: 1 1 200px;
    background: #fff;
    border: 1px solid var(--k-kenar);
    border-radius: 10px;
    padding: .8rem;
    position: relative;
}
.akis-adim h3 { font-size: .92rem; font-weight: 700; margin: .4rem 0 .25rem; }
.akis-adim p { font-size: .8rem; color: var(--k-metin-soluk); margin: 0; line-height: 1.45; }
.akis-rozet {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.7rem; height: 1.7rem; border-radius: 50%;
    background: #123a7a; color: #fff; font-weight: 700; font-size: .85rem;
}
.akis-adim.iyi { border-color: #a9dfc2; background: #f4fcf7; }
.akis-adim.iyi .akis-rozet { background: var(--k-yesil); }
.akis-adim.uyari { border-color: #ffd98a; background: #fffcf2; }
.akis-adim.uyari .akis-rozet { background: #b4820b; }
.akis-adim.tehlike { border-color: #f3b6bc; background: #fef5f6; }
.akis-adim.tehlike .akis-rozet { background: var(--k-kirmizi); }
.akis-ok {
    align-self: center; color: #adb8c7; font-size: 1.3rem; font-weight: 700;
    flex: 0 0 auto;
}

/* ── Hak ızgarası ───────────────────────────────────────── */
.hak-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: .5rem;
}
.hak-kart {
    background: #fff; border: 1px solid var(--k-kenar); border-radius: 10px;
    padding: .7rem; text-align: center;
}
.hak-sayi { display: block; font-size: 1.7rem; font-weight: 800; color: #123a7a; line-height: 1.1; }
.hak-ad { display: block; font-size: .82rem; font-weight: 600; margin-top: .15rem; }
.hak-not { display: block; font-size: .72rem; color: var(--k-metin-soluk); }
.hak-kart.muaf .hak-sayi { color: var(--k-yesil); font-size: 1.4rem; }

/* ── Filtre çubuğu ──────────────────────────────────────── */
.kural-filtre {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .6rem;
    align-items: end;
    background: var(--k-zemin);
    border: 1px solid var(--k-kenar);
    border-radius: 10px;
    padding: .8rem;
    margin-bottom: 1rem;
}
.kural-filtre-dugme { display: flex; gap: .4rem; }

/* ── Madde listesi ──────────────────────────────────────── */
.kural-bolum-basligi {
    font-size: 1rem;
    font-weight: 700;
    color: #123a7a;
    margin: 1.5rem 0 .6rem;
    padding-bottom: .35rem;
    border-bottom: 2px solid #dbe5f3;
}
.kural-bolum { display: flex; flex-direction: column; gap: .4rem; }

.kural-madde {
    background: #fff;
    border: 1px solid var(--k-kenar);
    border-radius: 10px;
    overflow: hidden;
    scroll-margin-top: 90px;
    /* Ekranda gorunmeyen madde kartlari icin tarayici yerlesim/boyama
       yapmasin: 80 kartli sayfada ilk cizim belirgin sekilde hizlanir. */
    content-visibility: auto;
    contain-intrinsic-size: auto 88px;
}
.kural-madde.kritik { border-left: 4px solid var(--k-kirmizi); }
.kural-madde.vurgu { box-shadow: 0 0 0 3px rgba(13,110,253,.35); }

.kural-madde-bas {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .7rem .85rem;
    cursor: pointer;
}
.kural-madde-bas:hover { background: #f7faff; }
.kural-madde-bas:focus-visible { outline: 2px solid var(--k-mavi); outline-offset: -2px; }
.kural-no {
    flex: 0 0 auto;
    background: #eef2f8;
    color: #123a7a;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 700;
    padding: .2rem .45rem;
    min-width: 2.7rem;
    text-align: center;
}
.kural-baslik-metin { flex: 1 1 auto; font-size: .93rem; }
.kural-ozet { display: block; font-size: .84rem; color: var(--k-metin-soluk); margin-top: .15rem; line-height: 1.45; }
.kural-ok { color: #9aa6b6; transition: transform .2s; flex: 0 0 auto; margin-top: .2rem; }
.kural-madde-bas[aria-expanded="true"] .kural-ok { transform: rotate(180deg); }

.kural-madde-govde {
    padding: .3rem .85rem 1rem;
    border-top: 1px solid #eef1f6;
    font-size: .9rem;
    line-height: 1.65;
}
.kural-madde-govde ol,
.kural-madde-govde ul { padding-left: 1.25rem; }
.kural-madde-govde li { margin-bottom: .35rem; }
.kural-madde-govde .uyari-kutu {
    background: #fef5f6;
    border-left: 4px solid var(--k-kirmizi);
    border-radius: 6px;
    padding: .6rem .8rem;
    margin: .7rem 0;
    font-size: .87rem;
}
.kural-madde-govde .muafiyet {
    display: block;
    background: #f4fcf7;
    border-left: 4px solid var(--k-yesil);
    border-radius: 6px;
    padding: .6rem .8rem;
    margin: .7rem 0;
    font-size: .87rem;
}
.kural-dipnot {
    background: var(--k-zemin);
    border: 1px dashed #cdd6e3;
    border-radius: 8px;
    padding: .55rem .75rem;
    font-size: .82rem;
    color: var(--k-metin-soluk);
    margin-top: .75rem;
}
.kural-etiket-satiri { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .7rem; }
.kural-cip {
    background: #eef2f8; color: #46536b; border-radius: 999px;
    font-size: .72rem; padding: .12rem .55rem;
}
.kural-cip.gun { background: #eaf6ee; color: #1c6b42; }

/* ── Küçük ekran ────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .kural-ust { align-items: flex-start; }
    .kural-ust select { min-width: 100%; }
    .gun-tam { font-size: .92rem; }
    .akis-ok { display: none; }
    .kural-sor { padding: 1rem .85rem; }
}

/* ── Yazdırma ───────────────────────────────────────────── */
@media print {
    .kural-sor, .kural-filtre, .hafta-seridi, .saat-seridi,
    nav, footer, .kural-ok { display: none !important; }
    .kural-madde .collapse { display: block !important; height: auto !important; }
    .kural-madde { break-inside: avoid; border: 1px solid #999; }
}

/* ── Erişilebilirlik: hareket azaltma ───────────────────── */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}