/* SEO gösterimleri — vitrin satırlarında fotoğrafın yerine geçer.

   Hepsi tek bir kart üstünde çalışır: küçük bir panel/sonuç ekranı ve o
   ekranda gerçekleşen tek bir olay. SEO ekranları metin ağırlıklı olduğu için
   üretilmiş görselde Türkçe bozuluyordu; HTML/CSS bu sorunu tamamen kaldırıyor.

   ANİMASYON KURALI (bkz. aihero.css, editordemo.css): döngüyü paylaşan her
   öğenin KENDİ keyframe'i vardır. Ortak döngü 8 sn.
   Durum geçişleri `steps(1, end)` ile keskindir. */

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

.sdm__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);
}

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

.sdm__label--out { margin-top: var(--sp-4); }

/* Kart altındaki tek satırlık gerekçe — hangi gerçek yeteneği gösterdiğini söyler */
.sdm__note {
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--ink-600);
}

.sdm__file {
    margin-bottom: var(--sp-3);
    font-family: "Courier New", monospace;
    font-size: 11px;
    font-weight: var(--fw-bold);
    color: var(--ink-900);
}

/* ==========================================================================
   1) META ŞABLONU — değişkenler gerçek değerlerle dolar
   ========================================================================== */

.sdm__tpl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 9px 10px;
    border: 1px dashed var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-soft);
}

.sdm__tok {
    padding: 3px 7px;
    border-radius: 3px;
    background: var(--brand-50);
    font-family: "Courier New", monospace;
    font-size: 10px;
    font-weight: var(--fw-bold);
    /* brand-50 üstünde brand-800 → 6,9:1 */
    color: var(--brand-800);
    animation: sdm-tok 8s var(--ease-out) infinite;
}

.sdm__sep { font-size: 10px; color: var(--ink-400); }

.sdm__arrow {
    display: flex;
    justify-content: center;
    margin: var(--sp-3) 0 0;
    color: var(--brand-600);
    animation: sdm-arrow 8s var(--ease-out) infinite;
}

.sdm__out {
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 11.5px;
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
    overflow: hidden;
}

.sdm__out span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    max-width: 0;
    animation: sdm-out 8s steps(34, end) infinite;
}

@keyframes sdm-tok {
    0%,  14%  { opacity: 1; transform: none; }
    30%       { opacity: 0.25; transform: translateY(4px); }
    46%, 90%  { opacity: 0.25; transform: translateY(4px); }
    96%, 100% { opacity: 1; transform: none; }
}

@keyframes sdm-arrow {
    0%,  16%  { opacity: 0.25; transform: translateY(-3px); }
    26%, 40%  { opacity: 1; transform: translateY(2px); }
    52%, 100% { opacity: 0.25; transform: translateY(-3px); }
}

@keyframes sdm-out {
    0%,  26%  { max-width: 0; }
    48%, 90%  { max-width: 100%; }
    96%, 100% { max-width: 0; }
}

/* ==========================================================================
   2) SİTE HARİTASI — yeni ürün eklenince satır düşer
   ========================================================================== */

.sdm__rows {
    display: flex;
    flex-direction: column;
    gap: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sdm__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
    font-family: "Courier New", monospace;
    font-size: 10.5px;
    /* surface-soft üstünde ink-800 → 12,4:1 */
    color: var(--ink-800);
}

.sdm__path {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sdm__date { flex: none; color: var(--ink-500); }

/* Yeni satır: döngünün ortasında belirir */
.sdm__row--yeni {
    background: var(--brand-50);
    box-shadow: inset 0 0 0 1px var(--brand-400);
    opacity: 0;
    animation: sdm-yeni 8s var(--ease-out) infinite;
}

.sdm__new {
    flex: none;
    padding: 2px 7px;
    border-radius: var(--r-full);
    background: var(--brand-700);
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: var(--fw-bold);
    /* brand-700 üstünde beyaz → 5,36:1 */
    color: #fff;
}

@keyframes sdm-yeni {
    0%,  28%  { opacity: 0; transform: translateY(-6px); }
    40%, 88%  { opacity: 1; transform: none; }
    96%, 100% { opacity: 0; transform: translateY(-6px); }
}

/* ==========================================================================
   3) YÖNLENDİRME — adres değişir, eski adres 301 ile yaşar
   ========================================================================== */

.sdm__slug {
    position: relative;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    font-family: "Courier New", monospace;
    font-size: 11px;
    color: var(--ink-900);
}

.sdm__slug-eski,
.sdm__slug-yeni { display: block; animation-duration: 12s; animation-iteration-count: infinite; }

.sdm__slug-eski { animation-name: sdm-slug-eski; animation-timing-function: steps(1, end); }

.sdm__slug-yeni {
    position: absolute;
    left: 10px;
    top: 9px;
    animation-name: sdm-slug-yeni;
    animation-timing-function: steps(1, end);
}

.sdm__301 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 9px;
    border-radius: var(--r-sm);
    background: var(--brand-50);
    box-shadow: inset 0 0 0 1px var(--brand-400);
    font-family: "Courier New", monospace;
    font-size: 10px;
    color: var(--ink-800);
    opacity: 0;
    animation: sdm-301 8s var(--ease-out) infinite;
}

.sdm__301-kod {
    flex: none;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--brand-700);
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    /* brand-700 üstünde beyaz → 5,36:1 */
    color: #fff;
}

