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

   Her gösterim küçük bir mağaza ekranı + üstünde çalışan bir kontroldür.
   Anlatılan şey hep aynı: kontrolü oynat, mağaza ANINDA değişsin.

   GIF değil HTML/CSS. Gerekçe: her ölçüde net, dosya boyutu yok denecek kadar
   küçük, iki dilde aynı şablon, hareketi azaltma tercihine uyar.

   ANİMASYON KURALI (bkz. aihero.css, themeeditor.css): döngüyü paylaşan her
   öğenin KENDİ keyframe'i vardır. Tek keyframe + animation-delay `infinite`
   ile ilk turdan sonra faz kayar.

   Renk geçişleri KESKİN basamaklıdır — tıklama yumuşak geçiş değildir.

   Ortak döngü: 8 sn. */

.edm {
    position: relative;
    width: 100%;
    max-width: 31rem;
    margin-inline: auto;
    /* Kontrol kartlarına pay: ekran ortada, kartlar kenarlardan taşar */
    padding: 6% 11% 9% 11%;
}

.edm__site {
    display: flex;
    flex-direction: column;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: 0 18px 44px rgba(2, 6, 23, 0.18);
}

/* --- mağaza ekranının bantları ------------------------------------------- */

.edm__top {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 11%;
    padding: 0 10px;
    border-bottom: 1px solid var(--border);
}

.edm__logo {
    width: 30px;
    height: 7px;
    margin-right: auto;
    border-radius: var(--r-full);
    background: var(--ink-800);
}

.edm__nav {
    width: 16px;
    height: 4px;
    border-radius: var(--r-full);
    background: rgba(15, 23, 42, 0.2);
}

.edm__icon {
    width: 9px;
    height: 9px;
    margin-left: 4px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.16);
}

.edm__hero {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 43%;
    padding: 0 12px;
    background: var(--brand-700);
}

.edm__hbody {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 58%;
}

.edm__h1 {
    height: 11px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.95);
    transform-origin: left center;
}

.edm__h2 {
    width: 72%;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.6);
}

.edm__btn {
    width: 52px;
    height: 13px;
    margin-top: 3px;
    border-radius: 3px;
    background: #fff;
}

.edm__grid,
.edm__slot-real {
    display: flex;
    gap: 7px;
    padding: 9px 10px;
}

.edm__tile {
    flex: 1;
    border-radius: 4px;
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
}

.edm__grid { flex: 1; }

.edm__foot {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 15%;
    padding: 0 10px;
    background: var(--ink-900);
}

.edm__col {
    flex: 1;
    height: 5px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.26);
}

/* --- kontrol kartları ----------------------------------------------------- */

.edm__tool {
    position: absolute;
    padding: 9px 10px;
    border-radius: var(--r-sm);
    background: #fff;
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.24);
}

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

.edm__tool-title--sub { margin-top: 9px; }

.edm__cursor {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    color: var(--ink-900);
    filter: drop-shadow(0 1px 3px rgba(255, 255, 255, 0.95));
    pointer-events: none;
}

/* ==========================================================================
   1) SÜRÜKLE BIRAK
   Paletten bir bölüm çıkar, kesikli alana iner, gerçek bölüm olur.
   ========================================================================== */

.edm--drag .edm__tool--palette {
    left: 0;
    top: 26%;
    width: 5.5rem;
}

.edm__chip {
    display: block;
    height: 13px;
    margin-bottom: 5px;
    border-radius: 3px;
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
}

/* Sürüklenen kopya paletten AYRILDIĞI için yerinde boşluk kalır */
.edm__chip--ghost {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--border);
    animation: edm-ghost 8s steps(1, end) infinite;
}

.edm__slot {
    position: relative;
    flex: 1;
    margin: 8px 10px;
}

.edm__slot-hint {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border: 1.5px dashed var(--brand-400);
    border-radius: 4px;
    background: var(--brand-50);
    font-size: 8px;
    font-weight: var(--fw-bold);
    /* brand-50 üstünde brand-800 → 6,9:1 */
    color: var(--brand-800);
    animation: edm-hint 8s steps(1, end) infinite;
}

