/* Bölüm: temel cazibe noktaları — "split" varyantı.

   "Kimler için?" bölümüyle AYNI dil: kart yok, kutu yok, 3B yok. Fark, görselin
   sağda durması ve maddelerin sıra numarası yerine tek bir onay işareti
   taşıması — bölümün iddiası "hazır geliyor", işaret bunu söyler. */

.bn-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(var(--sp-8), 4vw, var(--sp-16));
    align-items: center;
}

/* Artık fotoğraf değil, kompozisyon taşıyor: çerçeve ve gölge kompozisyonun
   kendi kartlarında; kapsayıcı şeffaf kalır. */
.bn-figure { margin: 0; }

.bn-figure .orbit { margin-inline: auto; }

.bn-intro .sc-head { margin-bottom: 0; }
.bn-intro .sc-head__title { max-width: 20ch; }
.bn-intro .sc-head__lead  { max-width: 50ch; }

/* ---------------------------------------------------------------- Liste */

.bn-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(var(--sp-5), 1.6vw, var(--sp-6)) clamp(var(--sp-6), 3vw, var(--sp-10));
    margin-top: clamp(var(--sp-8), 3vw, var(--sp-12));
    padding: 0;
    list-style: none;
}

.bn-item {
    position: relative;
    /* Izgara satırları en uzun maddeye göre yükseliyor; kısa metinlerin
       altında boşluk kalmasın diye üst dolgu ve satır aralığı sıkı tutuldu. */
    padding-top: var(--sp-4);
    border-top: 1px solid var(--ink-200);
    transition: border-color var(--dur) var(--ease);
}

/* Kısa marka aksanı — ızgara çerçevesinin işini tek çizgi yapar */
.bn-item__rule {
    position: absolute;
    top: -1px;
    left: 0;
    width: 28px;
    height: 2px;
    background: var(--grad-brand-soft);
    transition: width var(--dur-slow) var(--ease-out);
}

.bn-item__title {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--ink-900);
}

.bn-item__check {
    flex: none;
    margin-top: 3px;
    color: var(--brand-700);
    transition: color var(--dur) var(--ease);
}

.bn-item__text {
    margin-top: var(--sp-2);
    /* Sütun genişliği zaten sınır; 34ch kısıtı sağda kullanılmayan boşluk
       bırakıp satırları erken sardırıyordu. */
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--ink-600);
}

/* Hover: çizgi uzar, işaret koyulaşır. Kart kalkmaz, gölge oluşmaz. */
.bn-item:hover .bn-item__rule  { width: 56px; }
.bn-item:hover .bn-item__check { color: var(--brand-800); }
.bn-item:hover                 { border-top-color: var(--brand-200); }

/* Koyu zeminde */
.section--deep .bn-item        { border-top-color: rgba(255, 255, 255, 0.16); }
.section--deep .bn-item__title { color: #fff; }
.section--deep .bn-item__text  { color: var(--ink-300); }
.section--deep .bn-item__check { color: var(--brand-300); }

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

    /* Yığılmış düzende görsel yatay şeride döner */
    /* Görsel başlıktan sonra gelsin; metin önce okunur */
    .bn-figure { order: 2; }
    .bn-intro  { order: 1; }

    .bn-intro .sc-head__title { max-width: none; }

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

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

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

/* ============================================================
   "checks" varyantı — paket içeriği listesi

   Maddeler alt alta uzun bir liste yerine EN FAZLA DÖRT sütuna dizilir;
   böylece on iki maddelik bir paket içeriği bile tek ekrana sığar.
   Her hücrenin üstündeki ince çizgi, ızgaraya listenin satır hissini
   geri verir.
   ============================================================ */

.bn-checks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(var(--sp-5), 2.2vw, var(--sp-8));
    margin-top: clamp(var(--sp-6), 3vw, var(--sp-10));
    list-style: none;
}

.bn-check {
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
}

.bn-check__title {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: 1.35;
    color: var(--ink-900);
}

/* Onay işareti: turkuazdan indigoya marka gradyanı.
   Gradyanın açık ucu (brand-600) beyaza karşı 3,68:1 verir; işaret
   grafiği için gereken 3:1 eşiğini her iki uçta da geçer. */
.bn-check__mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    /* Metin satırının optik ortasına oturt (satır yüksekliği 1.35) */
    margin-top: 1px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-600) 0%, var(--indigo-600) 100%);
    color: #fff;
}

.bn-check__text {
    /* İşaret genişliği + boşluk kadar içeri: açıklama başlıkla hizalanır */
    margin-top: var(--sp-2);
    padding-left: calc(22px + var(--sp-3));
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--ink-600);
}

