/* Bölümlerin ortak yapı taşları.
   Bir bölümün kendine özgü düzeni yoksa buradaki sınıfları kullanır;
   böylece her bölüm için ayrı CSS yazılmaz ve sayfa tutarlı kalır. */

/* ============================================================
   1. Bölüm başlığı
   ============================================================ */

.sc-head {
    max-width: 60ch;
    margin-bottom: clamp(2.5rem, 1.5rem + 2.5vw, 4rem);
}

/* Ortalanmış başlıkta ölçü daha geniş: 60ch, "İşletmeniz büyüdükçe paketiniz de
   büyür" gibi tek cümlelik bir başlığı iki satıra, alt metni üç satıra bölüyor
   ve bölüm gereksiz uzuyordu. Sola dayalı başlıklarda 60ch korunur — orada
   dar ölçü tarama hızını artırıyor. */
.sc-head--center {
    max-width: 48rem;
    margin-inline: auto;
    text-align: center;
}

.sc-head__title { font-size: var(--fs-h2); }

.sc-head__lead {
    margin-top: var(--sp-4);
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--ink-600);
}

/* Başlık geniş ölçüyü kullanabilir (birkaç kelime, iri punto) ama alt metin
   gövde metnidir; satır başına düşen karakter sayısı okunabilir sınırda kalsın.
   ch birimi alt metnin KENDİ punto boyutuna göre ölçtüğü için bu sınır
   kırılımlarda da geçerliliğini korur. */
.sc-head--center .sc-head__lead {
    /* 68ch ilk satırda 77 karakter bırakıyordu; 66ch ile 75'in altına iner
       ve satır sayısı yine değişmez. */
    max-width: 66ch;
    margin-inline: auto;
}

.section--deep .sc-head__lead { color: var(--ink-300); }

/* ============================================================
   2. Noktalar — kutusuz, ince ayraçlı ızgara
   "Altı tane aynı kartlı Bootstrap ızgarası" hissinden kaçınmak için
   bilinçli olarak çerçevesiz; ayrım boşluk ve hairline ile kurulur.
   ============================================================ */

.sc-points {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--border);
}

.sc-points--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.sc-point {
    padding: var(--sp-8) var(--sp-6) var(--sp-8) 0;
    border-bottom: 1px solid var(--border);
}

/* Dikey ayraç yalnızca satır içindeki komşular arasında.

   :not(.sc-points--2) ŞART: "--2" elemanı base sınıfı da taşıdığı için üç
   sütunluk bu kural iki sütunluk ızgarada da işliyordu. Dört maddelik bir
   ızgarada 3. madde (alt satırın SOLU) 3n+1 olmadığı için sol kenarlık ve
   dolgu alıyor, satır başında duran kart sağa kaymış görünüyordu. */
.sc-points:not(.sc-points--2) > .sc-point:not(:nth-child(3n + 1)) {
    padding-left: var(--sp-6);
    border-left: 1px solid var(--border);
}

.sc-points--2 > .sc-point:not(:nth-child(2n + 1)) {
    padding-left: var(--sp-6);
    border-left: 1px solid var(--border);
}

.sc-point__title {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
}

.sc-point__text {
    margin-top: var(--sp-3);
    color: var(--ink-600);
    font-size: var(--fs-sm);
    line-height: 1.65;
}

