/* ==========================================================================
   Arapça yolculuk sihirbazı (açılır pencere) — "akjw-"
   Telefon: alttan açılan sayfa (bottom sheet). Tablet/masaüstü: ortalanmış pencere.
   _ArabicJourneyWizard.cshtml içinden yüklenir; eski journey-wizard.css'in üzerine yazar.
   JS'in kullandığı sınıflar (journey-wizard__panel, __dialog, is-active) korunur.
   ========================================================================== */

.akjw.journey-wizard {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}
.akjw.journey-wizard[hidden] { display: none !important; }

.akjw .journey-wizard__overlay {
    position: absolute;
    inset: 0;
    background: rgba(31, 10, 24, .58);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.akjw .journey-wizard__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    max-height: 92vh;
    max-height: 92dvh;
    padding: 0;
    overflow: hidden;
    background: #fff;
    color: var(--ak-ink);
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -24px 60px -20px rgba(31, 10, 24, .45);
    font-family: var(--ak-font);
    animation: none;
}
.akjw .journey-wizard__dialog--step2 { max-width: none; }

/* Paneller: pencere sabit kalır, içerik kendi içinde kayar */
.akjw .journey-wizard__panel { display: none; }
.akjw .journey-wizard__panel.is-active {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Tutamak (yalnız telefon) */
.akjw-grip {
    position: absolute;
    top: 8px;
    left: 50%;
    z-index: 5;
    width: 40px;
    height: 4px;
    border-radius: 4px;
    background: rgba(28, 20, 32, .18);
    transform: translateX(-50%);
    pointer-events: none;
}

/* Geri / kapat */
.akjw .journey-wizard__close,
.akjw .journey-wizard__back {
    position: absolute;
    top: 16px;
    left: auto;
    right: auto;
    z-index: 6;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ak-surface-2);
    color: var(--ak-ink-2);
    font-size: 1rem;
    cursor: pointer;
}
.akjw .journey-wizard__close { inset-inline-end: 14px; }
.akjw .journey-wizard__back { inset-inline-start: 14px; }
.akjw .journey-wizard__close[hidden],
.akjw .journey-wizard__back[hidden] { display: none !important; }
.akjw .journey-wizard__close:hover,
.akjw .journey-wizard__back:hover { background: var(--ak-plum-50); color: var(--ak-plum-700); }
.akjw .journey-wizard__close:focus-visible,
.akjw .journey-wizard__back:focus-visible { outline: none; box-shadow: var(--ak-ring); }
html[dir="rtl"] .akjw .journey-wizard__back i { transform: scaleX(-1); }

/* Giriş ekranında koyu görselin üstünde açık renk düğme ve tutamak */
.akjw .journey-wizard__dialog:has(.akjw-intro.is-active) .journey-wizard__close {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.akjw .journey-wizard__dialog:has(.akjw-intro.is-active) .journey-wizard__close:hover { background: rgba(255, 255, 255, .24); }
.akjw .journey-wizard__dialog:has(.akjw-intro.is-active) .akjw-grip { background: rgba(255, 255, 255, .4); }

/* İlerleme çubuğu (adım 1 → adım 2 → sonuç) */
.akjw-progress {
    position: absolute;
    top: 36px;
    left: 50%;
    z-index: 5;
    display: flex;
    gap: 6px;
    transform: translateX(-50%);
    pointer-events: none;
}
.akjw-progress span { width: 26px; height: 4px; border-radius: 4px; background: var(--ak-line); }
.akjw .journey-wizard__dialog:has(.akjw-intro.is-active) .akjw-progress { display: none; }
.akjw .journey-wizard__dialog:has([data-step="step1"].is-active) .akjw-progress span:nth-child(1),
.akjw .journey-wizard__dialog:has([data-step="step2"].is-active) .akjw-progress span:nth-child(-n+2),
.akjw .journey-wizard__dialog:has([data-step="result"].is-active) .akjw-progress span { background: var(--ak-plum-600); }
.akjw .journey-wizard__dialog:has([data-step="result"].is-active) .akjw-progress span:nth-child(3) { background: var(--ak-sun); }

/* Ortak tipografi */
.akjw .journey-wizard__title {
    margin: 0 0 6px;
    color: var(--ak-ink);
    font-family: var(--ak-font);
    font-size: clamp(1.3125rem, 1.15rem + .7vw, 1.625rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.025em;
}
html[dir="rtl"] .akjw .journey-wizard__title { margin: 0 0 6px; letter-spacing: 0; line-height: 1.45; }
.akjw .journey-wizard__title:empty { display: none; }
.akjw .journey-wizard__subtitle {
    margin: 0;
    color: var(--ak-muted);
    font-size: 1rem;
    line-height: 1.55;
}
.akjw .journey-wizard__btn-primary {
    width: 100%;
    min-height: 56px;
    padding: 14px 28px;
    border-radius: var(--ak-radius-pill);
    font-size: 1.0625rem;
    white-space: normal;
}

/* --------------------------------------------------------------------------
   Giriş: kemer pencere + selamlaşma
   -------------------------------------------------------------------------- */
.akjw-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    height: 196px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background:
        radial-gradient(420px 220px at 80% 0%, rgba(154, 68, 121, .7), transparent 65%),
        radial-gradient(300px 200px at 10% 100%, rgba(238, 215, 21, .12), transparent 60%),
        linear-gradient(180deg, #5a1f4b 0%, #3d1533 100%);
}
.akjw-hero__pattern {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--ak-mashrabiya);
    background-size: 40px 40px;
    opacity: .8;
    -webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, #000, transparent 80%);
    mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, #000, transparent 80%);
}
.akjw-hero__glow {
    position: absolute;
    z-index: -1;
    bottom: -60px;
    left: 50%;
    width: 220px;
    height: 160px;
    border-radius: 50%;
    background: rgba(238, 215, 21, .28);
    filter: blur(50px);
    transform: translateX(-50%);
}
.akjw-hero__arch {
    position: relative;
    width: 152px;
    height: 150px;
    display: grid;
    place-items: center;
    padding-top: 10px;
    border: 1px solid rgba(238, 215, 21, .34);
    border-bottom: 0;
    border-radius: 76px 76px 0 0 / 84px 84px 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02));
}
.akjw-hero__arch::after {
    content: "";
    position: absolute;
    inset: 8px 8px 0;
    border: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 0;
    border-radius: 68px 68px 0 0 / 76px 76px 0 0;
}
.akjw-hero__calli {
    font-family: var(--ak-font-kufi);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ak-sun);
    text-shadow: 0 10px 32px rgba(238, 215, 21, .32);
    direction: rtl;
}
.akjw-hero__bubble {
    position: absolute;
    z-index: 2;
    padding: 6px 12px 7px;
    border-radius: 14px 14px 14px 4px;
    background: #fff;
    color: var(--ak-ink);
    box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .7);
    font-family: var(--ak-font-ar);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.4;
}
.akjw-hero__bubble span { direction: rtl; unicode-bidi: isolate; }
.akjw-hero__bubble--a { top: 46px; inset-inline-start: 7%; }
.akjw-hero__bubble--b { top: 104px; inset-inline-end: 7%; background: var(--ak-sun); color: var(--ak-plum-950); border-radius: 14px 14px 4px 14px; }