.sdm__301-yol {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sdm__301-yol--yeni { color: var(--brand-800); font-weight: var(--fw-bold); }

@keyframes sdm-slug-eski { 0%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes sdm-slug-yeni { 0%, 24% { opacity: 0; } 25%, 100% { opacity: 1; } }

@keyframes sdm-301 {
    0%,  30%  { opacity: 0; transform: translateY(6px); }
    40%, 90%  { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; transform: translateY(6px); }
}

/* ==========================================================================
   4) ZENGİN SONUÇ — yapısal veri sonuca fiyat, stok ve marka ekler
   ========================================================================== */

.sdm__url {
    font-size: 10.5px;
    /* Beyaz üstünde ink-600 → 7,2:1 */
    color: var(--ink-600);
}

.sdm__title {
    margin-top: 3px;
    font-size: 14px;
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    /* Beyaz üstünde indigo-700 → 7,9:1 */
    color: var(--indigo-700);
}

.sdm__desc {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--ink-600);
}

.sdm__rich {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--sp-3);
}

.sdm__pill {
    padding: 4px 9px;
    border-radius: var(--r-full);
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
    font-size: 10px;
    font-weight: var(--fw-semibold);
    /* surface-soft üstünde ink-800 → 12,4:1 */
    color: var(--ink-800);
    opacity: 0;
}

.sdm__pill--1 { animation: sdm-pill-1 8s var(--ease-out) infinite; }
.sdm__pill--2 { animation: sdm-pill-2 8s var(--ease-out) infinite; }
.sdm__pill--3 { animation: sdm-pill-3 8s var(--ease-out) infinite; }

@keyframes sdm-pill-1 {
    0%,  18%  { opacity: 0; transform: translateY(5px); }
    26%, 90%  { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; transform: translateY(5px); }
}

@keyframes sdm-pill-2 {
    0%,  28%  { opacity: 0; transform: translateY(5px); }
    36%, 90%  { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; transform: translateY(5px); }
}

@keyframes sdm-pill-3 {
    0%,  38%  { opacity: 0; transform: translateY(5px); }
    46%, 90%  { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; transform: translateY(5px); }
}

/* ==========================================================================
   5) ÇOK DİLLİ — hreflang iki dili birbirine bağlar, canonical tekrarı keser
   ========================================================================== */

.sdm__card--lang { text-align: center; }

.sdm__lang {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
    text-align: left;
}

.sdm__lang-kod {
    flex: none;
    padding: 2px 7px;
    border-radius: 3px;
    background: var(--ink-900);
    font-size: 9px;
    font-weight: var(--fw-bold);
    /* ink-900 üstünde beyaz → 17,9:1 */
    color: #fff;
}

.sdm__lang-yol {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Courier New", monospace;
    font-size: 10.5px;
    color: var(--ink-800);
}

/* İki dili birleştiren dikey bağ */
.sdm__link {
    position: relative;
    display: block;
    height: 30px;
}

.sdm__link::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: var(--brand-400);
}

.sdm__link-etiket {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 2px 8px;
    border-radius: var(--r-full);
    background: var(--brand-700);
    font-family: "Courier New", monospace;
    font-size: 9px;
    font-weight: var(--fw-bold);
    /* brand-700 üstünde beyaz → 5,36:1 */
    color: #fff;
    animation: sdm-link 8s var(--ease-out) infinite;
}

.sdm__canon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
    font-size: 10.5px;
    color: var(--ink-600);
}

.sdm__canon-etiket {
    flex: none;
    padding: 2px 7px;
    border-radius: 3px;
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
    font-family: "Courier New", monospace;
    font-size: 9px;
    font-weight: var(--fw-bold);
    color: var(--ink-800);
}

@keyframes sdm-link {
    0%,  20%  { transform: translate(-50%, -50%) scale(0.9); opacity: 0.55; }
    32%, 84%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    96%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.55; }
}

/* ==========================================================================
   6) ROBOTS — neyin dizine gireceği, neyin kapalı kalacağı
   ========================================================================== */

.sdm__rows--robots .sdm__row { justify-content: space-between; }

.sdm__ok { flex: none; font-weight: var(--fw-bold); color: var(--success-700, #15803d); }
.sdm__no { flex: none; font-weight: var(--fw-bold); color: var(--danger-700, #b91c1c); }

.sdm__switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: var(--sp-4);
    padding: 9px 10px;
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
}

.sdm__switch-metin {
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
    color: var(--ink-800);
}

.sdm__switch-kutu {
    position: relative;
    flex: none;
    width: 30px;
    height: 17px;
    border-radius: var(--r-full);
    background: var(--ink-300);
    animation: sdm-switch-bg 8s steps(1, end) infinite;
}

.sdm__switch-top {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(2, 6, 23, 0.3);
    animation: sdm-switch 8s var(--ease-out) infinite;
}

@keyframes sdm-switch    { 0%, 22% { transform: translateX(0); } 34%, 100% { transform: translateX(13px); } }
@keyframes sdm-switch-bg { 0%, 26% { background-color: var(--ink-300); } 30%, 100% { background-color: var(--success-600, #16a34a); } }

/* ------------------------------------------------------------- erişilebilirlik */

/* Hareket azaltma tercihi: her gösterim TAMAMLANMIŞ hâlde durur.
   Animasyonu kapatmak yetmez — bazı öğeler opacity: 0 / max-width: 0 ile başlıyor. */
@media (prefers-reduced-motion: reduce) {
    .sdm *,
    .sdm { animation: none !important; }

    .sdm__out span { max-width: 100%; }
    .sdm__row--yeni,
    .sdm__301,
    .sdm__pill { opacity: 1; transform: none; }

    .sdm__tok { opacity: 0.25; }
    .sdm__slug-eski { opacity: 0; }
    .sdm__slug-yeni { opacity: 1; }
    .sdm__switch-kutu { background-color: var(--success-600, #16a34a); }
    .sdm__switch-top { transform: translateX(13px); }
}

@media (max-width: 560px) {
    .sdm { padding: 2% 0; }
    .sdm__card { padding: var(--sp-4); }
}