.section--deep .sc-point { border-color: rgba(255, 255, 255, 0.12); }
.section--deep .sc-point__title { color: #fff; }
.section--deep .sc-point__text { color: var(--ink-300); }

@media (max-width: 900px) {
    .sc-points,
    .sc-points--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Bu kırılımda üçlü ızgara da ikiye düşer; üç sütunluk kural sıfırlanır */
    .sc-points:not(.sc-points--2) > .sc-point:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
    .sc-points > .sc-point:not(:nth-child(2n + 1)) { padding-left: var(--sp-6); border-left: 1px solid var(--border); }
}

@media (max-width: 620px) {
    .sc-points,
    .sc-points--2 { grid-template-columns: minmax(0, 1fr); }

    .sc-point { padding: var(--sp-6) 0; }
    .sc-points > .sc-point:not(:nth-child(2n + 1)) { padding-left: 0; border-left: 0; }
}

/* ============================================================
   3. Kart ızgarası — gerçek ürün görseli taşıyan bölümler için
   ============================================================ */

.sc-grid {
    display: grid;
    gap: var(--sp-6);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
    .sc-grid,
    .sc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .sc-grid,
    .sc-grid--2,
    .sc-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Görselli modül kartı */
.sc-tile {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                transform var(--dur) var(--ease-out);
}

.sc-tile:hover {
    border-color: var(--brand-200);
    box-shadow: var(--sh-lg);
    transform: translateY(-2px);
}

.sc-tile__media {
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
}

.sc-tile__media .screenshot {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.sc-tile__media .screenshot__placeholder { aspect-ratio: 16 / 9; }

.sc-tile__body {
    /* 20 px'lik dolgu, 320 px'lik bir kartta başlığı ve açıklamayı kenara
       yapıştırıyordu. Geniş ekranda ~29 px'e açılır, dar ekranda 20 px'e
       iner; kartın kendi genişliğiyle orantılı kalır. */
    padding: clamp(var(--sp-5), 2vw, var(--sp-8));
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    flex: 1 1 auto;
}

.sc-tile__title {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
}

.sc-tile__text {
    color: var(--ink-600);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

.sc-tile__link { margin-top: auto; padding-top: var(--sp-3); }

/* ============================================================
   4. Medya satırı — metin bir yanda, ürün ekranı diğer yanda
   ============================================================ */

.sc-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    align-items: center;
}

.sc-media--reverse .sc-media__body { order: 2; }

.sc-media__list { margin-top: var(--sp-6); }

.sc-media__item {
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--border);
}

.sc-media__item:last-child { border-bottom: 1px solid var(--border); }

.sc-media__item-title {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
}

.sc-media__item-text {
    margin-top: var(--sp-1);
    color: var(--ink-600);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

.section--deep .sc-media__item { border-color: rgba(255, 255, 255, 0.14); }
.section--deep .sc-media__item-title { color: #fff; }
.section--deep .sc-media__item-text { color: var(--ink-300); }

@media (max-width: 900px) {
    .sc-media { grid-template-columns: minmax(0, 1fr); }
    .sc-media--reverse .sc-media__body { order: 0; }
}

/* ============================================================
   5. Etiket bulutu — uzun özellik listeleri için
   ============================================================ */

.sc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.sc-tag {
    padding: var(--sp-3) var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--ink-800);
}

.section--deep .sc-tag {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* ============================================================
   6. Bölüm aksiyonları ve not
   ============================================================ */

.sc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: clamp(2rem, 1rem + 2vw, 3rem);
}

.sc-actions--center { justify-content: center; }

.sc-note {
    max-width: 72ch;
    margin-top: var(--sp-6);
    padding: var(--sp-5) var(--sp-6);
    background: var(--brand-50);
    border-radius: var(--r-md);
    color: var(--brand-900);
    font-size: var(--fs-sm);
    line-height: 1.65;
}

.section--deep .sc-note {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* ------------------------------------------------- Ekran rozetleri

   Ham ekran görüntüsü ne anlattığını söylemiyordu. Çerçevenin kenarlarına
   o ekrana özel 1–3 küçük rozet oturur: mail/SMS/WhatsApp, barkod hazır,
   üç kanal... Kart değil, kabartma değil — ince çerçeveli hafif etiket. */

.shotwrap { position: relative; }

/* Rozetler kenardan taşacağı için kompozisyona pay bırakılır */
.shotwrap--badged { padding: 14px 0 14px 14px; }

.shotbadge {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
    white-space: nowrap;
}

.shotbadge__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: var(--r-xs);
    background: var(--brand-50);
    color: var(--brand-700);
}

.shotbadge__text { display: grid; line-height: 1.25; }

.shotbadge__top {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--ink-900);
}

.shotbadge__sub {
    font-size: 11px;
    color: var(--ink-600);
}

/* Yerleşim: sol üst, sağ orta, sol alt.
   İlk rozet adres çubuğunun ALTINDAN başlar — çubuğun üstüne binince
   kompozisyon kaymış gibi görünüyordu. */
.shotbadge--1 { top: 74px; left: -14px; }   /* adres çubuğu 47px + dolgu 15px + 12px pay */
.shotbadge--2 { bottom: 22%; right: -18px; }
.shotbadge--3 { bottom: 0;  left: 6%; }

@media (max-width: 760px) {
    .shotwrap--badged { padding: 10px 0 10px 10px; }

    .shotbadge { padding: 5px 8px; gap: 6px; }
    .shotbadge__icon { width: 22px; height: 22px; }
    .shotbadge__sub  { font-size: 10px; }

    .shotbadge--1 { left: -8px; }
    .shotbadge--2 { right: -8px; bottom: 26%; }
    .shotbadge--3 { left: 4%; }
}

/* Çok dar ekranda üçüncü rozet kalabalık yapıyor */
@media (max-width: 420px) {
    .shotbadge--3 { display: none; }
}

/* ============================================================
   Başlık içindeki marka işareti

   Bölüm başlığında geçen "Susoftech" kelimesi yazı yerine logo olarak basılır.
   Logo dosyasında harfler yüksekliğin yalnızca %40'ını kaplıyor (üstte ve altta
   %30 saydam alan var); bu yüzden kutu yüksekliği doğrudan verilemez:

       kutu = başlığın büyük harf oranı / 0,40 = 0,694 / 0,40 ≈ 1,74em

   Negatif dikey kenar boşluğu, saydam payı yerleşimden düşürür. Aksi hâlde
   satır kutusu 1,74em'e çıkar ve sarmalanan başlıklarda satır aralığı bozulur.
   ============================================================ */

.brandmark {
    display: inline-block;
    vertical-align: baseline;
    line-height: 0;
}

.brandmark .brandlogo {
    display: inline-block;
    height: 1.74em;
    width: auto;
    margin-block: -0.522em;   /* (1,74 − 0,696) / 2 */
    vertical-align: baseline;
}

/* Zemin koyuysa beyaz sürüm, değilse siyah sürüm görünür.
   Seçiciler .brandmark ile başlar: yukarıdaki ".brandmark .brandlogo"
   kuralı iki sınıflık ve tek sınıflık bir gizleme kuralını yenerdi. */
.brandmark .brandmark__on-deep  { display: none; }
.section--deep .brandmark .brandmark__on-light { display: none; }
.section--deep .brandmark .brandmark__on-deep  { display: inline-block; }