/* SU AGENCY hizmet gösterimleri (partials/ajans-demo.php)

   Vitrin satırlarında fotoğrafın yerine geçer. Fotoğraf "reklam işi
   yapılıyor" der; gösterim NE YAPILDIĞINI gösterir — AI Asistan
   sayfasındaki (asistandemo.css) aynı mantık.

   ANİMASYON KURALI: döngüyü paylaşan her öğenin KENDİ keyframe'i vardır.
   Ortak döngü 9 sn; her gösterim kendi içinde bu döngüyü paylaşır.

   SAYI YOK. Demo ekranına "4,2 ROAS" yazmak ölçülmemiş bir sonucu vaat
   gibi gösterirdi. Gösterimler yalnızca yapılan işi anlatır; gerçek ROAS
   değerleri sayfanın kendi panosunda. */

.ajd {
    display: grid;
    place-items: center;
    padding: clamp(var(--sp-5), 3vw, var(--sp-8));
    border-radius: var(--r-lg);
    background: linear-gradient(150deg, var(--brand-50) 0%, #fff 62%);
}

.ajd__kart {
    width: 100%;
    max-width: 420px;
    padding: var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: var(--sh-lg);
}

.ajd__baslik {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
}

.ajd__ara {
    margin: var(--sp-5) 0 var(--sp-3);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-500);
}

.ajd__dip {
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--ink-600);
}

/* ============================================ adkur — hedef seçimi */

.ajd__hedefler,
.ajd__yerlesimler,
.ajd__satirlar,
.ajd__izgara {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ajd__hedef {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--ink-700);
}

.ajd__hedef + .ajd__hedef { margin-top: var(--sp-2); }

.ajd__kutu {
    width: 15px;
    height: 15px;
    flex: none;
    border: 1.5px solid var(--ink-300);
    border-radius: 50%;
}

/* Gösterim hedefi ELENİR: üstü çizilir, soluklaşır */
.ajd__hedef--elenen { animation: ajd-elen 9s var(--ease) infinite; }

@keyframes ajd-elen {
    0%, 18%   { opacity: 1; text-decoration-color: transparent; }
    30%, 100% { opacity: 0.45; text-decoration: line-through;
                text-decoration-color: var(--ink-400); }
}

/* Dönüşüm hedefi SEÇİLİR */
.ajd__hedef--secilen { animation: ajd-secil 9s var(--ease) infinite; }