.edm__slot-real {
    position: absolute;
    inset: 0;
    padding: 0;
    opacity: 0;
    animation: edm-real 8s steps(1, end) infinite;
}

/* Uçan kopya: paletin ikinci sırasından bırakma alanına gider */
.edm__fly {
    position: absolute;
    left: 11%;
    top: 44%;
    width: 4.6rem;
    height: 13px;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(2, 6, 23, 0.3), inset 0 0 0 1px var(--brand-400);
    opacity: 0;
    animation: edm-fly 8s var(--ease-out) infinite;
}

.edm--drag .edm__cursor { animation: edm-cur-drag 8s var(--ease-out) infinite; }

@keyframes edm-fly {
    0%,  6%   { opacity: 0; transform: translate(0, 0) scale(0.96); }
    10%       { opacity: 1; transform: translate(0, 0) scale(1); }
    30%       { opacity: 1; transform: translate(84%, 128%) scale(1.02) rotate(-2deg); }
    38%       { opacity: 1; transform: translate(92%, 178%) scale(1) rotate(0deg); }
    41%, 100% { opacity: 0; transform: translate(92%, 178%) scale(1); }
}

@keyframes edm-ghost {
    0%,  9%   { opacity: 0; }
    10%, 40%  { opacity: 1; }
    41%, 100% { opacity: 0; }
}

@keyframes edm-hint {
    0%,  17%  { opacity: 0; }
    18%, 40%  { opacity: 1; }
    41%, 100% { opacity: 0; }
}

@keyframes edm-real {
    0%,  40%  { opacity: 0; }
    41%, 100% { opacity: 1; }
}

@keyframes edm-cur-drag {
    0%,  4%   { transform: translate(12%, 40%); }
    9%        { transform: translate(20%, 47%); }
    30%       { transform: translate(62%, 74%); }
    38%, 44%  { transform: translate(66%, 90%); }
    70%, 100% { transform: translate(66%, 90%); }
}

/* ==========================================================================
   2) RENK — seçilen renk başlıktan butona, fiyattan alt bilgiye yayılır
   Renkler MÜŞTERİNİN renkleridir; dördü de beyaz metinle en az 5:1 verir.
   ========================================================================== */

.edm--color .edm__tool--swatch {
    right: 0;
    bottom: 14%;
    width: 7.6rem;
}

