/* ============================================================
   EMIKON — Ana Sayfa Cilalama Katmanı (home-polish.css)
   Mevcut kimliği (koyu tema, turuncu accent, endüstriyel/mono)
   KORUR; üzerine derinlik, hareket ve rafinelik ekler.
   app.css'ten SONRA yüklenir; sadece geliştirir, bozmaz.
   ============================================================ */

/* ---------- HERO: derinlik + atmosfer ---------- */
.hero {
    background:
        radial-gradient(ellipse 60% 50% at 75% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
        var(--bg);
}
/* Hero başlığında accent vurgu (son kelime) desteği: <span class="hl"> */
.hero-title .hl {
    color: var(--accent);
    position: relative;
    white-space: nowrap;
}
.hero-title .hl::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: .08em;
    height: .14em;
    background: linear-gradient(90deg, var(--accent), transparent);
    opacity: .5;
}
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .8rem;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
    border-radius: 100px;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    width: fit-content;
}

/* ---------- HMI panel: canlı veri hissi (signature) ---------- */
.hmi-panel {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, transparent), transparent 40%),
        var(--bg-card);
    box-shadow:
        var(--shadow),
        0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
}
/* Barların dolma animasyonu — sayfa yüklenince akar */
.hmi-bar {
    position: relative;
    height: 6px;
    background: var(--bg-alt);
    border-radius: 100px;
    overflow: hidden;
}
.hmi-bar i {
    position: absolute;
    inset: 0;
    width: var(--w, 0%);
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), var(--accent));
    border-radius: 100px;
    transform-origin: left;
    animation: hmiFill 1.4s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes hmiFill {
    from { width: 0; }
}
/* Panelde ince tarama çizgisi (ambient) */
.hmi-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0 3px,
        color-mix(in srgb, var(--ink) 2%, transparent) 3px 4px
    );
    border-radius: var(--radius);
    pointer-events: none;
    opacity: .4;
}

/* ---------- Section ritmi + eyebrow ---------- */
.section-head {
    align-items: flex-end;
}
/* Section başlığına küçük mono eyebrow eklenebilir: 
   <span class="section-eyebrow">// NE YAPIYORUZ</span> */
.section-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .6rem;
    opacity: .85;
}

/* ---------- Hizmet kartları: üst accent reveal + derinlik ---------- */
.card-service {
    overflow: hidden;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 100%, transparent), var(--bg-card));
}
.card-service::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}
.card-service:hover::before {
    transform: scaleX(1);
}
.card-service:hover {
    box-shadow:
        0 18px 40px -12px rgba(0, 0, 0, .5),
        0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}
.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    transition: background var(--transition), transform var(--transition);
}
.card-service:hover .card-icon {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    transform: scale(1.05);
}

/* ---------- Proje kartları: görsel zoom + gradient perde ---------- */
.card-project { overflow: hidden; }
.card-project-img {
    transition: transform 500ms cubic-bezier(.2, .8, .2, 1);
}
.card-project:hover .card-project-img {
    transform: scale(1.06);
}
.card-project-body { position: relative; }
.card-project .tag {
    display: inline-block;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    padding: .2rem .6rem;
    border-radius: 100px;
    font-size: .7rem;
    letter-spacing: .05em;
    margin-bottom: .7rem;
}

/* ---------- Stats: mono detay + accent ayraç ---------- */
.stats-strip {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 3%, transparent), transparent),
        var(--bg-alt);
    position: relative;
}
.stats-strip::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: .4;
}
.stat-cell { position: relative; transition: background var(--transition); }
.stat-cell:hover {
    background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.stat-value {
    background: linear-gradient(180deg, var(--ink), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- Scroll-reveal ----------
   NOT: data-anim / .anim-in sistemi app.css + app.js'te zaten tanımlı ve
   çalışıyor. Burada TEKRAR tanımlamıyoruz (çakışma elementleri gizlerdi). */

/* ---------- Erişilebilirlik: hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
    .hmi-bar i { animation: none; width: var(--w, 0%); }
    .card-project-img, .card-service, .card-icon { transition: none; }
}