@keyframes ajd-secil {
    0%, 26%   { border-color: var(--border); background: #fff; }
    36%, 100% { border-color: var(--brand-600); background: var(--brand-50); }
}

.ajd__hedef--secilen .ajd__kutu { animation: ajd-kutu 9s var(--ease) infinite; }

@keyframes ajd-kutu {
    0%, 26%   { border-color: var(--ink-300); box-shadow: none; }
    36%, 100% { border-color: var(--brand-600);
                box-shadow: inset 0 0 0 3.5px #fff, inset 0 0 0 9px var(--brand-600); }
}

.ajd__yerlesimler { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.ajd__yer {
    padding: 6px var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    color: var(--ink-700);

    /* Yerleşimler sırayla açılır; hepsi aynı anda açılsaydı "kurulum"
       değil "hazır liste" gibi okunurdu */
    opacity: 0.4;
    animation: ajd-yer 9s var(--ease) infinite;
    animation-delay: calc(var(--y) * 0.5s + 4s);
}

@keyframes ajd-yer {
    0%, 6%    { opacity: 0.4; border-color: var(--border); background: #fff; }
    14%, 92%  { opacity: 1;   border-color: var(--brand-600); background: var(--brand-50); }
    100%      { opacity: 0.4; border-color: var(--border); background: #fff; }
}

/* ==================================== adkatalog — besleme ve dönüş */

.ajd__izgara {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
}

.ajd__hucre {
    aspect-ratio: 1;
    border-radius: var(--r-sm);
    background: var(--ink-100);
}

/* Seçilen ürün: besleme içinden ayrışır */
.ajd__hucre--secili {
    background: var(--brand-100);
    animation: ajd-secim 9s var(--ease) infinite;
}

@keyframes ajd-secim {
    0%, 10%   { box-shadow: none; transform: scale(1); }
    20%, 88%  { box-shadow: 0 0 0 2px var(--brand-600); transform: scale(1.06); }
    100%      { box-shadow: none; transform: scale(1); }
}

.ajd__geri {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}

.ajd__geri-ok {
    flex: none;
    color: var(--brand-600);
    animation: ajd-ok 9s var(--ease) infinite;
}

.ajd__geri-ok svg { width: 18px; height: 18px; display: block; }

@keyframes ajd-ok {
    0%, 24%   { opacity: 0; transform: translateX(-6px); }
    34%, 88%  { opacity: 1; transform: translateX(0); }
    100%      { opacity: 0; transform: translateX(-6px); }
}

.ajd__geri-kart {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex: 1;
    padding: var(--sp-3);
    border: 1px solid var(--brand-200, var(--brand-100));
    border-radius: var(--r-sm);
    background: var(--brand-50);

    opacity: 0;
    animation: ajd-geri 9s var(--ease) infinite;
}

@keyframes ajd-geri {
    0%, 30%   { opacity: 0; transform: translateY(6px); }
    40%, 88%  { opacity: 1; transform: translateY(0); }
    100%      { opacity: 0; transform: translateY(6px); }
}

.ajd__geri-gorsel {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--r-sm);
    background: var(--brand-100);
}

.ajd__geri-metin b {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
}

.ajd__geri-metin i {
    display: block;
    font-size: var(--fs-xs);
    font-style: normal;
    color: var(--ink-600);
}

/* ============================================= adtest — A/B testi */

.ajd__yaris {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}

.ajd__varyant {
    position: relative;
    display: grid;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.ajd__varyant-gorsel {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-sm);
    background: var(--ink-100);
    font-size: var(--fs-lead);
    font-weight: var(--fw-semibold);
    color: var(--ink-500);
}

.ajd__varyant--b .ajd__varyant-gorsel { background: var(--brand-100); color: var(--brand-800); }

/* Ölçüm çubuğu: iki varyant farklı yükseliyor, kazanan ölçümle çıkıyor */
.ajd__cubuk {
    display: block;
    height: 6px;
    border-radius: var(--r-full);
    background: var(--ink-100);
    overflow: hidden;
}

.ajd__cubuk i {
    display: block;
    height: 100%;
    border-radius: var(--r-full);
    background: var(--brand-600);
    width: 0;
}

.ajd__varyant--a .ajd__cubuk i { animation: ajd-olc-a 9s var(--ease) infinite; }
.ajd__varyant--b .ajd__cubuk i { animation: ajd-olc-b 9s var(--ease) infinite; }

@keyframes ajd-olc-a {
    0%, 8%    { width: 0; }
    38%, 88%  { width: 41%; }
    100%      { width: 0; }
}

@keyframes ajd-olc-b {
    0%, 8%    { width: 0; }
    38%, 88%  { width: 78%; }
    100%      { width: 0; }
}

.ajd__kazanan {
    position: absolute;
    top: -9px;
    right: -6px;
    padding: 3px 9px;
    border-radius: var(--r-full);
    background: var(--brand-700);
    font-size: 10px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    /* brand-700 · beyaz = 5,36:1 */
    color: #fff;

    opacity: 0;
    animation: ajd-kazan 9s var(--ease) infinite;
}

@keyframes ajd-kazan {
    0%, 44%   { opacity: 0; transform: scale(0.85); }
    52%, 88%  { opacity: 1; transform: scale(1); }
    100%      { opacity: 0; transform: scale(0.85); }
}

/* ============================================== adbutce — bütçe */

.ajd__satir {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 20px;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border);
}

.ajd__satir:last-child { border-bottom: 0; }

.ajd__satir-ad {
    font-size: var(--fs-sm);
    color: var(--ink-700);
}

.ajd__bar {
    display: block;
    height: 8px;
    border-radius: var(--r-full);
    background: var(--ink-100);
    overflow: hidden;
}

.ajd__bar i {
    display: block;
    height: 100%;
    border-radius: var(--r-full);
    background: var(--brand-600);
}

/* Bütçe düşük performanslıdan alınır, işleyene verilir */
.ajd__satir--dusen    .ajd__bar i { width: 70%; animation: ajd-azal 9s var(--ease) infinite; }
.ajd__satir--yukselen .ajd__bar i { width: 30%; animation: ajd-artir 9s var(--ease) infinite; }

@keyframes ajd-azal {
    0%, 14%   { width: 70%; }
    40%, 88%  { width: 26%; }
    100%      { width: 70%; }
}

@keyframes ajd-artir {
    0%, 14%   { width: 30%; }
    40%, 88%  { width: 88%; }
    100%      { width: 30%; }
}

.ajd__yon svg { width: 16px; height: 16px; display: block; }

.ajd__yon--asagi  { color: var(--ink-400); }
.ajd__yon--yukari { color: var(--brand-700); }

.ajd__yon {
    opacity: 0;
    animation: ajd-yon 9s var(--ease) infinite;
}

@keyframes ajd-yon {
    0%, 18%   { opacity: 0; }
    28%, 88%  { opacity: 1; }
    100%      { opacity: 0; }
}

/* --------------------------------------------------------- Ölçüler */

@media (max-width: 520px) {
    .ajd        { padding: var(--sp-4); }
    .ajd__kart  { padding: var(--sp-4); }
    .ajd__satir { grid-template-columns: minmax(0, 1fr) 64px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    /* Döngü durur; her gösterim ANLATTIĞI SONUÇ hâlinde kalır */
    .ajd__hedef--elenen  { animation: none; opacity: 0.45; text-decoration: line-through; }
    .ajd__hedef--secilen { animation: none; border-color: var(--brand-600); background: var(--brand-50); }
    .ajd__hedef--secilen .ajd__kutu { animation: none; border-color: var(--brand-600);
                                      box-shadow: inset 0 0 0 3.5px #fff, inset 0 0 0 9px var(--brand-600); }
    .ajd__yer      { animation: none; opacity: 1; border-color: var(--brand-600); background: var(--brand-50); }
    .ajd__hucre--secili { animation: none; box-shadow: 0 0 0 2px var(--brand-600); }
    .ajd__geri-ok,
    .ajd__geri-kart { animation: none; opacity: 1; transform: none; }
    .ajd__varyant--a .ajd__cubuk i { animation: none; width: 41%; }
    .ajd__varyant--b .ajd__cubuk i { animation: none; width: 78%; }
    .ajd__kazanan  { animation: none; opacity: 1; transform: none; }
    .ajd__satir--dusen    .ajd__bar i { animation: none; width: 26%; }
    .ajd__satir--yukselen .ajd__bar i { animation: none; width: 88%; }
    .ajd__yon      { animation: none; opacity: 1; }
}

/* ================================================== SEO gösterimleri

   sekteknik  → tarama ve indeksleme kontrolleri sırayla onaylanır
   sekkelime  → aramalar hacme göre sıralanır, rakip işaretlenir
   seksonuc   → arama sonucundaki görünüm yeniden yazılır
   sektakip   → içerik takvimi dolar, görünürlük çizgisi çizilir

   Hacim çubukları GÖRECELİDİR, mutlak arama hacmi yazmıyoruz: kaynağı
   gösterilmeyen bir sayı doğrulanamaz bir iddia olurdu. */

.ajd__kontroller,
.ajd__kelimeler,
.ajd__takvim { margin: 0; padding: 0; list-style: none; }

/* ---- sekteknik ---- */

.ajd__kontrol {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm);
    color: var(--ink-700);
}

.ajd__kontrol:last-child { border-bottom: 0; }

.ajd__tik {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    background: var(--ink-100);
    color: var(--ink-400);
    animation: ajd-tik 9s var(--ease) infinite;
    animation-delay: calc(var(--k) * 0.55s);
}

.ajd__tik svg { width: 12px; height: 12px; }

@keyframes ajd-tik {
    0%, 6%    { background: var(--ink-100);   color: var(--ink-400); }
    14%, 90%  { background: var(--brand-600); color: #fff; }
    100%      { background: var(--ink-100);   color: var(--ink-400); }
}

/* ---- sekkelime ---- */

.ajd__kelime {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 74px auto;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border);
}

.ajd__kelime:last-child { border-bottom: 0; }

.ajd__kelime-ad {
    font-size: var(--fs-sm);
    color: var(--ink-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ajd__kelime-bar {
    display: block;
    height: 7px;
    border-radius: var(--r-full);
    background: var(--ink-100);
    overflow: hidden;
}

.ajd__kelime-bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: var(--r-full);
    background: var(--brand-600);
    animation: ajd-hacim 9s var(--ease) infinite;
    animation-delay: calc(var(--k) * 0.4s);
}

@keyframes ajd-hacim {
    0%, 6%    { width: 0; }
    22%, 90%  { width: var(--oran); }
    100%      { width: 0; }
}

.ajd__rakip {
    padding: 3px 8px;
    border-radius: var(--r-full);
    background: var(--ink-100);
    font-size: 10px;
    font-weight: var(--fw-semibold);
    /* ink-700 · ink-100 = 8,42:1 */
    color: var(--ink-700);
    white-space: nowrap;
}

/* ---- seksonuc ---- */

.ajd__snip {
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.ajd__snip--sonraki {
    border-color: var(--brand-600);
    background: var(--brand-50);
    opacity: 0;
    animation: ajd-snip 9s var(--ease) infinite;
}

@keyframes ajd-snip {
    0%, 26%   { opacity: 0; transform: translateY(6px); }
    38%, 90%  { opacity: 1; transform: translateY(0); }
    100%      { opacity: 0; transform: translateY(6px); }
}

.ajd__snip-adres {
    display: block;
    font-size: 11px;
    color: var(--ink-500);
}

.ajd__snip-baslik {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.3;
    /* Arama sonucu başlıkları mavi olur; taklit değil, tanınan biçim */
    color: #1a0dab;
}

.ajd__snip-baslik--zayif { color: var(--ink-500); }

.ajd__snip-metin {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--ink-600);
}

.ajd__snip-ok {
    display: grid;
    place-items: center;
    padding: var(--sp-2) 0;
    color: var(--brand-600);
}

.ajd__snip-ok svg { width: 18px; height: 18px; }

/* ---- sektakip ---- */

.ajd__takvim {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
}

.ajd__gun {
    aspect-ratio: 1;
    border-radius: 4px;
    background: var(--ink-100);
}

/* Yazı çıkan günler sırayla dolar: içerik takvimi bir kerede kurulmaz */
.ajd__gun--yazi {
    animation: ajd-gun 9s var(--ease) infinite;
    animation-delay: calc(var(--g) * 0.18s);
}

@keyframes ajd-gun {
    0%, 8%    { background: var(--ink-100); }
    20%, 90%  { background: var(--brand-400); }
    100%      { background: var(--ink-100); }
}

.ajd__gorunurluk {
    position: relative;
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
}

.ajd__gorunurluk svg {
    display: block;
    width: 100%;
    height: 54px;
}

/*
 * Çizgi ÇİZİLİYOR: kesik desen uzunluğu yol uzunluğundan büyük
 * seçildi, offset sıfıra inerken çizgi soldan sağa beliriyor.
 * `pathLength` kullanmadan sabit bir değer yazmak yolun uzunluğu
 * değişince çizimi yarıda bırakırdı.
 */
.ajd__gorunurluk path {
    fill: none;
    stroke: var(--brand-600);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
    animation: ajd-cizim 9s var(--ease) infinite;
}

@keyframes ajd-cizim {
    0%, 10%   { stroke-dashoffset: 320; }
    46%, 90%  { stroke-dashoffset: 0; }
    100%      { stroke-dashoffset: 320; }
}

.ajd__gorunurluk-etiket {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 11px;
    color: var(--ink-600);
}

@media (prefers-reduced-motion: reduce) {
    .ajd__tik        { animation: none; background: var(--brand-600); color: #fff; }
    .ajd__kelime-bar i { animation: none; width: var(--oran); }
    .ajd__snip--sonraki { animation: none; opacity: 1; transform: none; }
    .ajd__gun--yazi  { animation: none; background: var(--brand-400); }
    .ajd__gorunurluk path { animation: none; stroke-dashoffset: 0; }
}

/* ========================================= Sosyal medya gösterimleri

   sosplan    → aylık takvim, gönderiler formatlarıyla günlere yerleşir
   sosizgara  → ızgara bütün olarak kurgulanır, kareler sırayla dizilir
   soskreatif → tek tasarım üç formata uyarlanır
   sosdil     → palet ve tipografi ölçeği: marka görsel dili */

.ajd__ay, .ajd__formatlar, .ajd__akis, .ajd__palet,
.ajd__kareler, .ajd__konseptler, .ajd__cikanlar, .ajd__sahne-adlar {
    margin: 0; padding: 0; list-style: none;
}

/* ---- sosplan ---- */

.ajd__ay {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 5px;
}

.ajd__ay-gun {
    aspect-ratio: 1;
    border-radius: 4px;
    background: var(--ink-100);
}

/* Formatı olan günler sırayla dolar: takvim tek seferde kurulmaz */
.ajd__ay-gun--g,
.ajd__ay-gun--s,
.ajd__ay-gun--r {
    animation: ajd-plan 9s var(--ease) infinite;
    animation-delay: calc(var(--g) * 0.12s);
}

.ajd__ay-gun--g { --renk: var(--brand-600); }
.ajd__ay-gun--s { --renk: var(--indigo-600); }
.ajd__ay-gun--r { --renk: var(--brand-400); }

@keyframes ajd-plan {
    0%, 6%    { background: var(--ink-100); }
    18%, 90%  { background: var(--renk); }
    100%      { background: var(--ink-100); }
}

.ajd__formatlar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--ink-600);
}

.ajd__formatlar li { display: flex; align-items: center; gap: 6px; }

.ajd__nokta { width: 9px; height: 9px; border-radius: 50%; }
.ajd__nokta--g { background: var(--brand-600); }
.ajd__nokta--s { background: var(--indigo-600); }
.ajd__nokta--r { background: var(--brand-400); }

/* ---- sosizgara ---- */

.ajd__akis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.ajd__akis-kare {
    aspect-ratio: 1;
    border-radius: 3px;
    opacity: 0;
    animation: ajd-kare 9s var(--ease) infinite;
    animation-delay: calc(var(--k) * 0.14s);
}

/* Üç tür kare: ürün, doku, kullanım — ızgaranın ritmi bundan çıkıyor */
.ajd__akis-kare--u { background: var(--brand-100); }
.ajd__akis-kare--d { background: var(--ink-100); }
.ajd__akis-kare--y { background: var(--brand-200); }

@keyframes ajd-kare {
    0%, 4%    { opacity: 0; transform: scale(0.9); }
    16%, 92%  { opacity: 1; transform: scale(1); }
    100%      { opacity: 0; transform: scale(0.9); }
}

/* ---- soskreatif ---- */

.ajd__boyutlar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
    align-items: end;
}

.ajd__boyut { display: grid; gap: 6px; justify-items: center; }

.ajd__boyut-alan {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    width: 100%;
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--brand-50);
}

/* Üç format, üç oran — aynı tasarım her birine uyarlanıyor */
.ajd__boyut--kare  .ajd__boyut-alan { aspect-ratio: 1; }
.ajd__boyut--dikey .ajd__boyut-alan { aspect-ratio: 9 / 16; }
.ajd__boyut--genis .ajd__boyut-alan { aspect-ratio: 16 / 9; }

.ajd__boyut-blok {
    display: block;
    flex: 1;
    min-height: 10px;
    border-radius: 3px;
    background: var(--brand-200);
}

.ajd__boyut-satir {
    display: block;
    height: 4px;
    border-radius: var(--r-full);
    background: var(--brand-400);
}

.ajd__boyut-satir--kisa { width: 60%; }

.ajd__boyut-ad { font-size: 10px; color: var(--ink-600); }

/*
 * Üç format sırayla vurgulanıyor. Statik dururken satır, yanındaki
 * hareketli gösterimlerin arasında sönük kalıyordu; asıl anlatılan şey
 * zaten aynı tasarımın formata UYARLANMASI, yani bir eylem.
 */
.ajd__boyut--kare  .ajd__boyut-alan { animation: ajd-format 9s var(--ease) infinite; }
.ajd__boyut--dikey .ajd__boyut-alan { animation: ajd-format 9s var(--ease) infinite 3s; }
.ajd__boyut--genis .ajd__boyut-alan { animation: ajd-format 9s var(--ease) infinite 6s; }

@keyframes ajd-format {
    0%, 2%    { border-color: var(--border);      box-shadow: none; }
    8%, 30%   { border-color: var(--brand-600);   box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12); }
    36%, 100% { border-color: var(--border);      box-shadow: none; }
}

/* ---- sosdil ---- */

.ajd__palet { display: flex; gap: 6px; }

.ajd__renk {
    flex: 1;
    height: 40px;
    border-radius: var(--r-sm);
    opacity: 0;
    animation: ajd-renk 9s var(--ease) infinite;
    animation-delay: calc(var(--r) * 0.16s);
}

.ajd__renk--1 { background: var(--ink-900); }
.ajd__renk--2 { background: var(--brand-700); }
.ajd__renk--3 { background: var(--brand-400); }
.ajd__renk--4 { background: var(--brand-100); }
.ajd__renk--5 { background: var(--ink-100); }

@keyframes ajd-renk {
    0%, 4%    { opacity: 0; transform: translateY(6px); }
    16%, 92%  { opacity: 1; transform: translateY(0); }
    100%      { opacity: 0; transform: translateY(6px); }
}

.ajd__tipo {
    display: flex;
    align-items: baseline;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
    color: var(--ink-900);
}

.ajd__tipo-buyuk { font-size: 2rem;     font-weight: var(--fw-semibold); letter-spacing: -0.02em; }
.ajd__tipo-orta  { font-size: 1.25rem;  font-weight: var(--fw-medium); }
.ajd__tipo-kucuk { font-size: 0.875rem; color: var(--ink-600); }

/* ============================================ AI kreatif gösterimleri

   aivaryant → tek fikirden dört alternatif çıkar
   aisahne   → aynı ürün üç ayrı zeminde
   aivideo   → kurgu kareleri sırayla
   aikonsept → bir brief, üç konsept */

/* ---- aivaryant ---- */

.ajd__varyant-akis {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-4);
}

