/* Buque Collection site sayfaları (ana sayfa, Koleksiyon, Yaklaşım). Kitabın (kitap-buque.css) görsel dilini okura dönük sırayla kurar.
   Kaynak plan: tayf-web/_devir/2026-10-27-marka-siteleri/buque/PLAN.md. Renk, yazı ve süre değerleri marka.css değişkenlerinden gelir.
   Yalnız transform ve opacity hareket eder; .motion yoksa (betik yok ya da azaltılmış hareket) her kapak açık, her metin yerinde durur. */
:root {
  --f-ekran: var(--f-logo);
  --kapak: color-mix(in srgb, var(--vurgu) 17%, var(--zemin));
  --bz: color-mix(in srgb, var(--vurgu) 8%, var(--zemin));
  --cizgi: color-mix(in srgb, var(--vurgu) 42%, var(--zemin));
  --soluk: color-mix(in srgb, var(--c-murekkep) 86%, var(--zemin));
  --bosluk: clamp(72px, 12vh, 140px);
}
* { font-synthesis: none; }
body { font-weight: 300; letter-spacing: .004em; color: var(--c-murekkep); }
a { text-decoration-color: var(--vurgu); }
::selection { background: color-mix(in srgb, var(--vurgu) 38%, var(--zemin)); }
:focus-visible { outline: 2px solid var(--metin); outline-offset: 3px; border-radius: 0; }

/* düğme: kare köşe, bakır kenar (kitapla aynı) */
.tw-btn { border: 1px solid var(--vurgu); border-radius: 0; padding: 0 26px; font: 400 12.5px/1 var(--f-metin); letter-spacing: .16em; text-transform: uppercase; color: var(--metin); }
.tw-btn:hover { background: var(--kapak); color: var(--metin); }
.tw-btn.dolu { background: var(--vurgu); color: var(--metin); border-color: var(--vurgu); }
.tw-btn.dolu:hover { background: color-mix(in srgb, var(--vurgu) 80%, var(--metin)); color: var(--metin); }

/* üst çubuk */
.ts-ust { border-bottom: 1px solid var(--cizgi); }
.ts-menu a { border-radius: 0; padding: 0 14px; font: 400 12.5px/1 var(--f-metin); letter-spacing: .16em; text-transform: uppercase; color: var(--metin); }
.ts-menu a:hover { background: var(--kapak); }
.ts-menu a[aria-current="page"] { background: none; color: var(--metin); box-shadow: inset 0 -1px 0 var(--vurgu); }

/* altbilgi: açık zemin, mürekkep yazı, üstte bakır çizgi (aile bandı marka zemininde durur) */
.ts-alt { background: var(--zemin); color: var(--c-murekkep); border-top: 1px solid var(--vurgu); }
.ts-alt-b { font: 600 12px/1.3 var(--f-baslik); letter-spacing: .18em; color: var(--c-kakao); opacity: 1; }
.ts-alt-marka p { opacity: 1; }
.ts-alt-not { border-top-color: var(--cizgi); opacity: 1; color: var(--c-kakao); }
.ts-alt nav a { text-decoration-color: var(--vurgu); }

/* ortak yazı rolleri */
.ts-main { color: var(--c-murekkep); }
.bq-et { font: 600 12px/1.3 var(--f-baslik); letter-spacing: .24em; text-transform: uppercase; color: var(--c-kakao); }
.ts-h1, .ts-h2 { font-family: var(--f-ekran); font-weight: 300; color: var(--metin); letter-spacing: -.004em; }
.bq-h1 { font-size: clamp(42px, 6.2vw, 88px); line-height: 1.03; margin-top: 14px; }
.bq-h2 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.08; }
.bq-h3 { font-size: clamp(25px, 2.7vw, 36px); line-height: 1.18; }
.bq-p { max-width: 58ch; margin-top: 14px; }
.bq-giris { max-width: 40em; margin-top: 18px; font-size: clamp(17px, 1.4vw, 19px); }
.bq-bas { padding-top: clamp(56px, 10vh, 104px); }
.bq-grup { margin-top: var(--bosluk); }
.bq-ust { display: grid; gap: 4px; margin-bottom: clamp(28px, 5vh, 48px); max-width: 44em; }
.bq-bolum { padding: var(--bosluk) 0; }
.bq-bolum.alt { background: var(--bz); }
.bq-bolum .tw-btn { margin-top: 28px; }
.bq-kanal { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.bq-kanal .tw-btn { margin-top: 0; }
.bq-kitap-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 32px; }
.bq-kitap-satir .tw-btn { margin-top: 0; }
.bq-kapanis { display: grid; gap: 22px; justify-items: start; margin: var(--bosluk) auto; }
.bq-kapanis .bq-kanal { margin-top: 0; }
.bq-kapanis .tw-btn + .tw-btn { margin-left: 10px; }

