/* Bölüm: modüller.

   Gerçek panel ekranı gelene kadar kart, boş bir çerçeve yerine SADE bir
   metin kartı olarak durur. Üstteki kısa marka aksanı, sayfanın diğer
   bölümleriyle (kimler için / faydalar) aynı dili taşır. */

/* Görselsiz kart.

   Kart ÇERÇEVELİ kalır (.sc-tile'dan gelen kenarlık ve köşe); vaktiyle
   çerçevesiz sanıldığı için gövde dolgusu sıfırlanmıştı ve metin kart
   kenarına yapışıyordu. Marka aksanı da kartın SOL ÜST köşesine, kenarlığın
   üstüne oturur. */
.sc-tile--plain {
    position: relative;
    transition: border-color var(--dur) var(--ease);
}

.sc-tile__rule {
    position: absolute;
    top: -1px;
    /* Yuvarlatılmış köşenin başladığı yerden sonra başlasın */
    left: var(--sp-6);
    width: 28px;
    height: 2px;
    background: var(--grad-brand-soft);
    transition: width var(--dur-slow) var(--ease-out);
}

.sc-tile--plain:hover .sc-tile__rule   { width: 56px; }

/* Görselli kartla AYNI dolgu: metin kart kenarına yapışmasın.
   Üstte aksan çizgisine yer bırakmak için üst dolgu bir tık fazla. */
.sc-tile--plain .sc-tile__body {
    padding: clamp(var(--sp-6), 2.2vw, var(--sp-8)) clamp(var(--sp-5), 2vw, var(--sp-8))
             clamp(var(--sp-5), 2vw, var(--sp-8));
}

/* Alternating varyantında görsel yoksa metin tüm genişliği kullanır */
.sc-media--solo { grid-template-columns: minmax(0, 1fr); }
.sc-media--solo .sc-media__body { max-width: 68ch; }

@media (prefers-reduced-motion: reduce) {
    .sc-tile__rule { transition: none; }
}

/* Modül çizimi — ekran görüntüsü değil, tarayıcı çerçevesi yok.
   Hepsi aynı oranda (16:10) olduğu için kartlar hizada durur. */
.sc-tile__art {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--r-md);
    background: var(--surface-soft);
}

/* Alternating düzende çizim yarım sütunu doldurur */
.sc-media .sc-tile__art { border-radius: var(--r-lg); }

/* Görselin üstüne oturan bilgi kartı — referanstaki "veri kartı" dili.
   Fotoğraf neyin fotoğrafı olduğunu söylemez; bunu kart söyler. */
.sc-tile__media { position: relative; }

.sc-tile__tag {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 24px);
    padding: 7px 11px;
    background: rgba(255, 255, 255, 0.94);
    /* Fotoğraf üstünde okunurluğu garantiye alır */
    backdrop-filter: blur(6px);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
    line-height: 1.25;
}

.sc-tile__tag svg { flex: none; color: var(--success-700); }

/* Görselin sol alt köşesi doluysa etiket üste alınır. */
.sc-tile__tag--tl { top: 12px; bottom: auto; }

@media (max-width: 460px) {
    .sc-tile__tag { font-size: 11px; padding: 6px 9px; left: 10px; bottom: 10px; }
    .sc-tile__tag--tl { top: 10px; bottom: auto; }
}

/* ============================================================
   "showcase" varyantı — çerçevesiz vitrin satırları

   Her yetenek bir satır: bir yanda büyük ÇERÇEVESİZ çizim, diğer yanda
   etiket + başlık + açıklama. Satırlar dönüşümlü ilerler.

   Görselde kutu, kenarlık, gölge, sabit oran YOK. Çizimler beyaz zeminli
   üretildiği için bölüm zemini de beyaz kalmalı; aksi hâlde çizimin beyazı
   kutu gibi görünür.
   ============================================================ */

.sc-showcase {
    display: grid;
    gap: clamp(var(--sp-12), 7vw, var(--sp-24));
}

.shw {
    /* Menüden "#capa" ile bu satıra inilebiliyor; sabit header satırın
       üstünü örtmesin diye kaydırma durağı aşağı alınır. */
    scroll-margin-top: 96px;
    display: grid;
    /* Sütunlar EŞİT: taraf değişince görselin genişliği de değişmesin.
       1fr/1.15fr denendiğinde çizimler satır satır 508 ve 441 px arasında
       gidip geliyordu, ızgara dağınık duruyordu. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(var(--sp-8), 5vw, var(--sp-16));
    align-items: center;
}

/* Taraf değişimi YALNIZCA ızgara yerleşimiyle; DOM sırası her satırda aynı
   kalır (önce metin, sonra görsel) ki klavye ve ekran okuyucu sırası
   zikzak çizmesin.

   VARSAYILAN: görsel SOLDA, metin sağda — ilk özellik böyle başlar. */
.shw__body { grid-column: 2; grid-row: 1; }
.shw__art  { grid-column: 1; grid-row: 1; }

.shw--reverse .shw__body { grid-column: 1; }
.shw--reverse .shw__art  { grid-column: 2; }

.shw__label {
    display: inline-block;
    margin-bottom: var(--sp-3);
    padding: 5px 12px;
    background: var(--brand-50);
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    /* brand-50 üstünde brand-800 → 6,9:1 */
    color: var(--brand-800);
}

.shw__title {
    font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
    font-weight: var(--fw-bold);
    line-height: 1.25;
    letter-spacing: var(--ls-heading);
    color: var(--ink-900);
    text-wrap: balance;
}

.shw__text {
    margin-top: var(--sp-4);
    max-width: 46ch;
    font-size: var(--fs-lead);
    line-height: 1.65;
    color: var(--ink-600);
}

.shw__link { margin-top: var(--sp-5); }

/* --- Çizim: çerçevesiz --- */

.shw__art { margin: 0; }

.shw__art img {
    display: block;
    width: 100%;
    height: auto;
    /* Kutu yok: kenarlık, köşe yuvarlama, gölge ve zemin bilinçli olarak yok.
       Çizimin beyazı bölümün beyazıyla birleşsin diye multiply. */
    mix-blend-mode: multiply;
}

/* Gösterim varyantı: çizim değil, çalışan bir mini ekran. Kendi gölgesi ve
   köşesi var, o yüzden multiply karışımı uygulanmaz. */
.shw__art--demo { display: block; }

.section--deep .shw__title { color: #fff; }
.section--deep .shw__text  { color: var(--ink-300); }
.section--deep .shw__art img { mix-blend-mode: normal; }

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

    /* Yığılmış düzende metin HER satırda önce gelir; okuma sırası bozulmasın.
       Açık grid-column/row atamaları da sıfırlanmalı, yoksa iki öğe aynı
       hücreye yığılıp üst üste biner. */
    .shw__body,
    .shw--reverse .shw__body { grid-column: 1; grid-row: 1; }

    .shw__art,
    .shw--reverse .shw__art  { grid-column: 1; grid-row: 2; }

    .shw__text { max-width: none; }
}