/* KAFAdan basit sayfa düzeni (markanın %30'u). Açık tema; koyu kırmızı levha logonun zemini.
   Hareket: yalnız transform ve opacity. clip-path yalnız sabit biçim (geçiş yok). */
.bs { --levha: var(--vurgu); grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); grid-template-rows: 1fr auto auto 1fr; justify-items: start; align-content: stretch; gap: 0; padding: 0; text-align: left; }
.bs::before { content: ""; justify-self: stretch; grid-column: 1; grid-row: 1 / 5; background: var(--levha); clip-path: polygon(0 0, 100% 0, calc(100% - 7vw) 100%, 0 100%); will-change: transform; }
.motion .bs::before { animation: kf-levha-gir .52s cubic-bezier(.16, 1, .3, 1) backwards; }
@keyframes kf-levha-gir { from { transform: translateX(-102%); } to { transform: none; } }

.bs marka-logo { position: relative; z-index: 1; grid-column: 1; grid-row: 1 / 5; place-self: center; width: min(30vw, 56svh); margin-right: 3vw; transition: transform .35s cubic-bezier(.2,.9,.2,1); }
.bs marka-logo:hover { transform: scale(1.03) rotate(-1.5deg); }

.bs-cumle { grid-column: 2; grid-row: 2; align-self: end; max-width: clamp(16em, 28vw, 22em); margin: 0 var(--kenar) 0 clamp(8px, 2vw, 40px); padding-bottom: 28px; font: 700 clamp(28px, 3.6vw, 54px)/1.12 var(--f-baslik); text-transform: uppercase; letter-spacing: .005em; position: relative; }
.bs-cumle::after { content: ""; position: absolute; left: 0; bottom: 0; width: 96px; height: 10px; background: var(--c-sari); transform: skewX(-24deg); transform-origin: 0 100%; }
.motion .bs-cumle::after { animation: kf-sari-cizgi .45s cubic-bezier(.2,.9,.2,1) backwards 480ms; }
@keyframes kf-sari-cizgi { from { transform: scaleX(0) skewX(-24deg); opacity: 0; } to { transform: scaleX(1) skewX(-24deg); opacity: 1; } }

.bs-baglar { grid-column: 2; grid-row: 3; align-self: start; margin: 28px var(--kenar) 0 clamp(8px, 2vw, 40px); justify-content: flex-start; gap: 12px; }
.bs-baglar a { border-radius: 0; border-width: 2px; padding: 0 26px; font: 700 15px/1 var(--f-baslik); text-transform: uppercase; letter-spacing: .06em; transform: skewX(-10deg); transition: transform .2s cubic-bezier(.2,.9,.2,1), box-shadow .2s cubic-bezier(.2,.9,.2,1), background .2s, border-color .2s, color .2s; box-shadow: 0 0 0 transparent; }
.bs-baglar a:hover { background: var(--vurgu); border-color: var(--vurgu); color: #fff; transform: skewX(-10deg) translate3d(-3px, -3px, 0); box-shadow: 4px 4px 0 var(--metin); }
.bs-baglar a:active { transform: skewX(-10deg) translate3d(0, 0, 0); box-shadow: 0 0 0 transparent; }
.bs-baglar a.dolu { background: var(--metin); }
.bs-baglar a.dolu:hover { background: var(--vurgu); border-color: var(--vurgu); }
.bs-baglar a[href*="kitap"] { background: var(--c-sari); color: #151314; border-color: var(--c-sari); }
.bs-baglar a[href*="kitap"]:hover { background: #ffffff; border-color: #ffffff; color: #151314; transform: skewX(-10deg) translate3d(-3px, -3px, 0); box-shadow: 5px 5px 0 var(--vurgu); }
.bs-baglar a[href*="kitap"]:active { transform: skewX(-10deg) translate3d(0, 0, 0); box-shadow: 0 0 0 transparent; }

@media (max-width: 820px) {
  .bs { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; min-height: 100svh; align-content: start; }
  .bs::before { grid-column: 1; grid-row: 1; height: clamp(250px, 42svh, 350px); justify-self: stretch; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 6vw)); }
  .bs marka-logo { grid-column: 1; grid-row: 1; width: min(56vw, 35svh); margin: 0; }
  .bs-cumle { grid-column: 1; grid-row: 2; margin: 24px var(--kenar) 0; font-size: clamp(22px, 6.2vw, 32px); padding-bottom: 20px; }
  .bs-cumle::after { width: 72px; height: 8px; }
  .bs-baglar { grid-column: 1; grid-row: 3; margin: 18px var(--kenar) 28px; gap: 10px; }
  .bs-baglar a { padding: 0 20px; font-size: 14px; }
}

/* açılışta logo, harfler tek tek kurulana dek gizli (imza.js kf-hazir ekler); betik yoksa ya da hareket kapalıysa görünür */
.js.motion [data-acilis] marka-logo > svg { visibility: hidden; }
.js.motion [data-acilis] marka-logo.kf-hazir > svg { visibility: visible; }