:root{
      --bg:#f7f7fb; --card:#ffffff; --accent:#1f6feb; --muted:#6b7280; --radius:12px;
    }
    body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; background:var(--bg); color:#0f172a; padding:28px;}
    .wrap{max-width:820px;margin:0 auto}
    h1{font-size:20px;margin:0 0 18px}
    .card{background:var(--card);border-radius:var(--radius);box-shadow:0 6px 20px rgba(16,24,40,0.06);padding:16px}
    .section{border-radius:10px; overflow:hidden;margin-bottom:12px}
    .toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:transparent;border:0;padding:14px 16px;cursor:pointer;font-weight:600;font-size:15px;text-align:left}
    .toggle:focus{outline:3px solid rgba(31,111,235,0.15);outline-offset:2px}
    .meta{color:var(--muted);font-weight:500;font-size:13px}
    .icon{width:22px;height:22px;display:inline-grid;place-items:center;border-radius:6px}
    .icon svg{transform-origin:center;transition:transform .26s ease}
    .content{padding:0 16px 16px;line-height:1.7;background:linear-gradient(180deg,transparent,rgba(0,0,0,0.02));}

    /* collapse animation using max-height */
    .collapsible{max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.2,.9,.2,1),opacity .2s linear,transform .2s ease;opacity:0;transform:translateY(-6px)}
    .collapsible.open{opacity:1;transform:none}
    .toggle[aria-expanded=true] .icon svg{transform:rotate(180deg)}

/* --- Genel Responsive Ayarlar --- */
@media (max-width:520px){
    body{ padding:18px; }
    .card{ padding:12px; }
    .toggle{ font-size:14px; padding:12px; }
}

/* --- Ortak RTL Metin Yapısı (TÜM Osmanlıca metinler için) --- */
.rtl-common {
    direction: rtl;
    text-align: right;
    font-size: 22px;
    line-height: 1.8;
}

/* --- Font 1: OttomanFont --- */
@font-face {
    font-family: 'OttomanFont';
    src: url('../fonts/OttomanFont.ttf') format('truetype');
}
.rtl-ottoman {
    font-family: 'OttomanFont', serif;
}

/* --- Font 2: majallab.ttf --- */
@font-face {
    font-family: 'OsmanlicaFont2';
    src: url('../fonts/majallab.ttf') format('truetype');
}
.rtl-font2 {
    font-family: 'OsmanlicaFont2', serif;
}

/* --- Font 3: tradbdo.ttf --- */
@font-face {
    font-family: 'OsmanlicaFont3';
    src: url('../fonts/tradbdo.ttf') format('truetype');
}
.rtl-font3 {
    font-family: 'OsmanlicaFont3', serif;
}

/* --- Font 4: arabtype.ttf --- */
@font-face {
    font-family: 'OsmanlicaFont4';
    src: url('../fonts/ScheherazadeNew-Medium.ttf') format('truetype');
}
.rtl-font4 {
    font-family: 'OsmanlicaFont4', serif;
}
</style>