/* SU AGENCY — özel yazılım (Sections/soft-graph)

   Görsel dil DÜĞÜM HARİTASI: elle yürüyen bir süreç girer, ortadaki
   uygulamadan geçer, panel / gösterge / rapor olarak DALLANIR.

   `agency-flow` da bir akış anlatıyor ama düz ve tek yönlü. Sayfadaki
   diğer kompozisyonların hiçbiri dallanmıyor — özel yazılımın anlattığı
   şey zaten tek bir sıra değil, bir sistem.

   HİZA. Çizgiler 400×300'lük bir viewBox'ta, düğümler aynı orana göre
   yüzdeyle konumlanıyor. `preserveAspectRatio: none` ile SVG kutuyu
   birebir dolduruyor, yani iki katman her ölçüde üst üste oturuyor.
   Sabit piksel yazılsaydı iki ayrı ölçek tutturmak gerekirdi.

   ANİMASYON: kesikli çizgi deseni kayıyor — veri akıyor. Her dal KENDİ
   keyframe'ini almıyor; tek kare var ve gecikme `--g` ile veriliyor,
   böylece üç dal aynı anda değil sırayla dolmuş gibi okunuyor. */

.ozy {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(var(--sp-8), 4vw, var(--sp-12));
    align-items: center;
    margin-top: clamp(var(--sp-8), 4vw, var(--sp-12));
}

/* ---------------------------------------------------------- Harita */

.ozy__harita {
    position: relative;
    /* viewBox oranıyla aynı: 400/300 */
    aspect-ratio: 4 / 3;
    width: 100%;
}

.ozy__cizgiler {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ozy__cizgiler path {
    fill: none;
    stroke: var(--brand-400);
    stroke-width: 2;
    stroke-linecap: round;
    /* Kesik desen: 6 dolu, 8 boş — akış hissi bu boşluktan geliyor */
    stroke-dasharray: 6 8;
    animation: ozy-akis 2.4s linear infinite;
    animation-delay: calc(var(--g, 0) * 0.35s);
}

@keyframes ozy-akis {
    from { stroke-dashoffset: 28; }
    to   { stroke-dashoffset: 0; }
}

/* ---- Düğümler ---- */

.ozy__dugum {
    position: absolute;
    top: var(--y);
    transform: translateY(-50%);
    display: block;
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: var(--sh-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.3;
    text-align: center;
    color: var(--ink-900);
}

/* Yüzdeler viewBox'taki x aralıklarıyla birebir:
   giriş 12–112 → %3–28, merkez 158–262 → %39,5–65,5, çıkış 308–398 */
.ozy__dugum--giris  { left: 3%;    width: 25%; }
.ozy__dugum--merkez { left: 39.5%; width: 26%; }
.ozy__dugum--cikis  { left: 77%;   width: 22.5%; }

.ozy__dugum--giris {
    background: var(--ink-50, #f8fafc);
    border-style: dashed;
    color: var(--ink-600);
}

.ozy__dugum--merkez {
    padding-block: var(--sp-4);
    border-color: var(--brand-600);
    background: linear-gradient(135deg,
                rgba(34, 211, 238, 0.12) 0%, rgba(79, 70, 229, 0.08) 100%);
    font-weight: var(--fw-semibold);
    box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.10), var(--sh-md);
}

.ozy__dugum--cikis b {
    display: block;
    font-weight: var(--fw-semibold);
}

.ozy__dugum--cikis i {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-style: normal;
    font-weight: var(--fw-regular, 400);
    line-height: 1.4;
    color: var(--ink-600);
}

/* Çıkışlar sırayla belirir: dal dolunca kutusu geliyor */
.ozy__dugum--cikis {
    opacity: 0;
    animation: ozy-belir 0.5s var(--ease-out) forwards;
    animation-delay: calc(var(--g) * 0.35s + 0.5s);
}

@keyframes ozy-belir {
    from { opacity: 0; transform: translateY(-50%) translateX(-8px); }
    to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* ------------------------------------------------------- İş listesi */

.ozy__isler {
    display: grid;
    gap: var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ozy__is {
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border);
}

.ozy__is:last-child { padding-bottom: 0; border-bottom: 0; }

.ozy__is-ad {
    display: block;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: 1.35;
    color: var(--ink-900);
}

.ozy__is-metin {
    display: block;
    margin-top: 3px;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--ink-600);
}

/* ------------------------------------------------------------- Alt */

.ozy__alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: clamp(var(--sp-8), 4vw, var(--sp-10));
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border);
}

.ozy__not {
    flex: 1 1 380px;
    max-width: 74ch;
    font-size: var(--fs-sm);
    line-height: 1.65;
    color: var(--ink-600);
}

/* Koyu zeminde */
.section--deep .ozy__dugum   { background: rgba(255, 255, 255, 0.06);
                               border-color: rgba(255, 255, 255, 0.18);
                               color: #fff; }
.section--deep .ozy__dugum--giris  { color: var(--ink-300); }
.section--deep .ozy__dugum--cikis i { color: var(--ink-300); }
.section--deep .ozy__is-ad   { color: #fff; }
.section--deep .ozy__is      { border-bottom-color: rgba(255, 255, 255, 0.14); }
.section--deep .ozy__alt     { border-top-color: rgba(255, 255, 255, 0.14); }
.section--deep .ozy__is-metin,
.section--deep .ozy__not     { color: var(--ink-300); }

/* --------------------------------------------------------- Ölçüler */

@media (max-width: 900px) {
    .ozy { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
}

@media (max-width: 560px) {
    /*
     * Dar ekranda beş kutu yan yana okunmaz hâle geliyordu; harita
     * dikey akışa dönüyor. Çizgiler gizleniyor çünkü yatay topolojiye
     * göre çizilmişlerdi — yanlış yere giden bir çizgi hiç çizgi
     * olmamasından kötüdür.
     */
    .ozy__harita   { aspect-ratio: auto; display: grid; gap: var(--sp-3); }
    .ozy__cizgiler { display: none; }

    .ozy__dugum {
        position: static;
        width: 100%;
        transform: none;
        animation: none;
        opacity: 1;
    }

    .ozy__dugum--cikis { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .ozy__cizgiler path { animation: none; }
    .ozy__dugum--cikis  { animation: none; opacity: 1; transform: translateY(-50%); }
}