.ajd__kaynak {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    padding: var(--sp-2);
    border: 1px solid var(--brand-600);
    border-radius: var(--r-sm);
    background: var(--brand-50);
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
    color: var(--brand-800);
}

.ajd__cikanlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }

.ajd__cikan {
    aspect-ratio: 3 / 4;
    border-radius: var(--r-sm);
    background: var(--ink-100);
    opacity: 0;
    animation: ajd-cikan 9s var(--ease) infinite;
    animation-delay: calc(var(--c) * 0.3s + 0.6s);
}

@keyframes ajd-cikan {
    0%, 4%    { opacity: 0; transform: translateX(-10px) scale(0.94); }
    16%, 90%  { opacity: 1; transform: translateX(0) scale(1); }
    100%      { opacity: 0; transform: translateX(-10px) scale(0.94); }
}

/* ---- aisahne ---- */

.ajd__sahne {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--r-sm);
    overflow: hidden;
}

/* Zeminler sırayla öne geçiyor, ürün yerinde kalıyor — anlatılan şey
   tam olarak bu: aynı ürün, farklı sahne. */
.ajd__zemin {
    position: absolute;
    inset: 0;
    opacity: 0;
    /*
     * ZAMANLAMA `linear`, `--ease` DEĞİL — market-work kartlarındaki
     * aynı sebep: çapraz geçişte iki opaklığın toplamı yumuşatılmış
     * eğride 1in altına düşüyor ve kararma görünüyor.
     */
    animation: ajd-zemin 9s linear infinite;
    animation-delay: calc(var(--z) * 3s);
}

