/* Hero görseli: tema düzenleyici.

   Kompozisyon üç parçadır ve parçalar bilerek taşar — sabit ölçülü,
   çerçeveli bir "ürün ekranı" değil.

   ANİMASYON KURALI (bkz. docs/MIMARI.md ve aihero.css): döngüyü paylaşan her
   öğenin KENDİ keyframe'i vardır. Tek keyframe + farklı animation-delay
   `infinite` ile yanlış olur; ilk turdan sonra öğeler faz dışına düşer.

   Renk geçişleri KESKİN basamaklıdır (0%,24% / 25%,49% ...). Tıklama yumuşak
   geçiş değildir; renk anında değişir — sayfanın vaadi de bu.

   Tema renkleri MÜŞTERİNİN renkleridir, bizim marka paletimiz değil. Dördü de
   beyaz metinle en az 5:1 kontrast verir. */

.thed {
    position: relative;
    /* Yüzen kartlar sağa/sola taşsın diye gövde ortalanır, kenarlarda pay kalır */
    /* width: 100% ŞART. Yalnız `margin-left: auto` verilince ızgara öğesi
       "shrink-to-fit" ölçülür: max-width'e kadar büyür ve sütundan taşar
       (906 px'te sütun 398, kutu 448 px idi). %100 + max-width ikilisi hem
       sütunu doldurur hem geniş ekranda sınırı korur. */
    width: 100%;
    max-width: 32rem;
    min-width: 0;
    margin-left: auto;
    padding: var(--sp-10) var(--sp-8) var(--sp-12) var(--sp-10);
}

/* ------------------------------------------------- mağaza önizlemesi */

.thed__stage {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: 0 26px 60px rgba(2, 6, 23, 0.42);
}

/* Kayan duyuru şeridi — referans videodaki hareketin aynısı */
.thed__bar {
    overflow: hidden;
    padding: 7px 0;
    background: #1f7a6c;
    animation: thed-bar 11s steps(1, end) infinite;
}

.thed__marquee {
    display: flex;
    gap: 2.5rem;
    padding-left: 2.5rem;
    width: max-content;
    font-size: 10px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.12em;
    color: #fff;
    white-space: nowrap;
    animation: thed-marquee 9.5s linear infinite;
}

.thed__nav {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 11px var(--sp-4);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

/* Ad tam ortada: simetrik çizgi grupları arasında otomatik boşluk */
.thed__logo {
    margin: 0 auto;
    font-size: 12px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.06em;
    color: var(--ink-900);
    white-space: nowrap;
}

.thed__navline {
    flex: none;
    height: 4px;
    border-radius: var(--r-full);
    background: rgba(15, 23, 42, 0.16);
}

.thed__navline--a { width: 26px; }
.thed__navline--b { width: 18px; }

/* Vitrin: fotoğraf yok. Zemin, seçilen tema renginden türer — renk değişince
   mağazanın tamamı değişiyor izlenimi buradan gelir. */
.thed__shot {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 16 / 10;
    padding: var(--sp-6);
    background: #0f172a;
}

.thed__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 100% at 78% 12%, #2f9d8c 0%, #12463f 55%, #071c19 100%);
    animation: thed-glow 11s steps(1, end) infinite;
}

/* Vitrin figürü: arka planı şeffaf kesim, sahnenin zeminine basar.
   Metin sola yaslı ve genişliği kilitli (aşağıda) ki figürün üstüne binmesin. */
.thed__model {
    position: absolute;
    right: 8%;
    bottom: 0;
    width: auto;
    height: 88%;
    object-fit: contain;
    object-position: bottom;
    /* Yere basma hissi: figürün altında yumuşak gölge */
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.35));
}

.thed__headline,
.thed__sub,
.thed__cta { position: relative; }

/* Metin figürün soluna sığsın diye genişlik kilitli */
.thed__headline,
.thed__sub { max-width: 56%; }