/* ince bakır çizgi: bir kez açılır */
.bq-cizgi { display: block; width: 56px; height: 1px; background: var(--vurgu); transform-origin: 0 50%; }
.motion .bq-cizgi.rv { opacity: 1; transform: scaleX(0); transition: transform var(--sure-orta) var(--egri-ana); }
.motion .bq-cizgi.rv.in { transform: scaleX(1); }
.bq-cizgi-orta { margin: clamp(18px, 3vh, 30px) auto; transform-origin: 50% 50%; }

/* ---------- kayarak açılan kare: fotoğraf + krem kapak ---------- */
.bq-kare { position: relative; margin: 0; overflow: hidden; background: var(--kapak); }
.bq-kare img { display: block; width: 100%; height: auto; }
.bq-kapak { position: absolute; inset: 0; z-index: 2; pointer-events: none; will-change: transform; background: var(--kapak);
  transform: translate3d(calc(var(--yon, 1) * 101%), 0, 0);
  transition: transform var(--sure-uzun) var(--egri-yavas) calc(var(--i, 0) * 190ms); }
.bq-kapak::after { content: ""; position: absolute; inset: clamp(9px, 1.4vw, 16px); border: 1px solid color-mix(in srgb, var(--vurgu) 72%, transparent); }
.motion .bq-kare:not(.acik) .bq-kapak { transform: none; }
.bq-izg img { aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- ana sayfa: açılış ---------- */
.bq-sa { padding: clamp(32px, 6vh, 72px) 0 clamp(48px, 8vh, 96px); }
.bq-sa-ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 88px); align-items: center; min-height: calc(100svh - 190px); }
.bq-sa-yazi { display: grid; gap: clamp(20px, 3.4vh, 32px); justify-items: start; }
.bq-sa marka-logo { width: min(100%, 430px); }
.bq-sa-cumle { font: 300 clamp(20px, 1.9vw, 27px)/1.42 var(--f-ekran); max-width: 19em; color: var(--c-murekkep); }
.bq-plaka { display: inline-block; padding: 12px 22px; border: 1px solid var(--vurgu); font: 600 12px/1.3 var(--f-baslik); letter-spacing: .24em; text-transform: uppercase; color: var(--c-kakao); }
.bq-sa-fig { justify-self: end; width: min(100%, 440px, calc((100svh - 200px) * .6667)); }
.bq-sa-kare { position: relative; overflow: hidden; background: var(--kapak); }
.bq-sa-kare img { display: block; width: 100%; height: auto; }
.bq-sa-fig figcaption { margin-top: 14px; }
.bq-yari { display: none; }
.motion .bq-yari { display: block; position: absolute; top: 0; bottom: 0; width: 50.6%; z-index: 2; pointer-events: none; will-change: transform; background: var(--kapak);
  animation: bq-yari-ac var(--sure-uzun) var(--egri-yavas) 1.9s both; }
.motion .bq-yari::after { content: ""; position: absolute; inset: clamp(9px, 1.4vw, 16px); border: 1px solid color-mix(in srgb, var(--vurgu) 72%, transparent); }
.bq-yari.sol { left: 0; --yon: -1; }
.bq-yari.sag { right: 0; --yon: 1; }
@keyframes bq-yari-ac { from { transform: none; } to { transform: translate3d(calc(var(--yon) * 101%), 0, 0); } }