.akjw-body { padding: 24px 20px 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.akjw-body .journey-wizard__subtitle { margin-bottom: 22px; }

/* --------------------------------------------------------------------------
   Adımlar
   -------------------------------------------------------------------------- */
.akjw .akjw-step {
    padding: 76px 16px 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.akjw-step__head { margin-bottom: 18px; padding-inline: 4px; }
.akjw .journey-wizard__step-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 4px 12px;
    border-radius: var(--ak-radius-pill);
    background: var(--ak-sun-50);
    border: 1px solid var(--ak-sun-100);
    color: var(--ak-plum-800);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.akjw .akjw-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

.akjw .journey-wizard__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 64px;
    margin: 0;
    padding: 10px 14px;
    padding-inline-end: 40px;
    border: 1.5px solid var(--ak-line);
    border-radius: 18px;
    background: #fff;
    color: var(--ak-ink);
    font-family: var(--ak-font);
    text-align: start;
    cursor: pointer;
    box-shadow: none;
}
.akjw .journey-wizard__card::after {
    content: "\f054";
    position: absolute;
    top: 50%;
    inset-inline-end: 16px;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .6875rem;
    color: var(--ak-plum-300);
}
html[dir="rtl"] .akjw .journey-wizard__card::after { content: "\f053"; }
.akjw .journey-wizard__card:hover {
    border-color: var(--ak-plum-300);
    background: var(--ak-plum-25);
    box-shadow: 0 12px 26px -18px rgba(138, 53, 106, .55);
}
.akjw .journey-wizard__card:hover::after { color: var(--ak-plum-600); }
.akjw .journey-wizard__card:focus-visible { outline: none; border-color: var(--ak-plum-500); box-shadow: var(--ak-ring); }

.akjw .akjw-card__icon {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--ak-plum-50);
    color: var(--ak-plum-600);
    font-size: 1.0625rem;
    line-height: 1;
}
.akjw .journey-wizard__card:hover .akjw-card__icon { background: var(--ak-plum-600); color: #fff; }
.akjw .journey-wizard__card-text {
    display: block;
    color: var(--ak-ink);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.4;
}

.akjw .akjw-card--unsure {
    border-style: dashed;
    border-color: var(--ak-plum-200);
    background: var(--ak-plum-25);
}
.akjw .akjw-card--unsure .akjw-card__icon { background: var(--ak-sun); color: var(--ak-plum-950); }
.akjw .akjw-card--unsure .journey-wizard__card-text { font-weight: 600; color: var(--ak-plum-800); }

/* Seviye kartları: Arapça rakamlı kemer rozet */
.akjw .akjw-num {
    width: 40px;
    height: 46px;
    flex: none;
    margin: 0;
    padding-top: 6px;
    display: grid;
    place-items: center;
    border-radius: 20px 20px 10px 10px / 22px 22px 10px 10px;
    background: var(--ak-plum-900);
    color: var(--ak-sun);
    font-family: var(--ak-font-naskh);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
}
.akjw .journey-wizard__card:hover .akjw-num { background: var(--ak-plum-700); }
.akjw-card__body { display: grid; justify-items: start; min-width: 0; }
.akjw .journey-wizard__level-badge {
    display: inline-flex;
    margin-top: 6px;
    padding: 2px 10px;
    border-radius: var(--ak-radius-pill);
    background: var(--ak-sun-50);
    border: 1px solid var(--ak-sun-100);
    color: var(--ak-plum-800);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Sonuç
   -------------------------------------------------------------------------- */
.akjw .akjw-result {
    padding: 72px 20px 24px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    text-align: center;
}
.akjw-result__seal { display: grid; justify-items: center; gap: 8px; margin-bottom: 16px; }
.akjw-result__star {
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    background: var(--ak-sun);
    color: var(--ak-plum-950);
    font-size: 1.625rem;
    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%);
    filter: drop-shadow(0 14px 18px rgba(212, 189, 0, .35));
}
.akjw-result__ar {
    font-family: var(--ak-font-kufi);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: #b48a62;
}
.akjw .journey-wizard__message {
    max-width: 42ch;
    margin: 0 auto 24px;
    color: var(--ak-ink);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.6;
}
.akjw .journey-wizard__actions { display: grid; gap: 10px; }
.akjw .akjw-cta::after {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .875em;
}
html[dir="rtl"] .akjw .akjw-cta::after { content: "\f060"; }
.akjw .journey-wizard__link-secondary {
    min-height: 52px;
    font-size: 1rem;
    text-decoration: none;
    white-space: normal;
}
.akjw .journey-wizard__link-secondary[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Tablet / masaüstü: ortalanmış pencere
   -------------------------------------------------------------------------- */
@media (min-width: 560px) {
    .akjw .akjw-grid:not(.akjw-grid--levels) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .akjw .akjw-card--unsure { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
    .akjw.journey-wizard { align-items: center; padding: 24px; }
    .akjw .journey-wizard__dialog,
    .akjw .journey-wizard__dialog--step2 {
        max-width: 620px;
        max-height: min(88vh, 780px);
        border-radius: 28px;
        box-shadow: 0 50px 100px -40px rgba(31, 10, 24, .6), 0 2px 8px rgba(31, 10, 24, .08);
    }
    .akjw-grip { display: none; }
    .akjw .journey-wizard__close,
    .akjw .journey-wizard__back { top: 18px; }
    .akjw .journey-wizard__close { inset-inline-end: 18px; }
    .akjw .journey-wizard__back { inset-inline-start: 18px; }
    .akjw-progress { top: 38px; }
    .akjw-hero { height: 220px; }
    .akjw-hero__bubble--a { inset-inline-start: 16%; }
    .akjw-hero__bubble--b { inset-inline-end: 16%; }
    .akjw-body { padding: 30px 36px 34px; }
    .akjw .akjw-step { padding: 84px 28px 28px; }
    .akjw .akjw-result { padding: 84px 40px 36px; }
}

/* --------------------------------------------------------------------------
   Hareket (no-animations.css'i yalnız hareket tercihi olanlarda aşar)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .akjw:not([hidden]) .journey-wizard__overlay { animation: akjw-fade .3s ease both !important; }
    .akjw:not([hidden]) .journey-wizard__dialog { animation: akjw-sheet .45s var(--ak-ease) both !important; }
    .akjw .journey-wizard__panel.is-active { animation: akjw-panel .35s var(--ak-ease) both !important; }
    .akjw .journey-wizard__card,
    .akjw .akjw-card__icon,
    .akjw .akjw-num,
    .akjw .journey-wizard__close,
    .akjw .journey-wizard__back {
        transition: border-color .18s var(--ak-ease), background-color .18s var(--ak-ease),
            box-shadow .22s var(--ak-ease), color .18s var(--ak-ease), transform .18s var(--ak-ease) !important;
    }
    .akjw .journey-wizard__card:active { transform: scale(.985); }
    .akjw-hero__bubble--a { animation: akjw-bob 6s ease-in-out infinite !important; }
    .akjw-hero__bubble--b { animation: akjw-bob 6s ease-in-out infinite !important; animation-delay: -3s !important; }
    .akjw .akjw-result.is-active .akjw-result__star { animation: akjw-pop .6s var(--ak-ease) both !important; animation-delay: .1s !important; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    .akjw:not([hidden]) .journey-wizard__dialog { animation-name: akjw-rise !important; }
}
@keyframes akjw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes akjw-sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes akjw-rise { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes akjw-panel { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes akjw-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes akjw-pop { from { opacity: 0; transform: scale(.6) rotate(-20deg); } to { opacity: 1; transform: none; } }