.ajd__zemin--studyo  { background: linear-gradient(160deg, #f8fafc 0%, #e2e8f0 100%); }
.ajd__zemin--yasam   { background: linear-gradient(160deg, #fef3e2 0%, #e7d3b8 100%); }
.ajd__zemin--konsept { background: linear-gradient(160deg, var(--brand-100) 0%, var(--indigo-600) 140%); }

/*
 * Üç zemin, döngünün %33,3ü arayla giriyor. Sönme %34te BİTİYOR
 * olsaydı sonraki zemin ancak %37te tam açılırdı ve arada hiçbir
 * zeminin görünmediği bir boşluk kalırdı (ölçüldü: toplam opaklık 0).
 * Sönme, sonraki zeminin AÇILMAYA BAŞLADIĞI anda başlıyor: %33 → %37.
 */
@keyframes ajd-zemin {
    0%        { opacity: 0; }
    4%, 33.333%   { opacity: 1; }
    37.333%, 100% { opacity: 0; }
}

.ajd__urun {
    position: absolute;
    left: 50%;
    bottom: 14%;
    width: 22%;
    height: 56%;
    transform: translateX(-50%);
    border-radius: 40% 40% 18% 18% / 12% 12% 6% 6%;
    background: linear-gradient(150deg, #fff 0%, #cbd5e1 100%);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

.ajd__sahne-adlar {
    display: flex;
    gap: var(--sp-4);
    margin-top: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--ink-500);
}

.ajd__sahne-adlar li {
    animation: ajd-sahne-ad 9s var(--ease) infinite;
    animation-delay: calc(var(--z) * 3s);
}

@keyframes ajd-sahne-ad {
    0%        { color: var(--ink-400); }
    4%, 33.333%   { color: var(--brand-800); }
    37.333%, 100% { color: var(--ink-400); }
}

/* ---- aivideo ---- */

.ajd__kareler { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }

.ajd__kare { display: grid; gap: 5px; justify-items: center; }

.ajd__kare-alan {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: var(--r-sm);
    background: var(--ink-100);
    animation: ajd-kurgu 9s var(--ease) infinite;
    animation-delay: calc(var(--f) * 0.7s);
}

@keyframes ajd-kurgu {
    0%, 4%    { background: var(--ink-100);   transform: scale(1); }
    12%, 26%  { background: var(--brand-200); transform: scale(1.04); }
    34%, 100% { background: var(--ink-100);   transform: scale(1); }
}

.ajd__kare-ad { font-size: 10px; text-align: center; color: var(--ink-600); }

.ajd__serit {
    display: block;
    height: 4px;
    margin-top: var(--sp-4);
    border-radius: var(--r-full);
    background: var(--ink-100);
    overflow: hidden;
}

.ajd__serit i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: var(--r-full);
    background: var(--brand-600);
    animation: ajd-serit 9s linear infinite;
}

@keyframes ajd-serit {
    0%   { width: 0; }
    88%  { width: 100%; }
    100% { width: 100%; }
}

/* ---- aikonsept ---- */

.ajd__istek {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-3);
    border-left: 3px solid var(--brand-600);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--brand-50);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--ink-800);
}

.ajd__konseptler { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }

.ajd__konsept {
    display: grid;
    gap: 6px;
    font-size: 10px;
    line-height: 1.35;
    text-align: center;
    color: var(--ink-600);

    opacity: 0;
    animation: ajd-konsept 9s var(--ease) infinite;
    animation-delay: calc(var(--n) * 0.45s + 0.5s);
}

.ajd__konsept-gorsel {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-sm);
    background: var(--brand-100);
}

@keyframes ajd-konsept {
    0%, 4%    { opacity: 0; transform: translateY(8px); }
    18%, 90%  { opacity: 1; transform: translateY(0); }
    100%      { opacity: 0; transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
    .ajd__ay-gun--g,
    .ajd__ay-gun--s,
    .ajd__ay-gun--r { animation: none; background: var(--renk); }
    .ajd__akis-kare { animation: none; opacity: 1; transform: none; }
    .ajd__renk      { animation: none; opacity: 1; transform: none; }
    .ajd__cikan     { animation: none; opacity: 1; transform: none; }
    /* Sahne döngüsü durur: yalnız ilk zemin açık kalır */
    .ajd__zemin     { animation: none; opacity: 0; }
    .ajd__zemin--studyo  { opacity: 1; }
    .ajd__sahne-adlar li { animation: none; }
    .ajd__kare-alan { animation: none; background: var(--brand-200); transform: none; }
    .ajd__serit i   { animation: none; width: 100%; }
    .ajd__konsept   { animation: none; opacity: 1; transform: none; }
    .ajd__boyut-alan { animation: none; }
}

/* ==================================== Influencer / UGC gösterimleri

   ugcsecim  → profiller eşleşmeye göre elenir, biri seçilir
   ugcbrief  → brief → gönderim → yayın zinciri
   ugcformat → dört UGC formatı sırayla öne çıkar
   ugcreklam → üretilen içerik reklam kreatifine taşınır */

.ajd__profiller, .ajd__zincir, .ajd__ugc-formatlar,
.ajd__analizler, .ajd__kanallar-liste, .ajd__vade {
    margin: 0; padding: 0; list-style: none;
}

/* ---- ugcsecim ---- */

.ajd__profil {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    animation: ajd-elenme 9s var(--ease) infinite;
    animation-delay: calc(var(--p) * 0.3s);
}

.ajd__profil + .ajd__profil { margin-top: var(--sp-2); }

/* Eşleşen profil kalır, diğerleri soluklaşır */
@keyframes ajd-elenme {
    0%, 22%   { opacity: 1; }
    34%, 100% { opacity: 0.45; }
}

.ajd__profil--secili {
    animation: ajd-secilen 9s var(--ease) infinite;
}

@keyframes ajd-secilen {
    0%, 22%   { opacity: 1; border-color: var(--border);    background: #fff; }
    34%, 100% { opacity: 1; border-color: var(--brand-600); background: var(--brand-50); }
}

.ajd__avatar {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-200) 0%, var(--ink-200) 100%);
}

.ajd__profil-metin { flex: 1; min-width: 0; }

.ajd__profil-metin b {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
}

.ajd__profil-metin i {
    display: block;
    font-size: var(--fs-xs);
    font-style: normal;
    color: var(--ink-600);
}

.ajd__uygun {
    flex: none;
    padding: 3px 9px;
    border-radius: var(--r-full);
    background: var(--brand-700);
    font-size: 10px;
    font-weight: var(--fw-semibold);
    /* brand-700 · beyaz = 5,36:1 */
    color: #fff;
    opacity: 0;
    animation: ajd-uygun 9s var(--ease) infinite;
}

@keyframes ajd-uygun {
    0%, 26%   { opacity: 0; transform: scale(0.85); }
    36%, 100% { opacity: 1; transform: scale(1); }
}

/* ---- ugcbrief ---- */

.ajd__zincir { display: grid; gap: var(--sp-2); }

.ajd__halka {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--ink-700);
    opacity: 0.45;
    animation: ajd-halka 9s var(--ease) infinite;
    animation-delay: calc(var(--h) * 1.1s);
}

.ajd__halka-no {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    background: var(--brand-50);
    font-size: 11px;
    font-weight: var(--fw-semibold);
    /* brand-800 · brand-50 = 6,93:1 */
    color: var(--brand-800);
}

@keyframes ajd-halka {
    0%, 4%    { opacity: 0.45; border-color: var(--border); }
    14%, 88%  { opacity: 1;    border-color: var(--brand-600); }
    100%      { opacity: 0.45; border-color: var(--border); }
}

/* ---- ugcformat ---- */

.ajd__ugc-formatlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }

.ajd__ugc-format {
    display: grid;
    gap: 5px;
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
    color: var(--ink-600);
}

.ajd__ugc-alan {
    display: block;
    aspect-ratio: 9 / 16;
    border-radius: var(--r-sm);
    background: var(--ink-100);
    animation: ajd-ugc 9s var(--ease) infinite;
    animation-delay: calc(var(--u) * 0.7s);
}

@keyframes ajd-ugc {
    0%, 4%    { background: var(--ink-100);   transform: scale(1); }
    12%, 26%  { background: var(--brand-200); transform: scale(1.05); }
    34%, 100% { background: var(--ink-100);   transform: scale(1); }
}

/* ---- ugcreklam ---- */

.ajd__tasima {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--sp-3);
}

.ajd__tasima-kaynak,
.ajd__tasima-hedef {
    display: grid;
    place-items: center;
    min-height: 76px;
    padding: var(--sp-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    line-height: 1.35;
    text-align: center;
}

.ajd__tasima-kaynak {
    border: 1px solid var(--border);
    background: var(--ink-100);
    color: var(--ink-700);
}

.ajd__tasima-hedef {
    border: 1px solid var(--brand-600);
    background: var(--brand-50);
    color: var(--brand-800);
    opacity: 0;
    animation: ajd-tasima 9s var(--ease) infinite;
}

@keyframes ajd-tasima {
    0%, 22%   { opacity: 0; transform: translateX(-10px); }
    34%, 90%  { opacity: 1; transform: translateX(0); }
    100%      { opacity: 0; transform: translateX(-10px); }
}

.ajd__tasima-ok { color: var(--brand-600); }
.ajd__tasima-ok svg { width: 18px; height: 18px; display: block; }

/* ======================================== Strateji gösterimleri

   stranaliz → dört analiz başlığı sırayla tamamlanır
   strharita → konumlandırma haritası; rakip noktaları ADSIZ
   strkanal  → hangi kanalda olunmalı, hangisinde olunmamalı
   strbutce  → bütçe kanallara dağılır, yol haritası çeyreklere bölünür */

/* ---- stranaliz ---- */

.ajd__analiz {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border);
}

