/* Entegrasyon gösterimleri — beş sayfanın ORTAK ailesi.

   Yirmi gösterim, DÖRT yerleşim ilkesi (ayar / adim / liste / etiket / ikili).
   Her ilke bir kez yazılır, gösterimler onu paylaşır; böylece beş sayfa
   birbirinin devamı gibi durur.

   ANİMASYON KURALI (bkz. aihero.css, odemedemo.css): döngüyü paylaşan her
   öğenin KENDİ keyframe'i vardır. Ortak döngü 8 sn. */

.ent {
    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
    padding: 4% 6%;
}

.ent__card {
    position: relative;
    padding: var(--sp-5);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: 0 18px 44px rgba(2, 6, 23, 0.18);
}

.ent__baslik {
    margin-bottom: 10px;
    font-size: 9px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    /* Beyaz üstünde ink-500 → 4,8:1 */
    color: var(--ink-500);
}

.ent__not {
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
    font-size: 10.5px;
    line-height: 1.45;
    /* Beyaz üstünde ink-600 → 7,6:1 */
    color: var(--ink-600);
}

.ent__tik {
    position: relative;
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    border-radius: 50%;
    /* brand-700 beyaz tik ile 5,36:1 */
    background: var(--brand-700);
}

.ent__tik::after {
    content: "";
    position: absolute;
    top: 3.5px;
    left: 4.5px;
    width: 4px;
    height: 6.5px;
    border: solid #fff;
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
}

/* ==========================================================================
   YERLEŞİM 1 — AYAR ızgarası
   ========================================================================== */

.ent__ayarlar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 7px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ent__ay {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
    opacity: 0;
}

.ent__ay-ad {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    font-weight: var(--fw-semibold);
    /* surface-soft üstünde ink-600 → 6,9:1 */
    color: var(--ink-600);
}

.ent__ay-deger {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11.5px;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    /* surface-soft üstünde brand-800 → 6,7:1 */
    color: var(--brand-800);
}

/* ==========================================================================
   YERLEŞİM 2 — numaralı ADIM
   ========================================================================== */

.ent__adimlar { list-style: none; margin: 0; padding: 0; }

.ent__ad {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    font-size: 11px;
    font-weight: var(--fw-semibold);
    line-height: 1.45;
    color: var(--ink-700, #334155);
    opacity: 0;
}

.ent__no {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
    font-size: 9.5px;
    font-weight: var(--fw-bold);
    color: var(--brand-800);
}

/* ==========================================================================
   YERLEŞİM 3 — onaylı LİSTE
   ========================================================================== */

.ent__liste { list-style: none; margin: 0; padding: 0; }

.ent__ls {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 6px 0;
    font-size: 11px;
    font-weight: var(--fw-semibold);
    line-height: 1.45;
    color: var(--ink-700, #334155);
    opacity: 0;
}

/* ==========================================================================
   YERLEŞİM 4 — ETİKET bulutu
   ========================================================================== */

.ent__etiketler { display: flex; flex-wrap: wrap; gap: 6px; }

.ent__et {
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
    font-family: "Courier New", monospace;
    font-size: 10.5px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.01em;
    /* surface-soft üstünde ink-700 → 9,7:1 */
    color: var(--ink-700, #334155);
    opacity: 0;
}

/* ==========================================================================
   YERLEŞİM 5 — İKİLİ kutu
   ========================================================================== */

.ent__ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }

.ent__ik {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: var(--sp-4);
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
    opacity: 0;
}

/* İlk kutu vurgulu: "önce buna bak" */
.ent__ik--1 { background: var(--brand-800); box-shadow: none; }

.ent__ik-ad {
    font-size: 11.5px;
    font-weight: var(--fw-bold);
    color: var(--ink-900);
}

/* brand-800 üstünde beyaz → 7,3:1 */
.ent__ik--1 .ent__ik-ad { color: #fff; }

.ent__ik-metin {
    font-size: 10px;
    font-weight: var(--fw-semibold);
    line-height: 1.45;
    color: var(--ink-600);
}

/* brand-800 üstünde → 9:1 üstü */
.ent__ik--1 .ent__ik-metin { color: rgba(255, 255, 255, 0.86); }

/* ==========================================================================
   ORTAK ANİMASYON — sekiz kademe yeter (en kalabalık gösterim 8 satır)
   ========================================================================== */

.ent__ay--1, .ent__ad--1, .ent__ls--1, .ent__et--1, .ent__ik--1 { animation: ent-1 8s var(--ease-out) infinite; }
.ent__ay--2, .ent__ad--2, .ent__ls--2, .ent__et--2, .ent__ik--2 { animation: ent-2 8s var(--ease-out) infinite; }
.ent__ay--3, .ent__ad--3, .ent__ls--3, .ent__et--3 { animation: ent-3 8s var(--ease-out) infinite; }
.ent__ay--4, .ent__ad--4, .ent__ls--4, .ent__et--4 { animation: ent-4 8s var(--ease-out) infinite; }
.ent__ay--5, .ent__et--5 { animation: ent-5 8s var(--ease-out) infinite; }
.ent__ay--6, .ent__et--6 { animation: ent-6 8s var(--ease-out) infinite; }
.ent__et--7 { animation: ent-7 8s var(--ease-out) infinite; }
.ent__et--8 { animation: ent-8 8s var(--ease-out) infinite; }

@keyframes ent-1 { 0%, 3%  { opacity: 0; transform: translateY(6px); } 11%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes ent-2 { 0%, 8%  { opacity: 0; transform: translateY(6px); } 16%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes ent-3 { 0%, 13% { opacity: 0; transform: translateY(6px); } 21%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes ent-4 { 0%, 18% { opacity: 0; transform: translateY(6px); } 26%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes ent-5 { 0%, 23% { opacity: 0; transform: translateY(6px); } 31%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes ent-6 { 0%, 28% { opacity: 0; transform: translateY(6px); } 36%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes ent-7 { 0%, 33% { opacity: 0; transform: translateY(6px); } 41%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes ent-8 { 0%, 38% { opacity: 0; transform: translateY(6px); } 46%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(6px); } }

/* ------------------------------------------------------------------ erişim */

/* Hareket azaltma tercihi: gösterim TAMAMLANMIŞ hâlde durur. */
@media (prefers-reduced-motion: reduce) {
    .ent *,
    .ent { animation: none !important; }

    .ent__ay,
    .ent__ad,
    .ent__ls,
    .ent__et,
    .ent__ik { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- duyarlılık */

@media (max-width: 560px) {
    .ent { padding: 0; }

    /* İki sütun 320px'te sığmıyor */
    .ent__ayarlar,
    .ent__ikili { grid-template-columns: minmax(0, 1fr); }
}