@font-face {
    font-family: "Amiri";
    src: url("Amiri-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Amiri";
    src: url("Amiri-Bold.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
}
:root {
    --kagit: #f6f1e7;
    --kart: #fffdf8;
    --murekkep: #1d1914;
    --soluk: #6d6458;
    --cizgi: #e4d8c4;
    --vurgu: #7a3e2a;
    --vurgu-acik: #f3e4d6;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--kagit);
    color: var(--murekkep);
    font: 17px/1.65 "Segoe UI", sans-serif;
}
a { color: var(--vurgu); }
.ust, .alt, .icerik { max-width: 980px; margin: 0 auto; }
.ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    padding: 18px 16px 8px;
}
.marka { font-weight: 700; text-decoration: none; color: var(--murekkep); font-size: 1.15rem; }
.ust nav { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.ust nav a { text-decoration: none; }
.kim { margin-left: auto; color: var(--soluk); font-size: .92rem; }
.icerik { padding: 8px 16px 48px; }
.alt { padding: 8px 16px 32px; color: var(--soluk); font-size: .88rem; }
h1 { font-size: 1.7rem; line-height: 1.25; margin: 8px 0 6px; }
.ozet, .uyari { color: var(--soluk); }
.kart, .giris, .ayet {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: 16px;
    padding: 18px;
    margin: 14px 0;
}
.sure-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
}
.sure-kutu {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: 14px;
    padding: 12px 14px;
}
.sure-kutu:hover { border-color: var(--vurgu); }
.sure-kutu b { display: block; }
.sure-kutu span { color: var(--soluk); font-size: .86rem; }
.arapca {
    font-family: Amiri, "Times New Roman", serif;
    font-size: 1.85rem;
    line-height: 2.15;
    direction: rtl;
    text-align: right;
}
.meal { font-size: 1.08rem; }
.etiket {
    display: inline-block;
    margin: 0 0 6px;
    color: var(--vurgu);
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.satir { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
input, select, textarea, button {
    font: inherit;
    border: 1px solid var(--cizgi);
    border-radius: 10px;
    padding: 8px 10px;
    background: #fff;
    color: inherit;
}
button, .dugme {
    background: var(--vurgu);
    color: #fff;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
}
.ikincil { background: transparent; color: var(--vurgu); border: 1px solid var(--cizgi); }
textarea { width: 100%; min-height: 140px; }
.kelimeler { display: flex; flex-wrap: wrap; gap: 8px; direction: rtl; justify-content: flex-start; }
.kelime {
    direction: ltr;
    background: var(--vurgu-acik);
    border-radius: 10px;
    padding: 6px 8px;
    font-size: .92rem;
}
.ilgili + .ilgili { border-top: 1px solid var(--cizgi); margin-top: 10px; padding-top: 10px; }
.tefsir p { margin: 0 0 .7em; }
.hata { color: #8a1f1f; }
.kucuk { color: var(--soluk); font-size: .9rem; }
.numaralar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.numaralar a { text-decoration: none; border: 1px solid var(--cizgi); border-radius: 8px; padding: 4px 8px; background: var(--kart); color: inherit; }
.numaralar a.secili { background: var(--vurgu); color: #fff; border-color: var(--vurgu); }
table { width: 100%; border-collapse: collapse; }
td, th { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
@media (max-width: 700px) {
    .arapca { font-size: 1.55rem; }
    .kim { margin-left: 0; }
}