/* Hero görseli: SEO yönetim araçları.

   Ortada arama sonucu, solda meta başlık alanı, sağ altta teknik kontroller.
   Kompozisyon çerçevesiz; parçalar bilerek taşar.

   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.

   Daktilo efekti max-width + steps() ile yapılır; genişlik animasyonu bu tek
   satırlık kutuda düzen hesabını zorlamaz ve gerçek metni gösterir
   (uydurma bir "yazıyor" görseli değil).

   Ortak döngü: 14 sn. */

.seoh {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 32rem;
    margin-left: auto;
    padding: var(--sp-10) var(--sp-8) var(--sp-12) var(--sp-10);
}

/* ------------------------------------------------------- arama sonucu kartı */

.seoh__stage {
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: 0 26px 60px rgba(2, 6, 23, 0.42);
}

.seoh__search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--sp-5);
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
}

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

.seoh__query {
    font-size: 12px;
    /* Beyaz üstünde ink-700 → 10,4:1 */
    color: var(--ink-700);
}

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

/* Başlık: aramada mavi görünür — Google'ın rengi değil, bizim indigo'muz.
   indigo-700 beyaz üstünde 7,9:1 */
.seoh__title {
    margin-top: 3px;
    font-size: 15px;
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    color: var(--indigo-700);
}

.seoh__title span,
.seoh__desc span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    /* Daktilo başlangıcı */
    max-width: 0;
}

.seoh__title span { animation: seoh-type-title 9.5s steps(28, end) infinite; }

.seoh__desc {
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ink-600);
}

.seoh__desc .seoh__d1 { animation: seoh-type-d1 9.5s steps(34, end) infinite; }
.seoh__desc .seoh__d2 { animation: seoh-type-d2 9.5s steps(30, end) infinite; }

/* Soluk rakip sonuçlar: bağlam verir, okunması gerekmez */
.seoh__ghost {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: var(--sp-5);
    opacity: 0.42;
}

.seoh__ghost span {
    height: 6px;
    border-radius: var(--r-full);
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
}

.seoh__ghost span:nth-child(1) { width: 34%; }
.seoh__ghost span:nth-child(2) { width: 62%; background: var(--brand-100); }
.seoh__ghost span:nth-child(3) { width: 88%; }

/* ---------------------------------------------------------- yüzen kartlar */

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

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

/* Meta başlık alanı — sol ALTTA.
   Sol üstte dururken arama kutusunu 140×38 px örtüyordu (ölçüldü) ve sorgu
   metni görünmez oluyordu. Altta yalnız soluk rakip sonuçların üstüne biner;
   onlar zaten bilgi taşımıyor. */
.seoh__panel--field {
    left: 0;
    top: auto;
    bottom: -2%;
    width: 12.5rem;
}

.seoh__input {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    overflow: hidden;
}

.seoh__typed {
    overflow: hidden;
    white-space: nowrap;
    max-width: 0;
    font-size: 10.5px;
    /* surface-soft üstünde ink-900 → 14,6:1 */
    color: var(--ink-900);
    animation: seoh-type-title 9.5s steps(28, end) infinite;
}

.seoh__caret {
    flex: none;
    width: 1.5px;
    height: 12px;
    background: var(--ink-900);
    animation: seoh-caret 1s steps(1, end) infinite;
}

/* Karakter ölçeri: dolarken yeşile döner — "başlık uzunluğu uygun" */
.seoh__meter {
    display: block;
    height: 4px;
    margin-top: var(--sp-3);
    border-radius: var(--r-full);
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
    overflow: hidden;
}

.seoh__meter-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: var(--r-full);
    background: var(--brand-600);
    animation: seoh-meter 9.5s var(--ease-out) infinite;
}

/* Teknik kontroller — sağ ÜSTTE. Arama kutusunun sağ yarısını örter,
   orası boş: sorgu kısa ve sola yaslı. */
.seoh__panel--checks {
    right: 0;
    top: 2%;
    bottom: auto;
    width: 11rem;
}

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

.seoh__check {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
    /* Beyaz üstünde ink-800 → 13,1:1 */
    color: var(--ink-800);
    opacity: 0.4;
}

.seoh__tick {
    display: grid;
    place-items: center;
    flex: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
    color: transparent;
}

