/* SU AGENCY — kurumsal web tasarımı (Sections/web-devices)

   Görsel dil ÜÇ CİHAZ: aynı sayfa masaüstü, tablet ve telefonda.
   Blok deseni her cihazda farklı (3 / 2 / 1 sütun) — aynı deseni üç kez
   göstermek "responsive" kelimesini anlatmazdı, değişen şey düzenin
   kendisi.

   ANİMASYON: bloklar TEL KAFESTEN TASARIMA geçiyor. Gri kutu → marka
   renginde dolu kutu. Sıra `--b` ile veriliyor, her blok kendi anında
   dönüyor; hepsi aynı anda dönseydi "kurulma" hissi kaybolurdu.
   Ortak döngü 9 sn, döngüyü paylaşan her öğe kendi keyframe'ini alır
   (proje kuralı) — burada tek bir kare var ve gecikmeyle ayrılıyor.

   Ekran görüntüsü DEĞİL: sahte bir müşteri sitesi koymak o işi biz
   yapmışız gibi görünürdü. Bloklar soyut kaldığı sürece kimseye ait
   olmayan dürüst bir şema. */

.kwb {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) 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));
}

/* ---------------------------------------------------------- Sahne */

.kwb__sahne {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(var(--sp-3), 1.6vw, var(--sp-5));
}

.kwb__cihaz {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
}

/* Genişlik oranları gerçek cihaz oranlarına yakın dursun */
.kwb__cihaz--masaustu { flex: 1 1 56%; }
.kwb__cihaz--tablet   { flex: 1 1 27%; }
.kwb__cihaz--telefon  { flex: 1 1 17%; }

.kwb__cerceve {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: var(--sh-md);
    overflow: hidden;
}

.kwb__cihaz--telefon .kwb__cerceve { border-radius: var(--r-lg); }

.kwb__cubuk {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    background: var(--ink-50, #f8fafc);
}

.kwb__cubuk i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ink-200);
}

.kwb__cihaz--telefon .kwb__cubuk { justify-content: center; }
.kwb__cihaz--telefon .kwb__cubuk i:first-child,
.kwb__cihaz--telefon .kwb__cubuk i:last-child { display: none; }
.kwb__cihaz--telefon .kwb__cubuk i { width: 28px; height: 5px; border-radius: var(--r-full); }

.kwb__sayfa {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    /* Yükseklik cihaza göre: masaüstü geniş ve alçak, telefon dar ve uzun */
    aspect-ratio: 16 / 10;
}

.kwb__cihaz--tablet  .kwb__sayfa { aspect-ratio: 3 / 4; }
.kwb__cihaz--telefon .kwb__sayfa { aspect-ratio: 9 / 17; }

.kwb__izgara {
    display: grid;
    grid-template-columns: repeat(var(--sutun), minmax(0, 1fr));
    gap: 6px;
    flex: 1;
}

/*
 * TEL KAFESTEN TASARIMA. Her öğe gri kutu olarak başlıyor, kendi
 * sırasında marka rengine dönüyor, döngü sonunda tel kafese geri
 * dönüyor. Gecikme `--b` ile: 9 sn'lik döngüde blok başına 0,22 sn.
 */
.kwb__band,
.kwb__blok,
.kwb__satir {
    border-radius: 4px;
    background: var(--ink-100);
    animation: kwb-dolus 9s var(--ease) infinite;
    animation-delay: calc(var(--b) * 0.22s);
}

.kwb__band  { height: 14px; }
.kwb__satir { height: 6px; }
.kwb__satir--kisa { width: 58%; }

@keyframes kwb-dolus {
    0%, 8%    { background: var(--ink-100); }
    22%, 82%  { background: var(--brand-100); }
    96%, 100% { background: var(--ink-100); }
}

/* Üst bant ve bloklar farklı tonlarda dolsun: sayfa tek renk bir
   yamaya dönmesin */
.kwb__band { animation-name: kwb-dolus-band; }

@keyframes kwb-dolus-band {
    0%, 8%    { background: var(--ink-100); }
    22%, 82%  { background: var(--brand-600); }
    96%, 100% { background: var(--ink-100); }
}

.kwb__olcu {
    font-size: 11px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-500);
}

/* ------------------------------------------------------------- Yan */

.kwb__yan {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--sp-5), 2.5vw, var(--sp-7));
}

.kwb__adimlar {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kwb__adim {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: var(--sp-4);
    align-items: start;
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--border);
}

.kwb__adim:first-child { border-top: 0; padding-top: 0; }

.kwb__no {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-50);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    /* brand-800 · brand-50 = 6,93:1 */
    color: var(--brand-800);
}

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

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

.kwb__etiketler {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kwb__etiket {
    padding: 6px var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: #fff;
    font-size: var(--fs-sm);
    color: var(--ink-700);
}

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

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

.kwb__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 .kwb__adim-ad { color: #fff; }
.section--deep .kwb__adim    { border-top-color: rgba(255, 255, 255, 0.14); }
.section--deep .kwb__alt     { border-top-color: rgba(255, 255, 255, 0.14); }
.section--deep .kwb__adim-metin,
.section--deep .kwb__not     { color: var(--ink-300); }
.section--deep .kwb__etiket  { background: rgba(255, 255, 255, 0.06);
                               border-color: rgba(255, 255, 255, 0.16);
                               color: var(--ink-200); }

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

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

@media (max-width: 420px) {
    /* Telefonda üç cihaz yan yana okunmuyordu; en dar olan düşer,
       "aynı sayfa iki genişlikte" mesajı yine ayakta kalır */
    .kwb__cihaz--telefon { display: none; }
    .kwb__cihaz--masaustu { flex: 1 1 64%; }
    .kwb__cihaz--tablet   { flex: 1 1 34%; }
}

@media (prefers-reduced-motion: reduce) {
    /* Dolgu durur: sayfa tasarlanmış hâlinde kalır */
    .kwb__band  { animation: none; background: var(--brand-600); }
    .kwb__blok,
    .kwb__satir { animation: none; background: var(--brand-100); }
}