.thed__headline {
    font-size: clamp(1.125rem, 0.9rem + 0.9vw, 1.5rem);
    font-weight: var(--fw-bold);
    line-height: 1.15;
    letter-spacing: var(--ls-heading);
    color: #fff;
}

.thed__sub {
    margin-top: 6px;
    font-size: 11px;
    /* Koyu zemin üstünde 8:1'in üstünde kalır */
    color: rgba(255, 255, 255, 0.86);
}

.thed__cta {
    align-self: flex-start;
    margin-top: var(--sp-4);
    padding: 8px 16px;
    border-radius: var(--r-sm);
    background: #1f7a6c;
    font-size: 10px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.1em;
    color: #fff;
    animation: thed-bar 11s steps(1, end) infinite;
}

/* ------------------------------------------------- yüzen panel kartları */

.thed__panel {
    position: absolute;
    padding: var(--sp-4);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.34);
}

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

/* Sol sütun: bölüm listesi. Sahnenin sol ÜST köşesinden dışarı taşar.

   ÜSTTEN değil ALTTAN çapalanıyor. Sahne 16/10 oranında olduğu için sütun
   daraldıkça boyu kısalıyor ve vitrin yazısı yukarı çıkıyor; üstten çapalı
   kart o yazının üstüne biniyordu (ölçüldü: 1100 px'te 19 px çakışma).
   Kartın altıyla başlık arasındaki mesafe ise genişlikten neredeyse bağımsız
   (906 px'te 164, 1440 px'te 173 px) — bu yüzden alttan çapa sabit boşluk
   verir, kart fazlasını yukarı doğru taşar. */
.thed__panel--list {
    left: 0;
    top: auto;
    bottom: 12rem;
    width: 11.5rem;
}

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

.thed__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
    color: var(--ink-800);
}

.thed__grip { flex: none; color: rgba(15, 23, 42, 0.28); display: flex; }

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

/* Yayında işareti */
.thed__dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success-500, #22c55e);
}

/* Tema rengi kartı: sahnenin sağ alt köşesinden dışarı taşar */
.thed__panel--theme {
    right: 0;
    /* Kart sahnenin sağ alt köşesinden AŞAĞI sarkar; yukarıda dursaydı
       vitrin figürünün ayaklarını örtüyordu (ölçüldü: 42×50 px). */
    bottom: -4%;
    width: 10.5rem;
}

.thed__swatches {
    position: relative;
    display: flex;
    gap: 10px;
}

.thed__swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}

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

/* Seçim halkası dört kutucuk arasında dolaşır (22px kutucuk + 10px boşluk) */
.thed__ring {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 30px;
    height: 30px;
    border: 2px solid var(--ink-900);
    border-radius: 50%;
    animation: thed-ring 11s var(--ease-out) infinite;
}

/* İmleç: halkadan bir tık önce varır, "tıklandı" izlenimini o verir */
.thed__pointer {
    position: absolute;
    left: 14px;
    bottom: 6px;
    display: flex;
    color: var(--ink-900);
    filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.9));
    animation: thed-pointer 11s var(--ease-out) infinite;
}

/* ------------------------------------------------------------ animasyon */

@keyframes thed-marquee {
    from { transform: translateX(0); }
    /* İki kopyanın biri kadar kayınca başa döner — dikiş görünmez */
    to   { transform: translateX(-50%); }
}