.section--deep .bn-check       { border-top-color: rgba(255, 255, 255, 0.16); }
.section--deep .bn-check__title { color: #fff; }
.section--deep .bn-check__text  { color: var(--ink-300); }

@media (max-width: 1080px) {
    .bn-checks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .bn-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .bn-checks { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
}

/* ---- Uzun listenin katlanan kuyruğu --------------------------------
   Platinum paketinde liste 38 madde; mobilde tek sütuna inince otuz
   sekiz başlık + açıklama alt alta geliyordu. İlk maddeler açık kalır,
   gerisi bu düğmenin arkasında durur. İçerik silinmez.

   <details> kullanıldığı için JS yok: klavye ve ekran okuyucu desteği
   tarayıcıdan geliyor, SSS akordiyonlarıyla aynı yöntem. */

.bn-more {
    margin-top: var(--sp-6);
}

.bn-more__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    border: 1px solid var(--brand-600);
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    /* brand-800: beyaz zeminde 6,2:1 — düğme metni eşiği rahat geçer */
    color: var(--brand-800);
    background: var(--brand-50);
    cursor: pointer;
    list-style: none;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

/* Webkit'in kendi üçgen işaretini kaldır; kendi ok ikonumuz var */
.bn-more__toggle::-webkit-details-marker { display: none; }

.bn-more__toggle:hover {
    background: var(--brand-100);
}

.bn-more__toggle:focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.bn-more__caret {
    transition: transform var(--dur-fast) var(--ease);
}

.bn-more[open] .bn-more__caret {
    transform: rotate(180deg);
}

/* Kuyruk açıldığında üstteki ızgarayla aynı ritmi sürdürsün:
   kendi üst boşluğunu düğmeden alır, çizgi düzeni bozulmaz. */
.bn-checks--more {
    margin-top: var(--sp-5);
}

.section--deep .bn-more__toggle {
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.section--deep .bn-more__toggle:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* ============================================================
   "figure" varyantı — solda başlık, sağda çerçevesiz çizim

   Çizimde kutu, kenarlık, gölge ve sabit oran YOK; köşelerinde iki rozet
   baloncuğu yüzer. Altta maddeler ikonlarıyla birlikte.
   ============================================================ */

.bn-fig {
    display: grid;
    /* Metin sütunu geniş: 22ch ölçüsünde başlık beş satıra bölünüyordu. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(var(--sp-8), 5vw, var(--sp-16));
    align-items: center;
}

.bn-fig__text .sc-head { margin-bottom: 0; }
.bn-fig__text .sc-head__title { max-width: 16ch; }
.bn-fig__text .sc-head__lead  { max-width: 42ch; }

/* --- Çizim --- */

.bn-fig__art {
    position: relative;
    /* Rozetler kenarlardan taşıyor; taşan kısım kırpılmasın */
    padding: var(--sp-6) var(--sp-5);
}

.bn-fig__art img {
    display: block;
    width: 100%;
    max-width: 460px;
    /* YÜKSEKLİK SINIRI: dikey bir görsel bölümü ikiye katlıyordu. Kaynak ne
       kadar uzun olursa olsun bu bölüm 380 px'ten fazla uzamaz. */
    max-height: 380px;
    height: auto;
    object-fit: contain;
    margin-inline: auto;
    /* Çerçeve yok: kenarlık, köşe, gölge, zemin bilinçli olarak yok.
       Beyaz zeminli görsel bölümün zeminine karışsın diye multiply. */
    mix-blend-mode: multiply;
}

/* --- Rozet baloncukları --- */

.bn-badge {
    position: absolute;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
    text-align: left;
    /* Baloncuk uzun bir cümleye dönüşmesin */
    max-width: 15rem;
}

/* Biri sol üste, biri sağ alta — çizimin iki karşıt köşesi */
.bn-badge--1 { top: 0; left: 0; }
.bn-badge--2 { bottom: 0; right: 0; }

.bn-badge__value {
    display: block;
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    letter-spacing: var(--ls-heading);
    color: var(--ink-900);
}

.bn-badge__label {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs);
    line-height: 1.45;
    color: var(--ink-600);
}

/* --- İkonlu maddeler --- */

.bn-figpoints {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: clamp(var(--sp-10), 4vw, var(--sp-16));
    border-top: 1px solid var(--border);
    list-style: none;
}

.bn-figpoint {
    padding: clamp(var(--sp-6), 2.5vw, var(--sp-8)) clamp(var(--sp-5), 2vw, var(--sp-8));
    border-bottom: 1px solid var(--border);
}

.bn-figpoint + .bn-figpoint { border-left: 1px solid var(--border); }

/* İlk sütunun sol dolgusu yok; başlık bloğuyla aynı hizada başlasın */
.bn-figpoint:first-child { padding-left: 0; }

.bn-figpoint__ico {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: var(--sp-4);
    border: 1.5px solid var(--indigo-500);
    border-radius: var(--r-md);
    color: var(--indigo-600);
}

.bn-figpoint__title {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    line-height: 1.35;
    color: var(--ink-900);
}

.bn-figpoint__text {
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--ink-600);
}

.section--deep .bn-fig__art img      { mix-blend-mode: normal; }
.section--deep .bn-figpoint__title   { color: #fff; }
.section--deep .bn-figpoint__text    { color: var(--ink-300); }
.section--deep .bn-figpoint,
.section--deep .bn-figpoints         { border-color: rgba(255, 255, 255, 0.16); }

@media (max-width: 900px) {
    .bn-fig { grid-template-columns: minmax(0, 1fr); }

    /* Yığılmış düzende çizim başlıktan sonra gelir; önce vaadi okur */
    .bn-fig__text { order: 0; }
    .bn-fig__art  { order: 1; }

    .bn-fig__text .sc-head,
    .bn-fig__text .sc-head__lead { max-width: none; }

    .bn-figpoints { grid-template-columns: minmax(0, 1fr); }
    .bn-figpoint  { padding-inline: 0; }
    .bn-figpoint + .bn-figpoint { border-left: 0; }
}

/* Rozetler dar ekranda çizimin üstüne binmesin */
@media (max-width: 520px) {
    .bn-badge { position: static; max-width: none; margin-top: var(--sp-4); box-shadow: none; }
    .bn-fig__art { padding: 0; }
}