/* Approved kitap-paylasim-source.zip composition. Photo crop and ratios preserved. */
.book-exchange {
  container: bookpaths / inline-size;
  display: flow-root;
  width: 100%;
  max-width: 1536px;
  margin-inline: auto;
  background: #fff;
  color: #121534;
  font-family: var(--kk-heading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-margin-top: 20px;
}
.book-exchange *, .book-exchange *::before, .book-exchange *::after { box-sizing: border-box; }
.book-exchange ::selection { background: #c4d7fa; color: #10153b; }
.book-exchange button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: text; }
.book-exchange button:focus-visible { outline: 3px solid #294fac; outline-offset: 6px; }
.exchange-spread {
  position: relative;
  display: grid;
  grid-template-columns: 733fr 735fr;
  aspect-ratio: 1468 / 958;
  margin: 2.1484375cqw 2.2135416667cqw;
  overflow: hidden;
  isolation: isolate;
}
.exchange-spread::after {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 49.931880109%;
  width: 1px;
  background: #626981;
  content: "";
  pointer-events: none;
}
.exchange-panel {
  position: relative;
  min-width: 0;
  background: linear-gradient(122deg, #faf6f2 0%, #f8f4f2 48%, #faf7f5 100%);
  cursor: pointer;
}
.exchange-panel--request { background: linear-gradient(112deg, #eff5fd 0%, #edf4fc 47%, #e7eef8 100%); }
.exchange-copy {
  position: relative;
  z-index: 2;
  padding: 4.6875cqw 2.6041666667cqw 0 5.6640625cqw;
  text-align: left;
  cursor: text;
}
.exchange-panel--request .exchange-copy { padding-left: 6.1197916667cqw; }
.exchange-kicker {
  margin: 0;
  color: #111637;
  font-family: var(--kk-heading);
  font-size: 1.4322916667cqw;
  font-weight: 650;
  line-height: 1.2727272727;
  letter-spacing: .2604166667cqw;
}
.exchange-copy h2 {
  margin: .9114583333cqw 0 0;
  color: #121534;
  font-family: var(--kk-heading);
  font-size: 3.90625cqw;
  font-weight: 600;
  line-height: 1.1666666667;
  letter-spacing: -.0651041667cqw;
}
.exchange-panel--request .exchange-copy h2 { letter-spacing: -.0390625cqw; }
.exchange-description {
  margin: 1.0416666667cqw 0 0;
  color: #515569;
  font-family: var(--kk-copy);
  font-size: 1.7903645833cqw;
  font-weight: 500;
  line-height: 1.3818181818;
  letter-spacing: 0;
}
.exchange-description span { display: block; }
.exchange-panel--donate .exchange-description span:last-child { letter-spacing: -.0390625cqw; }

/* Image source is unchanged. CSS exposes only its text-free photograph band. */
.exchange-photo {
  position: absolute;
  z-index: 1;
  top: 29.9582463466%;
  left: 0;
  width: 100%;
  aspect-ratio: 1468 / 546;
  background-image: url("../img/kk/exchange-20261112/book-handoff.webp");
  background-size: 104.6321525886% auto;
  background-position: center 66.9456066946%;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 98%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 98%, transparent 100%);
  pointer-events: none;
}
.exchange-mobile-photo { display: none; }
.exchange-actions {
  position: absolute;
  z-index: 2;
  bottom: 3.3854166667cqw;
  left: 4.1666666667cqw;
  right: 4.1666666667cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.3020833333cqw;
  height: 3.90625cqw;
}
.exchange-panel--request .exchange-actions { left: 4.1015625cqw; right: 3.90625cqw; }
.exchange-primary {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5625cqw;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #0c1041;
  font-family: var(--kk-copy);
  font-size: 2.1484375cqw;
  font-weight: 500;
  line-height: 1.2121212121;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
}
.exchange-circle {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3.90625cqw;
  height: 3.90625cqw;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: #294fac;
  color: #fff;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.exchange-circle svg { display: block; width: 2.0833333333cqw; height: 2.0833333333cqw; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.exchange-process {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 1.0416666667cqw;
  width: 12.5651041667cqw;
  height: 3.1901041667cqw;
  min-height: 44px;
  padding: 0 1.2369791667cqw;
  border: 1px solid #282d59;
  border-radius: .5859375cqw;
  background: transparent;
  color: #10143c;
  font-family: var(--kk-copy);
  font-size: 1.3997395833cqw;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.exchange-panel--request .exchange-process { width: 12.7604166667cqw; }
.exchange-process svg { display: block; width: .78125cqw; height: 1.3020833333cqw; flex: 0 0 auto; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
  .exchange-primary:hover .exchange-circle { background: #193b90; box-shadow: 0 0 0 4px #294fac12; }
  .exchange-process:hover { background: #ffffff70; border-color: #294fac; }
}

/* Each path becomes a complete, readable panel on narrow hosts.
   Its respective half of the original photograph remains the image asset. */
@container bookpaths (max-width: 900px) {
  .exchange-spread { display: grid; grid-template-columns: 1fr; aspect-ratio: auto; margin: 16px; }
  .exchange-spread::after, .exchange-photo { display: none; }
  .exchange-panel { padding: 32px 0 28px; }
  .exchange-panel--request { border-top: 1px solid #b7c3d4; }
  .exchange-copy, .exchange-panel--request .exchange-copy { padding: 0 28px; }
  .exchange-kicker { font-size: 12px; line-height: 1.5; letter-spacing: 2.4px; }
  .exchange-copy h2, .exchange-panel--request .exchange-copy h2 { margin-top: 14px; font-size: clamp(31px, 8.2cqw, 42px); line-height: 1.15; letter-spacing: -.8px; }
  .exchange-description { margin-top: 16px; font-size: 18px; line-height: 1.5; }
  .exchange-panel--donate .exchange-description span:last-child { letter-spacing: -.25px; }
  .exchange-mobile-photo {
    display: block;
    width: 100%;
    aspect-ratio: 734 / 546;
    margin: 24px 0 20px;
    background-image: url("../img/kk/exchange-20261112/book-handoff.webp");
    background-size: 209.2643051771% auto;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 98%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 98%, transparent);
  }
  .exchange-mobile-photo--donate { background-position: 4.2394014963% 66.9456066946%; }
  .exchange-mobile-photo--request { background-position: 95.7605985037% 66.9456066946%; }
  .exchange-actions, .exchange-panel--request .exchange-actions { position: relative; bottom: auto; left: auto; right: auto; height: auto; margin: 0 24px; gap: 16px; flex-wrap: wrap; }
  .exchange-primary { gap: 12px; font-size: 21px; line-height: 1.3; }
  .exchange-circle { width: 44px; height: 44px; }
  .exchange-circle svg { width: 25px; height: 25px; }
  .exchange-process, .exchange-panel--request .exchange-process { width: 136px; height: 44px; padding: 0 15px; border-radius: 8px; font-size: 16px; gap: 10px; }
  .exchange-process svg { width: 10px; height: 16px; }
}
@container bookpaths (max-width: 420px) {
  .exchange-copy, .exchange-panel--request .exchange-copy { padding-inline: 24px; }
  .exchange-description { font-size: 17px; }
  .exchange-actions, .exchange-panel--request .exchange-actions { display: grid; grid-template-columns: 1fr; gap: 18px; }
  .exchange-process, .exchange-panel--request .exchange-process { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .book-exchange *, .book-exchange *::before, .book-exchange *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Integrate the approved component with real routes and the existing introduction. */
.book-exchange {max-width:1280px}
.book-exchange:focus {outline:none}
.book-exchange:focus-visible {outline:3px solid #294fac;outline-offset:-3px}
.book-exchange a {text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.book-exchange a:focus-visible {outline:3px solid #294fac;outline-offset:6px}
.exchange-panel-hit {position:absolute;inset:0;z-index:2}
.exchange-copy,.exchange-actions {z-index:3}
.exchange-copy {pointer-events:auto}
@media (min-width:1000px) {
  .book-exchange {width:min(100%,max(940px,calc((100svh - 48px)*1.5)))}
}

/* Primary actions grow without shifting the surrounding layout. */
.exchange-primary{min-height:44px;transform-origin:left center;transition:transform .22s cubic-bezier(.22,1,.36,1)}
@media (hover:hover) and (pointer:fine){.exchange-primary:hover{transform:scale(1.07)}}
.exchange-primary:focus-visible{transform:scale(1.04)}
.exchange-primary:active{transform:scale(1.025)}

/* Both book paths stay beside each other, including on a phone. */
@container bookpaths (max-width:900px){
 .exchange-spread{--exchange-top:24px;--exchange-copy-height:170px;grid-template-columns:733fr 735fr;aspect-ratio:auto;margin:16px 12px}
 .exchange-spread::after{display:block}
 .exchange-panel{display:flex;flex-direction:column;padding:var(--exchange-top) 0 22px}
 .exchange-panel--request{border-top:0}
 .exchange-copy,.exchange-panel--request .exchange-copy{flex:0 0 var(--exchange-copy-height);height:var(--exchange-copy-height);padding:0 20px}
 .exchange-kicker{font-size:12px;letter-spacing:2px}
 .exchange-copy h2,.exchange-panel--request .exchange-copy h2{font-size:clamp(25px,3.9cqw,35px);line-height:1.15;letter-spacing:-.6px;margin-top:12px}
 .exchange-description{font-size:16px;line-height:1.5;margin-top:14px}
 .exchange-mobile-photo{flex:none;display:block;width:100%;aspect-ratio:734/546;margin:0 0 16px;background-image:none;-webkit-mask-image:none;mask-image:none}
 .exchange-photo{display:block;top:calc(var(--exchange-top) + var(--exchange-copy-height))}
 .exchange-actions,.exchange-panel--request .exchange-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px;position:relative;inset:auto;height:auto;margin:0 16px}
 .exchange-primary{gap:10px;font-size:clamp(16px,2.9cqw,21px);line-height:1.3;min-height:44px}
 .exchange-circle{width:36px;height:36px;min-width:36px;min-height:36px}
 .exchange-circle svg{width:22px;height:22px}
 .exchange-process,.exchange-panel--request .exchange-process{width:100%;min-height:44px;height:44px;padding:0 12px;font-size:15px;gap:8px;border-radius:7px}
 .exchange-process svg{width:9px;height:14px}
}
@container bookpaths (max-width:600px){
 .exchange-spread{--exchange-top:22px;--exchange-copy-height:190px}
 .exchange-copy,.exchange-panel--request .exchange-copy{padding-inline:14px}
 .exchange-kicker{font-size:10px;letter-spacing:1.7px;line-height:1.4}
 .exchange-copy h2,.exchange-panel--request .exchange-copy h2{font-size:clamp(22px,6cqw,28px);line-height:1.12;margin-top:10px}
 .exchange-copy h2 span{display:block}
 .exchange-description{font-size:clamp(13px,3.45cqw,15px);line-height:1.5;margin-top:12px}
 .exchange-panel--donate .exchange-description span:last-child{letter-spacing:0}
 .exchange-actions,.exchange-panel--request .exchange-actions{margin-inline:12px}
 .exchange-primary{font-size:clamp(14px,3.85cqw,17px);gap:6px}
 .exchange-circle{width:clamp(30px,8.3cqw,36px);height:clamp(30px,8.3cqw,36px);min-width:0;min-height:0}
 .exchange-circle svg{width:20px;height:20px}
 .exchange-process,.exchange-panel--request .exchange-process{font-size:12px;padding-inline:9px;gap:5px}
}
@media (prefers-reduced-motion:reduce){.exchange-primary:hover,.exchange-primary:focus-visible,.exchange-primary:active{transform:none}}