.ajd__analiz:last-child { border-bottom: 0; }

.ajd__analiz-ad { font-size: var(--fs-sm); color: var(--ink-800); }

.ajd__analiz-cizgi {
    display: block;
    height: 7px;
    border-radius: var(--r-full);
    background: var(--ink-100);
    overflow: hidden;
}

.ajd__analiz-cizgi i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: var(--r-full);
    background: var(--brand-600);
    animation: ajd-analiz 9s var(--ease) infinite;
    animation-delay: calc(var(--a) * 0.45s);
}

@keyframes ajd-analiz {
    0%, 4%    { width: 0; }
    24%, 90%  { width: 100%; }
    100%      { width: 0; }
}

/* ---- strharita ---- */

.ajd__harita-kutu { position: relative; padding: 0 0 var(--sp-5) var(--sp-5); }

.ajd__alan {
    position: relative;
    aspect-ratio: 4 / 3;
    border-left: 1px solid var(--ink-200);
    border-bottom: 1px solid var(--ink-200);
    background:
        linear-gradient(to right, var(--ink-100) 1px, transparent 1px) 0 0 / 25% 100%,
        linear-gradient(to bottom, var(--ink-100) 1px, transparent 1px) 0 0 / 100% 25%;
}

.ajd__eksen {
    position: absolute;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-500);
}

.ajd__eksen--y { left: 0; top: 40%; transform: rotate(-90deg) translateX(-50%); transform-origin: left center; }
.ajd__eksen--x { left: 50%; bottom: 0; transform: translateX(-50%); }

/* Rakip noktaları ADSIZ: kimin nerede durduğunu yazmak ölçmediğimiz
   bir iddia olurdu. Anlatılan şey haritanın kendisi. */
.ajd__nokta-gri {
    position: absolute;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--ink-300);
    opacity: 0;
    animation: ajd-nokta 9s var(--ease) infinite;
    animation-delay: calc(var(--d) * 0.2s);
}

@keyframes ajd-nokta {
    0%, 4%    { opacity: 0; transform: scale(0.6); }
    16%, 92%  { opacity: 1; transform: scale(1); }
    100%      { opacity: 0; transform: scale(0.6); }
}

/* Marka noktası boş alana yerleşir: konumlandırma kararı budur */
.ajd__nokta-marka {
    position: absolute;
    left: 20%;
    top: 22%;
    padding: 4px 10px;
    border-radius: var(--r-full);
    background: var(--brand-700);
    font-size: 10px;
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    /* brand-700 · beyaz = 5,36:1 */
    color: #fff;
    transform: translate(-50%, -50%);
    animation: ajd-yerlesme 9s var(--ease) infinite;
}

@keyframes ajd-yerlesme {
    0%, 20%   { left: 62%; top: 58%; opacity: 0; }
    40%, 92%  { left: 20%; top: 22%; opacity: 1; }
    100%      { left: 62%; top: 58%; opacity: 0; }
}

/* ---- strkanal ---- */

.ajd__kanal-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm);
    color: var(--ink-800);
}

.ajd__kanal-satir:last-child { border-bottom: 0; }

.ajd__kanal-satir--hayir { color: var(--ink-500); }

.ajd__karar {
    flex: none;
    padding: 3px 10px;
    border-radius: var(--r-full);
    background: var(--brand-50);
    font-size: 10px;
    font-weight: var(--fw-semibold);
    color: var(--brand-800);
    opacity: 0;
    animation: ajd-karar 9s var(--ease) infinite;
    animation-delay: calc(var(--s) * 0.35s);
}

/* "Hayır" kararı da bir karardır: gri ama görünür */
.ajd__kanal-satir--hayir .ajd__karar {
    background: var(--ink-100);
    /* ink-700 · ink-100 = 8,42:1 */
    color: var(--ink-700);
}

@keyframes ajd-karar {
    0%, 8%    { opacity: 0; transform: translateX(6px); }
    20%, 90%  { opacity: 1; transform: translateX(0); }
    100%      { opacity: 0; transform: translateX(6px); }
}

/* ---- strbutce ---- */

.ajd__pay {
    display: flex;
    height: 26px;
    border-radius: var(--r-full);
    overflow: hidden;
    background: var(--ink-100);
}

.ajd__pay-dilim {
    width: 0;
    animation: ajd-pay 9s var(--ease) infinite;
    animation-delay: calc(var(--d) * 0.25s);
}

.ajd__pay-dilim--1 { background: var(--brand-700); }
.ajd__pay-dilim--2 { background: var(--brand-500, var(--brand-600)); }
.ajd__pay-dilim--3 { background: var(--brand-400); }
.ajd__pay-dilim--4 { background: var(--brand-200); }

@keyframes ajd-pay {
    0%, 6%    { width: 0; }
    26%, 90%  { width: var(--oran); }
    100%      { width: 0; }
}

.ajd__vade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    font-size: 10px;
    text-align: center;
    color: var(--ink-600);
}

.ajd__vade li {
    padding: 6px 4px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    opacity: 0;
    animation: ajd-vade 9s var(--ease) infinite;
    animation-delay: calc(var(--v) * 0.4s + 1s);
}

@keyframes ajd-vade {
    0%, 4%    { opacity: 0; transform: translateY(5px); }
    18%, 90%  { opacity: 1; transform: translateY(0); }
    100%      { opacity: 0; transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .ajd__profil        { animation: none; opacity: 0.45; }
    .ajd__profil--secili { animation: none; opacity: 1;
                           border-color: var(--brand-600); background: var(--brand-50); }
    .ajd__uygun         { animation: none; opacity: 1; transform: none; }
    .ajd__halka         { animation: none; opacity: 1; border-color: var(--brand-600); }
    .ajd__ugc-alan      { animation: none; background: var(--brand-200); transform: none; }
    .ajd__tasima-hedef  { animation: none; opacity: 1; transform: none; }
    .ajd__analiz-cizgi i { animation: none; width: 100%; }
    .ajd__nokta-gri     { animation: none; opacity: 1; transform: scale(1); }
    .ajd__nokta-marka   { animation: none; left: 20%; top: 22%; opacity: 1; }
    .ajd__karar         { animation: none; opacity: 1; transform: none; }
    .ajd__pay-dilim     { animation: none; width: var(--oran); }
    .ajd__vade li       { animation: none; opacity: 1; transform: none; }
}

/* ===================================== Kurumsal web gösterimleri

   webyapi    → sayfa yapısı ağacı dallanır
   webkimlik  → kimlik jetonları bileşene uygulanır
   webform    → teklif formu dolar ve gönderilir
   webhiz     → yükleme ve arama motoru temel kontrolleri */

.ajd__dallar, .ajd__jetonlar, .ajd__alanlar, .ajd__tablo, .ajd__uygulama,
.ajd__panel-menu, .ajd__panel-liste, .ajd__kutular, .ajd__sutunlar, .ajd__kaynaklar {
    margin: 0; padding: 0; list-style: none;
}

/* ---- webyapi ---- */

.ajd__agac { display: grid; justify-items: center; gap: var(--sp-4); }

.ajd__kok {
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--brand-600);
    border-radius: var(--r-sm);
    background: var(--brand-50);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--brand-800);
}

.ajd__dallar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
    width: 100%;
}

.ajd__dal {
    position: relative;
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    text-align: center;
    color: var(--ink-700);

    opacity: 0;
    animation: ajd-dal 9s var(--ease) infinite;
    animation-delay: calc(var(--d) * 0.28s + 0.3s);
}

@keyframes ajd-dal {
    0%, 4%    { opacity: 0; transform: translateY(-8px); }
    16%, 92%  { opacity: 1; transform: translateY(0); }
    100%      { opacity: 0; transform: translateY(-8px); }
}

/* ---- webkimlik ---- */

.ajd__jetonlar { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }

.ajd__jeton {
    padding: 5px var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    font-size: 10px;
    color: var(--ink-700);
    animation: ajd-jeton 9s var(--ease) infinite;
    animation-delay: calc(var(--j) * 0.4s);
}