/* kök cümlesi */
.bq-kok { display: grid; justify-items: center; gap: 8px; padding: var(--bosluk) 0; text-align: center; }
.bq-kok-c { font: 300 clamp(32px, 4.7vw, 70px)/1.12 var(--f-ekran); letter-spacing: -.004em; max-width: 15em; color: var(--metin); }
.bq-kok .tw-btn { margin-top: 18px; }

/* üç kare */
.bq-uc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 22px); align-items: start; margin-bottom: 8px; }
.bq-uc .bq-kare:nth-child(2) { margin-top: clamp(20px, 5vw, 64px); }

/* ---------- Koleksiyon ---------- */
.bq-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 22px); align-items: start; }
.bq-izgara .bq-izg:nth-child(3n + 2) { margin-top: clamp(20px, 5vw, 64px); }
.bq-hikaye { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: center; margin-top: clamp(56px, 10vh, 112px); }
.bq-hikaye:first-of-type { margin-top: 0; }
.bq-hikaye.ters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bq-hikaye.ters .bq-hk-kare { order: 2; }
.bq-hk-yazi { display: grid; gap: 4px; max-width: 30em; align-content: center; }
.bq-hk-yazi .bq-p { max-width: 32em; margin-top: 12px; }

/* ---------- Yaklaşım ---------- */
.bq-yk { padding-bottom: var(--bosluk); }
.bq-yk-ic { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.bq-yk-yazi { display: grid; gap: 4px; }
.bq-yk-yazi .bq-kok-c { margin-top: clamp(24px, 4vh, 44px); }
.bq-yk-fig { margin: 0; justify-self: end; width: min(100%, 300px); }
.bq-yk-fig figcaption { margin-top: 14px; }
.bq-cift-k { display: grid; justify-items: center; text-align: center; }
.bq-cift { font: 300 clamp(32px, 4.7vw, 66px)/1.1 var(--f-ekran); letter-spacing: -.004em; color: var(--metin); }
.bq-cift-p { margin-top: clamp(28px, 5vh, 48px); text-align: left; }
.bq-ilkeler { display: grid; gap: 0; margin-top: 24px; }
.bq-ilkeler li { padding: 28px 0; border-top: 1px solid var(--cizgi); display: grid; gap: 4px; max-width: 44em; }

/* ---------- sanat düzeltmeleri ---------- */
.ts-logo { width: 124px; padding: 14px 0; }
.ts-alt .tw-aile { margin-top: 32px; }
.ts-alt .tw-aile-ic { width: min(1200px, 100% - 2 * var(--kenar)); }
.bq-bolum + .bq-kapanis { margin-top: 0; }

/* ---------- dar ekran ---------- */
@media (max-width: 900px) {
  .bq-sa-ic { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 36px; }
  .bq-sa marka-logo { width: min(78vw, 420px); }
  .bq-sa-fig { justify-self: start; width: 78vw; max-width: 440px; }
  .bq-kok { justify-items: start; text-align: left; }
  .bq-kok-c { font-size: clamp(30px, 8.4vw, 34px); }
  .bq-yk-ic { grid-template-columns: minmax(0, 1fr); }
  .bq-yk-fig { justify-self: start; width: min(62vw, 260px); }
  .bq-hikaye, .bq-hikaye.ters { grid-template-columns: minmax(0, 1fr); }
  .bq-hikaye.ters .bq-hk-kare { order: 0; }
  .bq-hk-kare { max-width: 380px; }
  .bq-cift-k { justify-items: start; text-align: left; }
  .bq-cizgi-orta { margin-left: 0; }
}
@media (max-width: 760px) {
  .ts-logo { width: 116px; padding: 10px 0; }
  .ts-menu a { padding: 0 7px; font-size: 12px; letter-spacing: .08em; }
  .ts-menu ul { gap: 0 6px; }
  .bq-plaka { display: block; width: 100%; text-align: center; letter-spacing: .14em; padding: 12px 10px; }
  .bq-kapanis .tw-btn + .tw-btn { margin-left: 0; margin-top: 10px; }
}
@media (max-width: 560px) {
  .bq-uc, .bq-izgara { gap: 8px; }
  .bq-uc .bq-kare:nth-child(2), .bq-izgara .bq-izg:nth-child(3n + 2) { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .bq-kapak { transition-duration: .001s !important; }
  .bq-yari { display: none !important; animation: none !important; }
}