/* Şerit ve buton: seçilen tema rengi */
@keyframes thed-bar {
    0%,   24%  { background-color: #1f7a6c; }
    25%,  49%  { background-color: #b4532a; }
    50%,  74%  { background-color: #2b3a8f; }
    75%, 100%  { background-color: #7a2f52; }
}

/* Vitrin zemini: aynı renkten türeyen radyal yıkama */
@keyframes thed-glow {
    0%,   24%  { background-image: radial-gradient(120% 100% at 78% 12%, #2f9d8c 0%, #12463f 55%, #071c19 100%); }
    25%,  49%  { background-image: radial-gradient(120% 100% at 78% 12%, #d9763f 0%, #6b2f16 55%, #26120a 100%); }
    50%,  74%  { background-image: radial-gradient(120% 100% at 78% 12%, #4257c9 0%, #1b2559 55%, #0a0f26 100%); }
    75%, 100%  { background-image: radial-gradient(120% 100% at 78% 12%, #b4497b 0%, #4c1d33 55%, #1c0a13 100%); }
}

@keyframes thed-ring {
    0%,   22%  { transform: translateX(0); }
    25%,  47%  { transform: translateX(32px); }
    50%,  72%  { transform: translateX(64px); }
    75%, 100%  { transform: translateX(96px); }
}

/* İmleç kutucuğa gider, varınca hafifçe küçülür (tıklama) */
@keyframes thed-pointer {
    0%,  20%   { transform: translate(0, 0)     scale(1); }
    23%        { transform: translate(0, 0)     scale(0.82); }
    25%, 45%   { transform: translate(32px, 0)  scale(1); }
    48%        { transform: translate(32px, 0)  scale(0.82); }
    50%, 70%   { transform: translate(64px, 0)  scale(1); }
    73%        { transform: translate(64px, 0)  scale(0.82); }
    75%, 95%   { transform: translate(96px, 0)  scale(1); }
    98%, 100%  { transform: translate(96px, 0)  scale(0.82); }
}

/* Hareket azaltma tercihi: kompozisyon ilk temayla sabit durur.
   Animasyonu kapatmak yeterli — hiçbir parça opacity: 0 ile başlamıyor. */
@media (prefers-reduced-motion: reduce) {
    .thed__marquee,
    .thed__bar,
    .thed__cta,
    .thed__glow,
    .thed__ring,
    .thed__pointer { animation: none; }
}

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

/* 900–1200 arası dar bant: sağ sütun daralırken sahne küçülüyor, vitrin
   başlığı yukarı çıkıyor ve liste kartının altına giriyor (ölçüldü: 1100 px'te
   19 px, 960 px'te 18 px çakışma). Satır sayısını azaltmak yerine satırlar
   sıkıştırılıyor — beş bölüm de görünür kalsın. */
@media (min-width: 901px) and (max-width: 1200px) {
    /* Yan boşluk azaltılıyor: sahne genişleyince 16/10 oranı gereği boyu da
       artar, vitrin yazısı aşağı iner ve liste kartından uzaklaşır. */
    .thed {
        max-width: 28rem;
        padding: var(--sp-8) var(--sp-5) var(--sp-10) var(--sp-6);
    }

    .thed__panel--list {
        width: 10.5rem;
        padding: var(--sp-3);
    }

    .thed__panel-title { margin-bottom: var(--sp-2); }

    .thed__list { gap: 4px; }

    .thed__item {
        padding: 5px 7px;
        font-size: 10px;
    }

    .thed__panel--theme { width: 10rem; }
}

@media (max-width: 900px) {
    .thed { margin-left: 0; margin-right: auto; }
}

/* Dar ekranda yüzen kartlar sahneyi ezmesin: liste akışa girer,
   tema kartı sahnenin içinde kalır. */
@media (max-width: 560px) {
    .thed { padding: 0 0 var(--sp-10); max-width: none; }

    .thed__panel--list {
        position: static;
        bottom: auto;
        width: auto;
        margin-bottom: var(--sp-4);
        box-shadow: 0 10px 26px rgba(2, 6, 23, 0.26);
    }

    /* Tema kartı da akışa girer: mutlak konumda kalırsa .thed'in altından
       sarkıyor ve bir sonraki bölüme yaklaşıyordu. */
    .thed__panel--theme {
        position: static;
        right: auto;
        bottom: auto;
        width: 9.5rem;
        margin-left: auto;
    }
}