@keyframes ajd-jeton {
    0%, 6%    { border-color: var(--border);    background: #fff; }
    18%, 92%  { border-color: var(--brand-600); background: var(--brand-50); }
    100%      { border-color: var(--border);    background: #fff; }
}

.ajd__bilesen {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.ajd__bilesen-baslik {
    height: 12px;
    width: 58%;
    border-radius: 4px;
    background: var(--ink-200);
    animation: ajd-kimlik-baslik 9s var(--ease) infinite;
}

@keyframes ajd-kimlik-baslik {
    0%, 20%   { background: var(--ink-200); }
    34%, 92%  { background: var(--ink-900); }
    100%      { background: var(--ink-200); }
}

.ajd__bilesen-satir {
    height: 6px;
    border-radius: var(--r-full);
    background: var(--ink-100);
}

.ajd__bilesen-satir--kisa { width: 64%; }

.ajd__bilesen-dugme {
    justify-self: start;
    margin-top: var(--sp-2);
    padding: 6px var(--sp-4);
    border-radius: var(--r-sm);
    background: var(--ink-300);
    font-size: 11px;
    font-weight: var(--fw-semibold);
    color: #fff;
    animation: ajd-kimlik-dugme 9s var(--ease) infinite;
}

/* Düğme kimlik uygulandığında marka rengine dönüyor.
   brand-700 · beyaz = 5,36:1 */
@keyframes ajd-kimlik-dugme {
    0%, 26%   { background: var(--ink-300); }
    40%, 92%  { background: var(--brand-700); }
    100%      { background: var(--ink-300); }
}

/* ---- webform ---- */

/* `.ajd__alan` strateji haritasının çizim alanı; form alanı ayrı adla */
.ajd__form-alan {
    display: grid;
    gap: 5px;
    margin-bottom: var(--sp-3);
}

.ajd__form-alan-ad { font-size: 11px; color: var(--ink-600); }

.ajd__alan-kutu {
    display: block;
    height: 30px;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

/* Alanlar sırayla doluyor: form kendi kendine dolmuş gibi durmasın */
.ajd__alan-kutu i {
    display: block;
    width: 0;
    height: 10px;
    border-radius: var(--r-full);
    background: var(--ink-200);
    animation: ajd-doldur 9s var(--ease) infinite;
    animation-delay: calc(var(--f) * 0.6s);
}

@keyframes ajd-doldur {
    0%, 4%    { width: 0; }
    16%, 88%  { width: 72%; }
    100%      { width: 0; }
}

.ajd__gonderim { position: relative; display: block; margin-top: var(--sp-4); }

.ajd__gonder {
    display: block;
    padding: 9px;
    border-radius: var(--r-sm);
    background: var(--brand-700);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-align: center;
    /* brand-700 · beyaz = 5,36:1 */
    color: #fff;
    animation: ajd-gonder 9s var(--ease) infinite;
}

@keyframes ajd-gonder {
    0%, 60%   { opacity: 1; transform: scale(1); }
    66%       { opacity: 1; transform: scale(0.97); }
    70%, 100% { opacity: 0; transform: scale(0.97); }
}

.ajd__basari {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 9px;
    border: 1px solid var(--brand-600);
    border-radius: var(--r-sm);
    background: var(--brand-50);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-align: center;
    color: var(--brand-800);
    opacity: 0;
    animation: ajd-basari 9s var(--ease) infinite;
}

@keyframes ajd-basari {
    0%, 68%   { opacity: 0; }
    74%, 96%  { opacity: 1; }
    100%      { opacity: 0; }
}

/* ---- webhiz ---- */

.ajd__yukleme { display: grid; gap: 6px; margin-bottom: var(--sp-4); }

.ajd__yukleme-bar {
    display: block;
    height: 8px;
    border-radius: var(--r-full);
    background: var(--ink-100);
    overflow: hidden;
}

.ajd__yukleme-bar i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: var(--r-full);
    background: var(--brand-600);
    animation: ajd-yukleme 9s var(--ease) infinite;
}

@keyframes ajd-yukleme {
    0%, 4%    { width: 0; }
    18%, 92%  { width: 100%; }
    100%      { width: 0; }
}

.ajd__yukleme-ad { font-size: 11px; color: var(--ink-600); }

/* ==================================== Özel yazılım gösterimleri

   yazsurec    → tabloyla yürüyen iş uygulamaya taşınır
   yazpanel    → yönetim paneli iskeleti kurulur
   yazgosterge → gösterge paneli; kutularda SAYI YOK
   yazrapor    → dağınık veri tek rapora düşer */

/* ---- yazsurec ---- */

.ajd__gecis {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--sp-3);
}

.ajd__gecis-yan { display: grid; gap: 6px; }

.ajd__gecis-ad { font-size: 10px; text-align: center; color: var(--ink-600); }

.ajd__tablo, .ajd__uygulama { display: grid; gap: 4px; }

.ajd__tablo li {
    height: 12px;
    border-radius: 3px;
    background: var(--ink-100);
}

.ajd__uygulama li {
    height: 12px;
    border-radius: 3px;
    background: var(--brand-100);
    opacity: 0;
    animation: ajd-tasin 9s var(--ease) infinite;
    animation-delay: calc(var(--t) * 0.3s + 0.4s);
}

@keyframes ajd-tasin {
    0%, 4%    { opacity: 0; transform: translateX(-14px); }
    18%, 90%  { opacity: 1; transform: translateX(0); }
    100%      { opacity: 0; transform: translateX(-14px); }
}

.ajd__gecis-ok { color: var(--brand-600); }
.ajd__gecis-ok svg { width: 18px; height: 18px; display: block; }

/* ---- yazpanel ---- */

.ajd__panel {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.ajd__panel-menu { display: grid; gap: 6px; align-content: start; }

.ajd__panel-menu li {
    height: 10px;
    border-radius: 3px;
    background: var(--ink-100);
    animation: ajd-menu 9s var(--ease) infinite;
    animation-delay: calc(var(--m) * 0.22s);
}

@keyframes ajd-menu {
    0%, 6%    { background: var(--ink-100); }
    18%, 90%  { background: var(--brand-200); }
    100%      { background: var(--ink-100); }
}

.ajd__panel-govde { display: grid; gap: 6px; align-content: start; }

.ajd__panel-ust {
    height: 22px;
    border-radius: 4px;
    background: var(--brand-100);
}

.ajd__panel-liste { display: grid; gap: 5px; }

.ajd__panel-liste li {
    height: 14px;
    border-radius: 3px;
    background: var(--ink-100);
    opacity: 0;
    animation: ajd-satir 9s var(--ease) infinite;
    animation-delay: calc(var(--l) * 0.26s + 0.5s);
}

@keyframes ajd-satir {
    0%, 4%    { opacity: 0; transform: translateY(5px); }
    18%, 90%  { opacity: 1; transform: translateY(0); }
    100%      { opacity: 0; transform: translateY(5px); }
}

/* ---- yazgosterge ---- */

.ajd__kutular { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }

.ajd__kutu-kart {
    display: grid;
    gap: 6px;
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 10px;
    line-height: 1.3;
    color: var(--ink-600);
    opacity: 0;
    animation: ajd-kutu-kart 9s var(--ease) infinite;
    animation-delay: calc(var(--o) * 0.3s);
}

/* Sayı yerine çizgi: uydurulmuş bir metrik olmayan veriyi varmış
   gibi gösterirdi. */
.ajd__kutu-cizgi {
    display: block;
    height: 10px;
    width: 62%;
    border-radius: var(--r-full);
    background: var(--brand-200);
}

@keyframes ajd-kutu-kart {
    0%, 4%    { opacity: 0; transform: translateY(6px); }
    18%, 90%  { opacity: 1; transform: translateY(0); }
    100%      { opacity: 0; transform: translateY(6px); }
}

.ajd__sutunlar {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 74px;
    margin-top: var(--sp-4);
}

.ajd__sutunlar li {
    flex: 1;
    height: 0;
    border-radius: 3px 3px 0 0;
    background: var(--brand-400);
    animation: ajd-sutun 9s var(--ease) infinite;
    animation-delay: calc(var(--s) * 0.12s + 0.4s);
}

@keyframes ajd-sutun {
    0%, 4%    { height: 0; }
    22%, 90%  { height: var(--y); }
    100%      { height: 0; }
}

/* ---- yazrapor ---- */

.ajd__kaynaklar { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }

.ajd__kaynaklar li {
    padding: var(--sp-3) var(--sp-2);
    border: 1px dashed var(--border);
    border-radius: var(--r-sm);
    font-size: 10px;
    text-align: center;
    color: var(--ink-600);
    animation: ajd-kaynak 9s var(--ease) infinite;
    animation-delay: calc(var(--r) * 0.25s);
}

@keyframes ajd-kaynak {
    0%, 8%    { border-color: var(--border);    color: var(--ink-600); }
    20%, 88%  { border-color: var(--brand-600); color: var(--brand-800); }
    100%      { border-color: var(--border);    color: var(--ink-600); }
}

/* Toplayıcı: üç kaynağı tek rapora indiren huni çizgisi */
.ajd__toplayici {
    display: block;
    width: 2px;
    height: 26px;
    margin: var(--sp-2) auto;
    border-radius: 1px;
    background: linear-gradient(var(--brand-400), var(--brand-600));
    transform-origin: top;
    transform: scaleY(0);
    animation: ajd-huni 9s var(--ease) infinite;
}

@keyframes ajd-huni {
    0%, 20%   { transform: scaleY(0); }
    32%, 90%  { transform: scaleY(1); }
    100%      { transform: scaleY(0); }
}

.ajd__rapor {
    padding: var(--sp-3);
    border: 1px solid var(--brand-600);
    border-radius: var(--r-sm);
    background: var(--brand-50);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-align: center;
    color: var(--brand-800);
    opacity: 0;
    animation: ajd-rapor 9s var(--ease) infinite;
}

@keyframes ajd-rapor {
    0%, 30%   { opacity: 0; transform: translateY(6px); }
    42%, 90%  { opacity: 1; transform: translateY(0); }
    100%      { opacity: 0; transform: translateY(6px); }
}

@media (max-width: 520px) {
    .ajd__gecis    { grid-template-columns: 1fr; }
    .ajd__gecis-ok { transform: rotate(90deg); justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
    .ajd__dal        { animation: none; opacity: 1; transform: none; }
    .ajd__jeton      { animation: none; border-color: var(--brand-600); background: var(--brand-50); }
    .ajd__bilesen-baslik { animation: none; background: var(--ink-900); }
    .ajd__bilesen-dugme  { animation: none; background: var(--brand-700); }
    .ajd__alan-kutu i { animation: none; width: 72%; }
    /* Form gönderilmiş hâlinde kalır: düğme gizli, başarı görünür */
    .ajd__gonder     { animation: none; opacity: 0; }
    .ajd__basari     { animation: none; opacity: 1; }
    .ajd__yukleme-bar i { animation: none; width: 100%; }
    .ajd__uygulama li   { animation: none; opacity: 1; transform: none; }
    .ajd__panel-menu li { animation: none; background: var(--brand-200); }
    .ajd__panel-liste li { animation: none; opacity: 1; transform: none; }
    .ajd__kutu-kart  { animation: none; opacity: 1; transform: none; }
    .ajd__sutunlar li { animation: none; height: var(--y); }
    .ajd__kaynaklar li { animation: none; border-color: var(--brand-600); color: var(--brand-800); }
    .ajd__toplayici  { animation: none; transform: scaleY(1); }
    .ajd__rapor      { animation: none; opacity: 1; transform: none; }
}

/* ======================================== Pazaryeri gösterimleri

   pzyukleme  → ürün görseli + listeleme alanları sırayla dolar
   pzmagaza   → mağaza vitrini: kanal logosu, banner, dört ürün
   pzkampanya → indirim arttıkça marjın daralması (FİYAT YAZMIYOR)
   pzarama    → reklamla üstte, içerikle listede yükselen ürün

   Bu ailedeki gösterimler GERÇEK ÜRÜN GÖRSELLERİ kullanıyor
   (pazaryeri/urun/*). Soyut kutular pazaryeri işini anlatmıyordu:
   burada anlatılan şey bir ürünün listelenmesi, vitrine girmesi,
   kampanyaya sokulması ve aramada görünmesi. */

.ajd__listeleme, .ajd__vitrin-izgara, .ajd__oranlar, .ajd__sonuclar {
    margin: 0; padding: 0; list-style: none;
}

/* ---- pzyukleme ---- */

.ajd__yukleme-kutu {
    display: grid;
    grid-template-columns: 106px minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
}

.ajd__urun-gorsel {
    display: block;
    aspect-ratio: 1;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: #fff;
    overflow: hidden;
}

.ajd__urun-gorsel img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ajd__listeleme { display: grid; gap: var(--sp-3); }

.ajd__listeleme-ad {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    color: var(--ink-600);
}

.ajd__listeleme-kutu {
    display: block;
    height: 22px;
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

/* Alanlar sırayla doluyor: listeleme tek tuşla bitmiyor */
.ajd__listeleme-kutu i {
    display: block;
    width: 0;
    height: 8px;
    border-radius: var(--r-full);
    background: var(--brand-200);
    animation: ajd-pz-doldur 9s var(--ease) infinite;
    animation-delay: calc(var(--a) * 0.55s);
}

@keyframes ajd-pz-doldur {
    0%, 4%    { width: 0; }
    16%, 88%  { width: 78%; }
    100%      { width: 0; }
}

/* ---- pzmagaza ---- */

.ajd__vitrin {
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: #fff;
}

.ajd__vitrin-ust {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

/*
 * ÖZGÜLLÜK TUZAĞI. modules.css içindeki ".shw__art img" kuralı
 * (genişlik %100 + mix-blend-mode: multiply) vitrin satırındaki TÜM
 * görselleri kapsıyor. Tek sınıflı ".ajd__vitrin-logo" (0,1,0) ondan
 * (0,1,1) zayıf kaldığı için logo 34 px yerine 343 px çizildi ve 76 px
 * kaynaktan büyütüldüğü için bulanıklaştı — ölçüldü. Sarmal sınıf
 * eklenerek özgüllük (0,2,0)'ya çıkarıldı.
 */
.ajd__vitrin-logolar {
    position: relative;
    display: block;
    flex: none;
    width: 92px;
    height: 34px;
}

.ajd .ajd__vitrin-logo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    /* Karışım kipi kapalı: n11'in pembe karesi multiply ile kararıyordu */
    mix-blend-mode: normal;

    /*
     * SIRAYLA GEÇİŞ. Beş logo döngünün %20'si arayla giriyor; çıkan
     * logo hafifçe küçülerek soluyor. Sönme, sonrakinin AÇILMAYA
     * BAŞLADIĞI anda başlıyor (%20 → %24) ve zamanlama doğrusal:
     * iki opaklığın toplamı geçiş boyunca 1'de kalıyor. Yumuşatılmış
     * eğride kararma oluyordu — aisahne ve market-work ile aynı ders.
     */
    opacity: 0;
    animation: ajd-logo-gecis 9s linear infinite;
    animation-delay: calc(var(--l) * 9s / var(--adet, 5));
}

@keyframes ajd-logo-gecis {
    0%        { opacity: 0; transform: scale(1.12); }
    4%, 20%   { opacity: 1; transform: scale(1); }
    24%, 100% { opacity: 0; transform: scale(0.88); }
}

/* Banner önce boş, sonra marka rengine dönüyor: "mağaza tasarımı" */
.ajd__vitrin-banner {
    display: block;
    flex: 1;
    height: 34px;
    border-radius: var(--r-sm);
    background: var(--ink-100);
    animation: ajd-banner 9s var(--ease) infinite;
}

@keyframes ajd-banner {
    0%, 10%   { background: var(--ink-100); }
    24%, 90%  { background: linear-gradient(120deg, var(--brand-600) 0%, var(--indigo-600) 100%); }
    100%      { background: var(--ink-100); }
}

.ajd__vitrin-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }

.ajd__vitrin-izgara li {
    aspect-ratio: 1;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
    opacity: 0;
    animation: ajd-vitrin 9s var(--ease) infinite;
    animation-delay: calc(var(--v) * 0.26s + 0.5s);
}

.ajd__vitrin-izgara img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@keyframes ajd-vitrin {
    0%, 4%    { opacity: 0; transform: translateY(8px); }
    18%, 90%  { opacity: 1; transform: translateY(0); }
    100%      { opacity: 0; transform: translateY(8px); }
}

/* ---- pzkampanya ---- */

.ajd__kampanya {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: center;
}

.ajd__urun-kucuk {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: #fff;
    overflow: hidden;
}

.ajd__urun-kucuk img { width: 100%; height: 100%; object-fit: contain; display: block; }

.ajd__indirim {
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 2px 7px;
    border-radius: var(--r-full);
    background: var(--brand-700);
    font-size: 10px;
    font-weight: var(--fw-semibold);
    /* brand-700 · beyaz = 5,36:1 */
    color: #fff;
    opacity: 0;
    animation: ajd-indirim 9s var(--ease) infinite;
}

@keyframes ajd-indirim {
    0%, 18%   { opacity: 0; transform: scale(0.85); }
    28%, 90%  { opacity: 1; transform: scale(1); }
    100%      { opacity: 0; transform: scale(0.85); }
}

.ajd__oranlar { display: grid; gap: var(--sp-3); }

.ajd__oran-ad {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    color: var(--ink-600);
}

.ajd__oran-bar {
    display: block;
    height: 9px;
    border-radius: var(--r-full);
    background: var(--ink-100);
    overflow: hidden;
}

.ajd__oran-bar i {
    display: block;
    height: 100%;
    border-radius: var(--r-full);
}

/*
 * Üç çubuk aynı hikâyeyi anlatıyor: liste fiyatı sabit, kampanya
 * fiyatı düşüyor, marj onunla birlikte daralıyor. Sayı yok — oran var.
 */
.ajd__oran--liste    .ajd__oran-bar i { width: 100%; background: var(--ink-300); }
.ajd__oran--kampanya .ajd__oran-bar i { width: 100%; background: var(--brand-600);
                                        animation: ajd-kampanya-fiyat 9s var(--ease) infinite; }
.ajd__oran--marj     .ajd__oran-bar i { width: 34%;  background: var(--brand-400);
                                        animation: ajd-marj 9s var(--ease) infinite; }

@keyframes ajd-kampanya-fiyat {
    0%, 14%   { width: 100%; }
    30%, 90%  { width: 72%; }
    100%      { width: 100%; }
}

@keyframes ajd-marj {
    0%, 14%   { width: 34%; }
    30%, 90%  { width: 19%; }
    100%      { width: 34%; }
}

/* ---- pzarama ---- */

.ajd__sonuclar { display: grid; gap: var(--sp-2); }

.ajd__sonuc {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.ajd__sonuc img,
.ajd__sonuc-kare {
    width: 42px;
    height: 42px;
    border-radius: 4px;
    object-fit: contain;
    background: var(--ink-100);
    display: block;
}

.ajd__sonuc-govde { display: block; min-width: 0; }

.ajd__sonuc-govde b {
    display: block;
    font-size: 11px;
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
}

.ajd__sonuc-govde i {
    display: block;
    height: 5px;
    width: 62%;
    margin-top: 5px;
    border-radius: var(--r-full);
    background: var(--ink-100);
    font-style: normal;
}

.ajd__sonuc--reklam {
    border-color: var(--brand-600);
    background: var(--brand-50);
}

.ajd__sponsor {
    padding: 2px 8px;
    border-radius: var(--r-full);
    background: var(--brand-700);
    font-size: 9px;
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    /* brand-700 · beyaz = 5,36:1 */
    color: #fff;
}

.ajd__sonuc--bos { opacity: 0.55; }

/*
 * Organik sonuç listede yukarı tırmanıyor: içerik ve fiyat çalışması.
 *
 * SATIR ADIMI ölçüldü: 42 px görsel + 2×8 px dolgu + 2×1 px kenarlık
 * + 8 px boşluk = 68 px. Formülü calc içinde kenarlıksız yazmıştım,
 * adım 132 px çıkıyordu ve satır yuvaya oturmuyordu.
 *
 * ÜSTTEKİ SATIRLAR AŞAĞI KAYAR. Yalnız organik satırı taşımak yetmiyordu:
 * `transform` yeniden akış yapmadığı için ürün geçtiği satırın ÜSTÜNE
 * biniyordu (ölçüldü: 1 çakışan satır). SEO bölümündeki (wsx) aynı
 * çözüm — geçilen her satır kendi anında bir basamak aşağı iner.
 */
.ajd__sonuclar { --adim: 68px; }

/*
 * Tırmanırken ürün, geçtiği boş satırın ÜSTÜNDEN geçiyor: iki satır
 * yer değiştirirken kısa bir an üst üste biniyor. Bu kaçınılmaz —
 * dikey ötelemeyle yapılan her yer değiştirmede kesişme olur.
 * Çözüm gizlemek değil, hangisinin önde olduğunu netleştirmek:
 * ürün satırı opak beyaz ve üstte, boş satırlar zaten soluk.
 * Sürükle-bırak arayüzleri de tam olarak böyle davranır.
 */
.ajd__sonuc--organik {
    position: relative;
    z-index: 2;
    background: #fff;
    box-shadow: var(--sh-sm);
    animation: ajd-tirmanis 9s var(--ease) infinite;
}

/*
 * DÖNÜŞ ANI YOK, döngü sonunda tek seferde sıfırlanıyor.
 * Satırlar yumuşak biçimde geri dönerken ürün iki basamak, diğerleri
 * bir basamak yol aldığı için birbirlerini kesiyorlardı (ölçüldü:
 * döngünün %93ünde 2 çakışan çift). Son durum %100e kadar tutuluyor;
 * sıfırlama döngü sarmasında hepsinde AYNI ANDA oluyor, kesişme yok.
 * SEO bölümündeki (wsx) tırmanış da aynı şekilde çalışıyor.
 */
@keyframes ajd-tirmanis {
    0%, 18%   { transform: translateY(0); border-color: var(--border); }
    40%, 100% { transform: translateY(calc(-2 * var(--adim))); border-color: var(--brand-600); }
}

/* Ürünün geçtiği iki satır sırayla bir basamak aşağı iner; en üstteki
   boş satır (n = 0) yerinde kalır. Her satır kendi keyframe(ini alır. */
.ajd__sonuc--bos:nth-of-type(4) { animation: ajd-in-4 9s var(--ease) infinite; }
.ajd__sonuc--bos:nth-of-type(3) { animation: ajd-in-3 9s var(--ease) infinite; }

@keyframes ajd-in-4 {
    0%, 18%   { transform: translateY(0); }
    30%, 100% { transform: translateY(var(--adim)); }
}

@keyframes ajd-in-3 {
    0%, 26%   { transform: translateY(0); }
    40%, 100% { transform: translateY(var(--adim)); }
}

.ajd__yukselen {
    color: var(--brand-700);
    opacity: 0;
    animation: ajd-yukselen 9s var(--ease) infinite;
}

.ajd__yukselen svg { width: 15px; height: 15px; display: block; }

@keyframes ajd-yukselen {
    0%, 18%   { opacity: 0; }
    30%, 90%  { opacity: 1; }
    100%      { opacity: 0; }
}

@media (max-width: 520px) {
    .ajd__yukleme-kutu { grid-template-columns: 78px minmax(0, 1fr); }
    .ajd__kampanya     { grid-template-columns: 68px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .ajd__listeleme-kutu i { animation: none; width: 78%; }
    /* Logo döngüsü durur: yalnız ilki açık kalır */
    .ajd .ajd__vitrin-logo { animation: none; opacity: 0; transform: none; }
    .ajd .ajd__vitrin-logo:first-child { opacity: 1; }
    .ajd__vitrin-banner    { animation: none;
                             background: linear-gradient(120deg, var(--brand-600) 0%, var(--indigo-600) 100%); }
    .ajd__vitrin-izgara li { animation: none; opacity: 1; transform: none; }
    .ajd__indirim          { animation: none; opacity: 1; transform: none; }
    .ajd__oran--kampanya .ajd__oran-bar i { animation: none; width: 72%; }
    .ajd__oran--marj     .ajd__oran-bar i { animation: none; width: 19%; }
    /* Tırmanış durur: ürün yükselmiş hâlinde kalır */
    .ajd__sonuc--organik { animation: none;
                           transform: translateY(calc(-2 * var(--adim)));
                           border-color: var(--brand-600); }
    .ajd__sonuc--bos:nth-of-type(4),
    .ajd__sonuc--bos:nth-of-type(3) { animation: none; transform: translateY(var(--adim)); }
    .ajd__yukselen       { animation: none; opacity: 1; }
}