/* ==========================================================================
   Arapçanın Lehçeleri (ArabicSpeaking/ArabicDialects). Önek: .akd-
   Kartlar bölge haritası gibi dizilir: Mısır batıda, Şam kuzeyde, Irak doğuda,
   Körfez güneydoğuda; ortada Fasih (ortak kök).
   ========================================================================== */

.akd-head { align-items: flex-end; }

.akd-map {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr) minmax(0, 1fr);
    grid-template-areas:
        "levant root iraq"
        "egypt  root gulf";
    gap: clamp(16px, 2vw, 24px);
}
/* Harita noktası dokusu */
.akd-map::before {
    content: "";
    position: absolute;
    inset: -40px -24px;
    z-index: -1;
    background-image: radial-gradient(circle, rgba(138, 53, 106, .2) 1.2px, transparent 1.6px);
    background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 20%, transparent 75%);
    pointer-events: none;
}

/* ------------------------------ Merkez: Fasih ------------------------------ */
.akd-root {
    grid-area: root;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 18px 18px;
    border-radius: 50% 50% 26px 26px / 150px 150px 26px 26px;
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(238, 215, 21, .16), transparent 60%),
        linear-gradient(180deg, #4a1a3b 0%, #3d1533 100%);
    color: #fff;
    box-shadow: var(--ak-shadow-lg);
}
.akd-root::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--ak-mashrabiya);
    background-size: 40px 40px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
    mask-image: linear-gradient(180deg, #000, transparent 80%);
}
.akd-root::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: inherit;
    border: 1px solid rgba(238, 215, 21, .22);
    pointer-events: none;
}
/* Pusula: sekiz köşeli yıldız */
.akd-root__compass {
    position: absolute;
    z-index: -1;
    top: 34%;
    left: 50%;
    width: 240px;
    height: 240px;
    margin: -120px 0 0 -120px;
    clip-path: polygon(50% 0%, 63% 18%, 85% 15%, 82% 37%, 100% 50%, 82% 63%, 85% 85%, 63% 82%, 50% 100%, 37% 82%, 15% 85%, 18% 63%, 0% 50%, 18% 37%, 15% 15%, 37% 18%);
    background: radial-gradient(circle, rgba(238, 215, 21, .16), rgba(238, 215, 21, .04) 65%);
}
.akd-root__label { font-size: 1.5rem; color: var(--ak-sun); line-height: 1.3; }
.akd-root__phrase {
    font-family: var(--ak-font-naskh);
    font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}
.akd-root__meaning { font-size: .875rem; font-style: italic; color: rgba(255, 255, 255, .7); }
.akd-root__tagline { margin-top: 8px; font-family: var(--ak-font-naskh); font-size: 1.0625rem; color: var(--ak-sand); }
.akd-root__core { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding-top: 24px; }