.seoh__check--1 { animation: seoh-check-1 9.5s steps(1, end) infinite; }
.seoh__check--2 { animation: seoh-check-2 9.5s steps(1, end) infinite; }
.seoh__check--3 { animation: seoh-check-3 9.5s steps(1, end) infinite; }

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

@keyframes seoh-type-title {
    0%,  6%   { max-width: 0; }
    26%, 92%  { max-width: 100%; }
    97%, 100% { max-width: 0; }
}

@keyframes seoh-type-d1 {
    0%,  28%  { max-width: 0; }
    44%, 92%  { max-width: 100%; }
    97%, 100% { max-width: 0; }
}

@keyframes seoh-type-d2 {
    0%,  46%  { max-width: 0; }
    60%, 92%  { max-width: 100%; }
    97%, 100% { max-width: 0; }
}

@keyframes seoh-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* Ölçek dolarken yeşile döner: uzunluk sınıra oturdu */
@keyframes seoh-meter {
    0%,  6%   { width: 0;   background-color: var(--brand-600); }
    26%       { width: 78%; background-color: var(--brand-600); }
    30%, 92%  { width: 78%; background-color: var(--success-600, #16a34a); }
    97%, 100% { width: 0;   background-color: var(--brand-600); }
}

/* Kontroller sırayla onaylanır — sahnedeki metin bittikten sonra */
@keyframes seoh-check-1 {
    0%,  62%  { opacity: 0.4; }
    64%, 100% { opacity: 1; }
}

@keyframes seoh-check-2 {
    0%,  70%  { opacity: 0.4; }
    72%, 100% { opacity: 1; }
}

@keyframes seoh-check-3 {
    0%,  78%  { opacity: 0.4; }
    80%, 100% { opacity: 1; }
}

/* Onaylanan satırın işareti yeşile döner */
.seoh__check--1 .seoh__tick { animation: seoh-tick-1 9.5s steps(1, end) infinite; }
.seoh__check--2 .seoh__tick { animation: seoh-tick-2 9.5s steps(1, end) infinite; }
.seoh__check--3 .seoh__tick { animation: seoh-tick-3 9.5s steps(1, end) infinite; }

@keyframes seoh-tick-1 {
    0%,  62%  { background-color: var(--surface-soft); color: transparent; }
    64%, 100% { background-color: var(--success-600, #16a34a); color: #fff; }
}

@keyframes seoh-tick-2 {
    0%,  70%  { background-color: var(--surface-soft); color: transparent; }
    72%, 100% { background-color: var(--success-600, #16a34a); color: #fff; }
}

@keyframes seoh-tick-3 {
    0%,  78%  { background-color: var(--surface-soft); color: transparent; }
    80%, 100% { background-color: var(--success-600, #16a34a); color: #fff; }
}

/* Hareket azaltma tercihi: kompozisyon TAMAMLANMIŞ hâlde durur.
   Animasyonu kapatmak yetmez — metinler max-width: 0 ile başlıyor. */
@media (prefers-reduced-motion: reduce) {
    .seoh *,
    .seoh { animation: none !important; }

    .seoh__title span,
    .seoh__desc span,
    .seoh__typed { max-width: 100%; }

    .seoh__meter-fill { width: 78%; background-color: var(--success-600, #16a34a); }
    .seoh__check { opacity: 1; }
    .seoh__tick  { background-color: var(--success-600, #16a34a); color: #fff; }
    .seoh__caret { opacity: 0; }
}

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

@media (min-width: 901px) and (max-width: 1200px) {
    .seoh {
        max-width: 28rem;
        padding: var(--sp-8) var(--sp-5) var(--sp-10) var(--sp-6);
    }

    /* Meta alanı DARALTILMIYOR: 11rem'de yazılan başlık kutuya sığmıyor ve
       daktilo satırın sonuna varamadan kırpılıyordu (147 px metin, 132 px yer). */
    .seoh__panel--field  { width: 12.5rem; }
    .seoh__panel--checks { width: 10rem; }
    .seoh__panel { padding: var(--sp-3); }
}

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

/* Dar ekranda yüzen kartlar sahneyi ezmesin: ikisi de akışa girer. */
@media (max-width: 560px) {
    .seoh { padding: 0 0 var(--sp-6); max-width: none; }

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

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