.edm__sw {
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-right: 6px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.edm__sw--1 { background: #1f7a6c; }
.edm__sw--2 { background: #b4532a; }
.edm__sw--3 { background: #2b3a8f; }
.edm__sw--4 { background: #7a2f52; }

.edm--color .edm__tool--swatch { position: absolute; }

.edm__ring {
    position: absolute;
    left: 7px;
    bottom: 7px;
    width: 23px;
    height: 23px;
    border: 2px solid var(--ink-900);
    border-radius: 50%;
    animation: edm-ring 8s var(--ease-out) infinite;
}

.edm--color .edm__hero  { animation: edm-color-bg 8s steps(1, end) infinite; }
.edm--color .edm__btn   { animation: edm-color-btn 8s steps(1, end) infinite; }
.edm--color .edm__logo  { animation: edm-color-btn 8s steps(1, end) infinite; }
.edm--color .edm__foot  { animation: edm-color-deep 8s steps(1, end) infinite; }
.edm--color .edm__cursor { animation: edm-cur-color 8s var(--ease-out) infinite; }

@keyframes edm-ring {
    0%,  22%  { transform: translateX(0); }
    25%, 47%  { transform: translateX(23px); }
    50%, 72%  { transform: translateX(46px); }
    75%, 100% { transform: translateX(69px); }
}

@keyframes edm-color-bg {
    0%,  24%  { background-color: #1f7a6c; }
    25%, 49%  { background-color: #b4532a; }
    50%, 74%  { background-color: #2b3a8f; }
    75%, 100% { background-color: #7a2f52; }
}

/* Buton ve logo: seçilen rengin KOYU tonu, beyaz zeminde okunur kalsın */
@keyframes edm-color-btn {
    0%,  24%  { background-color: #14574c; }
    25%, 49%  { background-color: #7d3a1d; }
    50%, 74%  { background-color: #1f2a68; }
    75%, 100% { background-color: #56213a; }
}

@keyframes edm-color-deep {
    0%,  24%  { background-color: #0c3b34; }
    25%, 49%  { background-color: #43200f; }
    50%, 74%  { background-color: #141b45; }
    75%, 100% { background-color: #3a1627; }
}

@keyframes edm-cur-color {
    0%,  20%  { transform: translate(76%, 76%); }
    23%       { transform: translate(76%, 76%) scale(0.84); }
    25%, 45%  { transform: translate(83%, 76%); }
    48%       { transform: translate(83%, 76%) scale(0.84); }
    50%, 70%  { transform: translate(90%, 76%); }
    73%       { transform: translate(90%, 76%) scale(0.84); }
    75%, 100% { transform: translate(97%, 76%); }
}

/* ==========================================================================
   3) TİPOGRAFİ VE BOYUT — sürgüyü çek, başlık anında büyür
   ========================================================================== */

.edm--type .edm__tool--slider {
    left: 0;
    bottom: 16%;
    width: 7.4rem;
}

.edm__track {
    position: relative;
    display: block;
    height: 4px;
    border-radius: var(--r-full);
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
}

.edm__fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: var(--r-full);
    background: var(--brand-600);
    animation: edm-fill 8s var(--ease-out) infinite;
}

.edm__knob {
    position: absolute;
    top: 50%;
    width: 11px;
    height: 11px;
    margin-top: -5.5px;
    margin-left: -5.5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(2, 6, 23, 0.35), inset 0 0 0 2px var(--brand-600);
    animation: edm-knob 8s var(--ease-out) infinite;
}

.edm__fontchip {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 22px;
    border-radius: 4px;
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
    font-size: 12px;
    font-weight: var(--fw-bold);
    /* surface-soft üstünde ink-900 → 14,6:1 */
    color: var(--ink-900);
    animation: edm-fontchip 8s steps(1, end) infinite;
}

.edm--type .edm__h1 { animation: edm-h1 8s var(--ease-out) infinite; }
.edm--type .edm__cursor { animation: edm-cur-type 8s var(--ease-out) infinite; }

@keyframes edm-fill { 0%, 20% { width: 18%; } 30%, 53% { width: 55%; } 63%, 100% { width: 88%; } }
@keyframes edm-knob { 0%, 20% { left: 18%; }  30%, 53% { left: 55%; }  63%, 100% { left: 88%; } }

/* Başlık çubuğu boyu ve genişliği: punto artıyor hissi */
@keyframes edm-h1 {
    0%,  20%  { height: 8px;  width: 62%; }
    30%, 53%  { height: 12px; width: 82%; }
    63%, 100% { height: 17px; width: 100%; }
}

@keyframes edm-fontchip {
    0%,  32%  { font-family: var(--font-sans); }
    33%, 65%  { font-family: Georgia, "Times New Roman", serif; }
    66%, 100% { font-family: "Courier New", monospace; }
}

@keyframes edm-cur-type {
    0%,  16%  { transform: translate(14%, 84%); }
    30%, 49%  { transform: translate(28%, 84%); }
    63%, 100% { transform: translate(41%, 84%); }
}

/* ==========================================================================
   4) HİZALAMA — sola / ortaya / sağa, anında
   text-align animasyonlanamaz; metin bloğu translateX ile taşınır.
   Blok genişliği %58 olduğu için 0 / %36 / %72 tam üç konumu verir.
   ========================================================================== */

.edm--align .edm__tool--align {
    right: 0;
    top: 18%;
    width: 6.4rem;
}

.edm__abtn {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    width: 17px;
    height: 17px;
    margin-right: 4px;
    padding: 0 3px;
    border-radius: 3px;
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
    vertical-align: middle;
}

.edm__abtn i {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: rgba(15, 23, 42, 0.42);
}

.edm__abtn i:nth-child(2) { width: 64%; }
.edm__abtn--1 i:nth-child(2) { margin-right: auto; }
.edm__abtn--2 i:nth-child(2) { margin-inline: auto; }
.edm__abtn--3 i:nth-child(2) { margin-left: auto; }

.edm__abtn--1 { animation: edm-abtn-1 8s steps(1, end) infinite; }
.edm__abtn--2 { animation: edm-abtn-2 8s steps(1, end) infinite; }
.edm__abtn--3 { animation: edm-abtn-3 8s steps(1, end) infinite; }

.edm--align .edm__hbody { animation: edm-align 8s var(--ease-out) infinite; }
.edm--align .edm__cursor { animation: edm-cur-align 8s var(--ease-out) infinite; }

@keyframes edm-abtn-1 { 0%, 32% { box-shadow: inset 0 0 0 2px var(--brand-600); } 33%, 100% { box-shadow: inset 0 0 0 1px var(--border); } }
@keyframes edm-abtn-2 { 0%, 32% { box-shadow: inset 0 0 0 1px var(--border); } 33%, 65% { box-shadow: inset 0 0 0 2px var(--brand-600); } 66%, 100% { box-shadow: inset 0 0 0 1px var(--border); } }
@keyframes edm-abtn-3 { 0%, 65% { box-shadow: inset 0 0 0 1px var(--border); } 66%, 100% { box-shadow: inset 0 0 0 2px var(--brand-600); } }

@keyframes edm-align {
    0%,  30%  { transform: translateX(0); }
    36%, 63%  { transform: translateX(36%); }
    69%, 100% { transform: translateX(72%); }
}

@keyframes edm-cur-align {
    0%,  27%  { transform: translate(88%, 26%); }
    33%, 60%  { transform: translate(94%, 26%); }
    66%, 100% { transform: translate(100%, 26%); }
}

/* ==========================================================================
   5) TIKLA DÜZENLE — bölüme tıkla, seçim çerçevesi ve araç çubuğu gelsin
   ========================================================================== */

.edm__select {
    position: absolute;
    inset: 4px;
    border: 2px solid var(--brand-400);
    border-radius: 4px;
    opacity: 0;
    animation: edm-select 8s steps(1, end) infinite;
}

.edm__badge {
    position: absolute;
    left: 8px;
    top: -9px;
    padding: 3px 7px;
    border-radius: var(--r-full);
    background: var(--brand-700);
    font-size: 8px;
    font-weight: var(--fw-bold);
    /* brand-700 üstünde beyaz → 5,36:1 (brand-600 yalnız 3,68 veriyordu) */
    color: #fff;
    opacity: 0;
    animation: edm-badge 8s var(--ease-out) infinite;
}

.edm--click .edm__hero { overflow: visible; margin-top: 9px; }
.edm--click .edm__h1   { animation: edm-click-h1 8s var(--ease-out) infinite; }
.edm--click .edm__cursor { animation: edm-cur-click 8s var(--ease-out) infinite; }

@keyframes edm-select {
    0%,  21%  { opacity: 0; }
    22%, 88%  { opacity: 1; }
    89%, 100% { opacity: 0; }
}

@keyframes edm-badge {
    0%,  21%  { opacity: 0; transform: translateY(4px); }
    26%, 88%  { opacity: 1; transform: none; }
    89%, 100% { opacity: 0; transform: translateY(4px); }
}

/* Tıklamadan sonra metin düzenlenmiş gibi uzar */
@keyframes edm-click-h1 {
    0%,  33%  { width: 62%; }
    40%, 100% { width: 92%; }
}

@keyframes edm-cur-click {
    0%,  8%   { transform: translate(20%, 90%); }
    19%       { transform: translate(48%, 40%); }
    22%       { transform: translate(48%, 40%) scale(0.82); }
    26%, 100% { transform: translate(48%, 40%); }
}

/* ==========================================================================
   6) ÜSTBİLGİ VE ALTBİLGİ — düzenleri de değişir
   ========================================================================== */

.edm--chrome .edm__tool--tabs {
    left: 2%;
    top: -2%;
    display: flex;
    gap: 5px;
    padding: 6px;
}

.edm__tab {
    padding: 4px 8px;
    border-radius: 3px;
    background: var(--surface-soft);
    font-size: 8px;
    font-weight: var(--fw-bold);
    color: var(--ink-700);
}

.edm__tab--1 { animation: edm-tab-1 8s steps(1, end) infinite; }
.edm__tab--2 { animation: edm-tab-2 8s steps(1, end) infinite; }

/* İki üstbilgi ve iki altbilgi düzeni üst üste durur, sırayla görünür */
.edm--chrome .edm__site { position: relative; }

.edm__top--b,
.edm__foot--b { position: absolute; left: 0; right: 0; }

.edm__top--a,
.edm__top--b { justify-content: center; }

.edm__top--b {
    top: 0;
    height: 11%;
    border-bottom: 1px solid var(--border);
    background: #fff;
}

.edm__top--b .edm__logo { margin: 0 6px; }

.edm__foot--b {
    bottom: 0;
    height: 15%;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    background: var(--ink-900);
}

.edm__top--a  { animation: edm-chrome-a 8s steps(1, end) infinite; }
.edm__foot--a { animation: edm-chrome-a 8s steps(1, end) infinite; }
.edm__top--b  { animation: edm-chrome-b 8s steps(1, end) infinite; }
.edm__foot--b { animation: edm-chrome-b 8s steps(1, end) infinite; }
.edm--chrome .edm__cursor { animation: edm-cur-chrome 8s var(--ease-out) infinite; }

/* Etkin sekme brand-700: beyaz metinle 5,36:1 (brand-600 yalnız 3,68 verir) */
@keyframes edm-tab-1 {
    0%,  48%  { background-color: var(--brand-700); color: #fff; }
    49%, 100% { background-color: var(--surface-soft); color: var(--ink-700); }
}

@keyframes edm-tab-2 {
    0%,  48%  { background-color: var(--surface-soft); color: var(--ink-700); }
    49%, 100% { background-color: var(--brand-700); color: #fff; }
}

@keyframes edm-chrome-a { 0%, 46% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes edm-chrome-b { 0%, 46% { opacity: 0; } 50%, 100% { opacity: 1; } }

@keyframes edm-cur-chrome {
    0%,  8%   { transform: translate(14%, 2%); }
    11%       { transform: translate(14%, 2%) scale(0.82); }
    14%, 44%  { transform: translate(14%, 2%); }
    48%       { transform: translate(30%, 2%) scale(0.82); }
    52%, 100% { transform: translate(30%, 2%); }
}

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

/* Hareket azaltma tercihi: her gösterim ilk kararında durur.
   Animasyonu kapatmak yetmez — bazı öğeler opacity: 0 ile başlıyor. */
@media (prefers-reduced-motion: reduce) {
    .edm *,
    .edm { animation: none !important; }

    .edm__slot-hint,
    .edm__select,
    .edm__badge { opacity: 1; }

    .edm__slot-real,
    .edm__fly,
    .edm__chip--ghost { opacity: 0; }

    .edm__top--b,
    .edm__foot--b { opacity: 0; }

    .edm__fill { width: 55%; }
    .edm__knob { left: 55%; }
    .edm__tab--1 { background: var(--brand-700); color: #fff; }
}

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

@media (max-width: 560px) {
    .edm { padding: 8% 13% 11% 13%; }
    .edm__tool { padding: 7px 8px; }
    .edm__tool-title { font-size: 7px; }
}