/* Pusula listesi: kartlara atlar */
.akd-root__list {
    list-style: none;
    width: 100%;
    margin: 22px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: grid;
    gap: 6px;
}
.akd-root__link {
    --tone: var(--ak-plum-400);
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 6px 14px 6px 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
    text-decoration: none;
}
html[dir="rtl"] .akd-root__link { padding: 6px 6px 6px 14px; }
.akd-root__link:hover { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(238, 215, 21, .35); }
html[dir="rtl"] .akd-root__say { margin-left: 0; margin-right: auto; }
.akd-root__link--egypt { --tone: var(--ak-terracotta); }
.akd-root__link--levant { --tone: #6b7f4c; }
.akd-root__link--iraq { --tone: #4b519c; }
.akd-root__link--gulf { --tone: #a07a52; }
.akd-root__num {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--tone);
    font-family: var(--ak-font-kufi);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}
.akd-root__word { font-size: 1.125rem; color: rgba(255, 255, 255, .9); }
.akd-root__say { margin-left: auto; font-family: var(--ak-font-naskh); font-size: 1.25rem; font-weight: 700; color: var(--ak-sun); }
@media (prefers-reduced-motion: no-preference) {
    .akd-root__compass { animation: akd-spin 60s linear infinite !important; }
}
@keyframes akd-spin { to { transform: rotate(360deg); } }

/* ------------------------------ Lehçe kartları ------------------------------ */
.akd-card {
    --tone: var(--ak-plum-600);
    --tone-ink: #fff;
    --tone-soft: var(--ak-plum-25);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 26px;
    background: var(--ak-surface);
    border: 1px solid var(--ak-line);
}
.akd-card--egypt { grid-area: egypt; --tone: var(--ak-terracotta); --tone-soft: #fbf1ec; }
.akd-card--levant { grid-area: levant; --tone: var(--ak-olive); --tone-soft: #f1f4ec; }
.akd-card--iraq { grid-area: iraq; --tone: var(--ak-navy); --tone-soft: #eff0f8; }
.akd-card--gulf { grid-area: gulf; --tone: #a07a52; --tone-soft: var(--ak-sand-50); }
.akd-card:target { box-shadow: 0 0 0 3px var(--tone), var(--ak-shadow-lg); }

.akd-card__head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 112px;
    padding: 18px 20px;
    background: var(--tone);
    color: var(--tone-ink);
}

.akd-card__pattern {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--ak-mashrabiya);
    background-size: 36px 36px;
    opacity: .9;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 75%);
    mask-image: linear-gradient(90deg, #000, transparent 75%);
}
html[dir="rtl"] .akd-card__pattern {
    -webkit-mask-image: linear-gradient(270deg, #000, transparent 75%);
    mask-image: linear-gradient(270deg, #000, transparent 75%);
}
.akd-card__num {
    flex: none;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    font-family: var(--ak-font-kufi);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1;
}
/* .ak-kufi kendi yönü rtl olduğu için mantıksal konum ters çözülür: fiziksel konum */
.akd-card__word {
    position: absolute;
    right: 18px;
    bottom: -.08em;
    font-size: clamp(3.5rem, 2.8rem + 2vw, 4.75rem);
    line-height: 1.1;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
html[dir="rtl"] .akd-card__word { right: auto; left: 18px; }

.akd-card__body { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 22px; }
.akd-card__badge {
    width: fit-content;
    padding: 4px 10px;
    border-radius: var(--ak-radius-pill);
    background: var(--tone-soft);
    color: var(--tone);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.akd-card__title { margin: 0; font-size: 1.3125rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.akd-card__native {
    display: block;
    width: fit-content;
    margin-top: 2px;
    font-family: var(--ak-font-naskh);
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--ak-muted);
    letter-spacing: 0;
}

/* Örnek cümle: konuşma balonu */
.akd-phrase {
    display: grid;
    gap: 2px;
    width: fit-content;
    max-width: 100%;
    padding: 10px 16px 9px;
    border-radius: 18px 18px 18px 6px;
    background: var(--tone-soft);
    border: 1px solid color-mix(in srgb, var(--tone) 18%, transparent);
}
html[dir="rtl"] .akd-phrase { border-radius: 18px 18px 6px 18px; }
.akd-phrase__ar { font-family: var(--ak-font-naskh); font-size: 1.75rem; font-weight: 700; line-height: 1.35; color: var(--ak-ink); text-align: start; }
.akd-phrase__tr { font-size: .8125rem; font-style: italic; color: var(--ak-muted); }

.akd-facts { display: grid; gap: 12px; margin: 0; }
.akd-fact dt {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
    color: var(--tone);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.akd-fact dd { margin: 0; color: var(--ak-ink-2); font-size: .9375rem; line-height: 1.6; }
.akd-card__highlight {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: auto 0 0;
    padding: 8px 14px;
    border-radius: var(--ak-radius-pill);
    background: var(--tone);
    color: #fff !important;
    font-size: .875rem;
    font-weight: 700;
}

/* ------------------------------ RESPONSIVE ------------------------------ */
@media (max-width: 991.98px) {
    .akd-map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "root   root"
            "egypt  levant"
            "iraq   gulf";
    }
    .akd-root { border-radius: 50% 50% 26px 26px / 110px 110px 26px 26px; padding: 36px 24px 22px; }
    .akd-root__compass { top: 38%; }
    .akd-root__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .akd-head > .ak-btn { width: 100%; }
    .akd-map {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "root" "egypt" "levant" "iraq" "gulf";
        gap: 14px;
    }
    .akd-root { padding: 30px 14px 14px; border-radius: 50% 50% 22px 22px / 90px 90px 22px 22px; }
    .akd-root__list { grid-template-columns: minmax(0, 1fr); }
    .akd-card { border-radius: 22px; }
    .akd-card__head { min-height: 96px; padding: 16px 18px; }
    .akd-card__body { padding: 18px; }
    .akd-card__word { font-size: 3.5rem; }
}