// pastel-posters.jsx — Türk ve Dünya Bağımsız Başyapıtları için pastel posterler
const P_PAPER = '#F8F0DA';
const P_INK   = '#2B2018';
const P_INK2  = '#5C4A3D';
const P_ROSE  = '#E8B5AC';
const P_SUN   = '#EBC76F';
const P_SKY   = '#A8BFD2';
const P_SAGE  = '#A8BC9F';
const P_PLUM  = '#C8A9C5';
const P_CORAL = '#E29384';
const P_CREAM = '#E6CFA1';
const P_RUST  = '#9E5641';
const P_DEEP  = '#3A2E26';

const pstamp = (no, c) => (
  <text x="8" y="13" fontFamily="JetBrains Mono, monospace" fontSize="6.5" fill={c} opacity="0.55" letterSpacing="1.2">{no}</text>
);
const pcorner = (text, x, y, c, op=0.5) => (
  <text x={x} y={y} fontFamily="JetBrains Mono, monospace" fontSize="6.2" fill={c} opacity={op} letterSpacing="1.2">{text}</text>
);

// Mobilde radyal-gradyan vinyet kapalı: kayan dev katmanda her döşemede
// gradyan rasterı (25+ poster) Android'de ana takılma kaynağı. Görsel fark
// ihmal edilebilir (kenarlarda çok hafif koyulaşma).
const PWrap = ({ bg, fg, children, w, h, no, label, label2 }) => {
  const lite = !!window.IS_TOUCH;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width={w} height={h}
      style={{ display:'block', background: bg, color: fg, borderRadius: 2 }}>
      {!lite && (
        <defs>
          <radialGradient id={`v-${w}-${h}-${(bg||'').slice(1)}`} cx="50%" cy="50%" r="75%">
            <stop offset="0%"  stopColor={bg} stopOpacity="0"/>
            <stop offset="100%" stopColor="#2B2018" stopOpacity="0.10"/>
          </radialGradient>
        </defs>
      )}
      {children}
      {!lite && (
        <rect width={w} height={h} fill={`url(#v-${w}-${h}-${(bg||'').slice(1)})`} pointerEvents="none"/>
      )}
      {no    && pstamp(no, fg)}
      {label && pcorner(label,  8,    h-6, fg)}
      {label2&& pcorner(label2, w-46, h-6, fg)}
    </svg>
  );
};

// ── Susuz Yaz: kuru sarı tahıl + tek bir mercan su damlası ──
const P_Syz = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_SUN} fg={P_DEEP} no={no} label="TR·1963" label2="1s30d">
    {/* sıcak yatay ufuk çizgisi */}
    <line x1="0" y1={h*0.72} x2={w} y2={h*0.72} stroke={P_DEEP} strokeWidth="0.45" opacity="0.7"/>
    {/* tahıl başakları */}
    {Array.from({length:14}).map((_,i)=>{
      const x = w*0.1 + i*(w*0.06);
      const sway = Math.sin(i*0.9)*1.6;
      return (
        <g key={i} transform={`translate(${x} ${h*0.72})`}>
          <line x1="0" y1="0" x2={sway*0.4} y2={-h*0.18} stroke={P_DEEP} strokeWidth="0.5"/>
          <ellipse cx={sway*0.4} cy={-h*0.18} rx="1.2" ry="2.6" fill={P_DEEP} opacity={0.7+(i%3)*0.1}/>
        </g>
      );
    })}
    {/* tek bir mercan su damlası */}
    <path d={`M ${w*0.5} ${h*0.32} Q ${w*0.46} ${h*0.42} ${w*0.5} ${h*0.46} Q ${w*0.54} ${h*0.42} ${w*0.5} ${h*0.32} Z`} fill={P_CORAL}/>
    <text x={w*0.5} y={h*0.92} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.13} fill={P_DEEP} letterSpacing="1">erksan</text>
  </PWrap>
);

// ── Kış Uykusu: Kapadokya peri bacası + buzdağı yansıması ──
const P_Kis = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_SKY} fg={P_DEEP} no={no} label="TR·2014" label2="3s16d">
    {/* peri bacaları */}
    <path d={`M ${w*0.18} ${h*0.78} Q ${w*0.22} ${h*0.4} ${w*0.28} ${h*0.78} Z`} fill={P_DEEP} opacity="0.85"/>
    <path d={`M ${w*0.42} ${h*0.78} Q ${w*0.5} ${h*0.28} ${w*0.58} ${h*0.78} Z`} fill={P_DEEP}/>
    <path d={`M ${w*0.7} ${h*0.78} Q ${w*0.76} ${h*0.5} ${w*0.82} ${h*0.78} Z`} fill={P_DEEP} opacity="0.7"/>
    {/* zemin */}
    <rect x="0" y={h*0.78} width={w} height={h*0.22} fill={P_PAPER} opacity="0.65"/>
    {/* kar zerreleri */}
    {Array.from({length:22}).map((_,i)=>{
      const x = (Math.sin(i*3.7)*0.5+0.5)*w;
      const y = (i*0.04)*h*0.7 + h*0.06;
      return <circle key={i} cx={x} cy={y} r="0.9" fill={P_PAPER} opacity="0.7"/>;
    })}
    <text x={w*0.5} y={h*0.94} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.1} fill={P_DEEP}>ceylan</text>
  </PWrap>
);

// ── Tabutta Rövaşata: kış sokağı, otomobil silüeti, far ışığı ──
const P_Tab = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_SAGE} fg={P_DEEP} no={no} label="TR·1996" label2="1s15d">
    {/* yatay yağmur çizgileri */}
    {Array.from({length:8}).map((_,i)=>(
      <line key={i} x1="0" y1={h*(0.08+i*0.05)} x2={w} y2={h*(0.08+i*0.05)} stroke={P_DEEP} strokeWidth="0.22" opacity={0.18+(i%3)*0.08}/>
    ))}
    {/* otomobil silüeti */}
    <g transform={`translate(${w*0.18} ${h*0.55})`}>
      <rect x="0" y="10" width={w*0.64} height={h*0.18} fill={P_DEEP} rx="2"/>
      <path d={`M ${w*0.08} 10 Q ${w*0.18} ${-h*0.08} ${w*0.36} ${-h*0.08} L ${w*0.5} 10 Z`} fill={P_DEEP}/>
      <circle cx={w*0.12} cy={h*0.18+10} r={w*0.05} fill={P_PAPER}/>
      <circle cx={w*0.52} cy={h*0.18+10} r={w*0.05} fill={P_PAPER}/>
      {/* far hüzmesi */}
      <polygon points={`${w*0.64},${h*0.07} ${w*0.96},${h*0.02} ${w*0.96},${h*0.18} ${w*0.64},${h*0.14}`} fill={P_CORAL} opacity="0.55"/>
    </g>
    <text x={w*0.5} y={h*0.92} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.1} fill={P_DEEP}>zaim</text>
  </PWrap>
);

// ── Masumiyet: izbe pansiyon kapısı + tek çıplak ampul ──
const P_Mas = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_PLUM} fg={P_DEEP} no={no} label="TR·1997" label2="1s49d">
    {/* duvar dokusu */}
    {Array.from({length:6}).map((_,i)=>(
      <line key={i} x1="0" y1={h*(0.18+i*0.13)} x2={w} y2={h*(0.18+i*0.13)} stroke={P_DEEP} strokeWidth="0.18" opacity="0.25"/>
    ))}
    {/* kapı */}
    <rect x={w*0.34} y={h*0.32} width={w*0.32} height={h*0.5} fill={P_DEEP} opacity="0.85"/>
    <rect x={w*0.36} y={h*0.34} width={w*0.28} height={h*0.46} fill="none" stroke={P_PAPER} strokeWidth="0.3" opacity="0.5"/>
    <circle cx={w*0.6} cy={h*0.58} r="1.2" fill={P_CORAL}/>
    {/* sarkan ampul */}
    <line x1={w*0.18} y1="0" x2={w*0.18} y2={h*0.22} stroke={P_DEEP} strokeWidth="0.4"/>
    <circle cx={w*0.18} cy={h*0.26} r={w*0.04} fill={P_SUN}/>
    <circle cx={w*0.18} cy={h*0.26} r={w*0.07} fill={P_SUN} opacity="0.35"/>
    <text x={w*0.5} y={h*0.94} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.11} fill={P_DEEP}>demirkubuz</text>
  </PWrap>
);

// ── Seks, Yalanlar ve Videokaset: VHS bant siluet ──
const P_Slv = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_CREAM} fg={P_DEEP} no={no} label="US·1989" label2="1s40d">
    {/* VHS kaset gövdesi */}
    <rect x={w*0.12} y={h*0.32} width={w*0.76} height={h*0.36} fill={P_DEEP}/>
    {/* iki makara */}
    <circle cx={w*0.32} cy={h*0.5} r={w*0.1} fill={P_PAPER}/>
    <circle cx={w*0.32} cy={h*0.5} r={w*0.04} fill={P_DEEP}/>
    <circle cx={w*0.68} cy={h*0.5} r={w*0.1} fill={P_PAPER}/>
    <circle cx={w*0.68} cy={h*0.5} r={w*0.04} fill={P_DEEP}/>
    {/* bant pencereleri */}
    <rect x={w*0.42} y={h*0.42} width={w*0.16} height={h*0.04} fill={P_PAPER}/>
    {/* etiket */}
    <rect x={w*0.18} y={h*0.34} width={w*0.4} height={h*0.04} fill={P_CORAL}/>
    <text x={w*0.5} y={h*0.88} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.1} fill={P_DEEP} letterSpacing="1">soderbergh</text>
  </PWrap>
);

// ── Ucuz Roman: parlayan çantanın içinden taşan altın ışık ──
const P_Ucz = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_DEEP} fg={P_SUN} no={no} label="US·1994" label2="2s34d">
    {/* sarı ışık halesi */}
    <defs>
      <radialGradient id={`u-${w}-${h}`} cx="50%" cy="48%" r="55%">
        <stop offset="0%"  stopColor={P_SUN} stopOpacity="0.95"/>
        <stop offset="60%" stopColor={P_SUN} stopOpacity="0.25"/>
        <stop offset="100%" stopColor={P_DEEP} stopOpacity="0"/>
      </radialGradient>
    </defs>
    <rect width={w} height={h} fill={`url(#u-${w}-${h})`}/>
    {/* çanta */}
    <rect x={w*0.28} y={h*0.42} width={w*0.44} height={h*0.22} fill={P_DEEP} stroke={P_SUN} strokeWidth="0.9"/>
    <path d={`M ${w*0.42} ${h*0.42} Q ${w*0.5} ${h*0.34} ${w*0.58} ${h*0.42}`} fill="none" stroke={P_SUN} strokeWidth="0.9"/>
    {/* açık kapaktan taşan ışık */}
    <polygon points={`${w*0.28},${h*0.42} ${w*0.05},${h*0.05} ${w*0.95},${h*0.05} ${w*0.72},${h*0.42}`} fill={P_SUN} opacity="0.5"/>
    <text x={w*0.5} y={h*0.88} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.12} fill={P_SUN} letterSpacing="1">tarantino</text>
  </PWrap>
);

// ── Akıl Defteri: polaroid + dövme satırları ──
const P_Akl = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_PAPER} fg={P_INK} no={no} label="US·2000" label2="1s53d">
    {/* polaroid çerçeve, hafif eğri */}
    <g transform={`translate(${w*0.5} ${h*0.4}) rotate(-6)`}>
      <rect x={-w*0.24} y={-h*0.22} width={w*0.48} height={h*0.44} fill={P_PAPER} stroke={P_INK} strokeWidth="0.7"/>
      <rect x={-w*0.21} y={-h*0.2}  width={w*0.42} height={h*0.32} fill={P_INK2}/>
      {/* polaroidte silüet */}
      <circle cx="0" cy={-h*0.06} r={w*0.08} fill={P_PAPER} opacity="0.45"/>
      <rect x={-w*0.12} y={h*0.02} width={w*0.24} height={h*0.08} fill={P_PAPER} opacity="0.4"/>
    </g>
    {/* dövme satırları (sol alt) */}
    {Array.from({length:5}).map((_,i)=>(
      <g key={i} transform={`translate(${w*0.1} ${h*0.74+i*7})`}>
        <line x1="0" y1="0" x2={w*0.42 - (i%2)*8} y2="0" stroke={P_INK} strokeWidth="0.8" opacity={0.7-(i*0.08)}/>
      </g>
    ))}
    <text x={w*0.5} y={h*0.95} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.1} fill={P_INK}>nolan</text>
  </PWrap>
);

// ── Cennetten Garip: pasaport damgası + soluk yıldız (S/B his) ──
const P_Str = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_PAPER} fg={P_INK} no={no} label="US·DE·1984" label2="1s29d">
    {/* dama desenli arka plan */}
    {Array.from({length:6*8}).map((_,i)=>{
      const col = i%6, row = Math.floor(i/6);
      const x = w*0.08 + col*(w*0.14);
      const y = h*0.1 + row*(h*0.085);
      const lit = (col+row)%2 === 0;
      return <rect key={i} x={x} y={y} width={w*0.13} height={h*0.075} fill={lit?P_INK:P_PAPER} opacity={lit?0.08:0}/>;
    })}
    {/* yuvarlak pasaport damgası */}
    <circle cx={w*0.5} cy={h*0.45} r={w*0.26} fill="none" stroke={P_INK} strokeWidth="0.9"/>
    <circle cx={w*0.5} cy={h*0.45} r={w*0.21} fill="none" stroke={P_INK} strokeWidth="0.4" opacity="0.55"/>
    {/* yıldız */}
    <g transform={`translate(${w*0.5} ${h*0.45})`}>
      {Array.from({length:5}).map((_,i)=>{
        const a = (i/5)*Math.PI*2 - Math.PI/2;
        const r = w*0.1;
        return <line key={i} x1="0" y1="0" x2={Math.cos(a)*r} y2={Math.sin(a)*r} stroke={P_INK} strokeWidth="1.1"/>;
      })}
    </g>
    <text x={w*0.5} y={h*0.86} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.1} fill={P_INK}>jarmusch</text>
  </PWrap>
);

// ── Şenlik: yıkık şarap kadehi + dökülen ışık ──
const P_Syt = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_CREAM} fg={P_DEEP} no={no} label="DK·1998" label2="1s45d">
    {/* uzun masa silueti */}
    <rect x="0" y={h*0.74} width={w} height={h*0.04} fill={P_DEEP} opacity="0.55"/>
    {/* devrilen kadeh */}
    <g transform={`translate(${w*0.46} ${h*0.5}) rotate(-32)`}>
      <path d={`M -8 0 Q 0 -14 8 0 L 8 8 L -8 8 Z`} fill={P_DEEP}/>
      <rect x="-1" y="8" width="2" height="14" fill={P_DEEP}/>
      <rect x="-6" y="22" width="12" height="2" fill={P_DEEP}/>
    </g>
    {/* dökülen şarap */}
    <path d={`M ${w*0.4} ${h*0.62} Q ${w*0.35} ${h*0.72} ${w*0.32} ${h*0.78}`} stroke={P_CORAL} strokeWidth="2.2" fill="none" strokeLinecap="round"/>
    {Array.from({length:6}).map((_,i)=>(
      <circle key={i} cx={w*(0.3+i*0.005)} cy={h*(0.78+i*0.005)} r={1.2-i*0.1} fill={P_CORAL} opacity={0.8-i*0.1}/>
    ))}
    <text x={w*0.5} y={h*0.92} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.1} fill={P_DEEP}>vinterberg</text>
  </PWrap>
);

// ── Sırlar ve Yalanlar: çay fincanı + iki silüet ──
const P_Ssk = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_PLUM} fg={P_DEEP} no={no} label="GB·1996" label2="2s16d">
    {/* iki yüz silüeti, yan yana */}
    <g transform={`translate(${w*0.3} ${h*0.36})`}>
      <circle cx="0" cy="0" r={w*0.11} fill={P_DEEP}/>
      <rect x={-w*0.11} y="-2" width={w*0.22} height="3" fill={P_PLUM}/>
    </g>
    <g transform={`translate(${w*0.7} ${h*0.36})`}>
      <circle cx="0" cy="0" r={w*0.11} fill={P_RUST}/>
      <rect x={-w*0.11} y="-2" width={w*0.22} height="3" fill={P_PLUM}/>
    </g>
    {/* çay fincanı */}
    <g transform={`translate(${w*0.5} ${h*0.68})`}>
      <path d={`M ${-w*0.14} 0 L ${w*0.14} 0 L ${w*0.1} ${h*0.13} L ${-w*0.1} ${h*0.13} Z`} fill={P_PAPER}/>
      <ellipse cx="0" cy="0" rx={w*0.14} ry="3" fill={P_CORAL}/>
      <path d={`M ${w*0.14} ${h*0.03} Q ${w*0.22} ${h*0.05} ${w*0.16} ${h*0.1}`} stroke={P_PAPER} strokeWidth="1.2" fill="none"/>
      {/* buhar */}
      <path d={`M ${-w*0.05} ${-h*0.04} q -2 -6 0 -10`} stroke={P_PAPER} strokeWidth="0.6" fill="none" opacity="0.6"/>
      <path d={`M ${w*0.04} ${-h*0.04} q 2 -6 0 -10`} stroke={P_PAPER} strokeWidth="0.6" fill="none" opacity="0.6"/>
    </g>
    <text x={w*0.5} y={h*0.94} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.09} fill={P_DEEP}>m. leigh</text>
  </PWrap>
);

// ── 4 Ay 3 Hafta 2 Gün: bavul + soğuk saat ──
const P_Drt = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_DEEP} fg={P_PAPER} no={no} label="RO·2007" label2="1s53d">
    {/* dijital saat */}
    <rect x={w*0.18} y={h*0.16} width={w*0.64} height={h*0.16} fill="none" stroke={P_CORAL} strokeWidth="0.9"/>
    <text x={w*0.5} y={h*0.28} textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize={w*0.18} fill={P_CORAL} letterSpacing="3">04:32</text>
    {/* bavul */}
    <rect x={w*0.28} y={h*0.5} width={w*0.44} height={h*0.32} fill={P_PAPER} opacity="0.92"/>
    <rect x={w*0.28} y={h*0.62} width={w*0.44} height="1.2" fill={P_DEEP}/>
    <rect x={w*0.46} y={h*0.46} width={w*0.08} height={h*0.04} fill={P_PAPER}/>
    {/* kilit */}
    <circle cx={w*0.4} cy={h*0.58} r="1.4" fill={P_DEEP}/>
    <circle cx={w*0.6} cy={h*0.58} r="1.4" fill={P_DEEP}/>
    <text x={w*0.5} y={h*0.94} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.09} fill={P_PAPER}>mungiu</text>
  </PWrap>
);

// ── Kirazın Tadı: kuru toprak yol + tek kiraz ──
const P_Kzs = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_SUN} fg={P_DEEP} no={no} label="IR·1997" label2="1s35d">
    {/* spiral yol */}
    <path d={`M 0 ${h*0.78} Q ${w*0.3} ${h*0.7} ${w*0.5} ${h*0.74} T ${w} ${h*0.66}`} fill="none" stroke={P_RUST} strokeWidth="3" opacity="0.7"/>
    <path d={`M 0 ${h*0.82} Q ${w*0.3} ${h*0.74} ${w*0.5} ${h*0.78} T ${w} ${h*0.7}`} fill="none" stroke={P_RUST} strokeWidth="1.2" opacity="0.5"/>
    {/* uzakta tek araba */}
    <rect x={w*0.18} y={h*0.7} width={w*0.07} height={h*0.04} fill={P_DEEP}/>
    {/* tek kiraz */}
    <g transform={`translate(${w*0.7} ${h*0.32})`}>
      <circle cx="0" cy={h*0.04} r={w*0.05} fill={P_CORAL}/>
      <circle cx={w*0.06} cy={h*0.05} r={w*0.045} fill={P_CORAL}/>
      <path d={`M 0 ${h*0.04} Q ${w*0.02} ${-h*0.04} ${w*0.06} ${-h*0.08}`} stroke={P_DEEP} strokeWidth="0.8" fill="none"/>
      <path d={`M ${w*0.06} ${h*0.05} Q ${w*0.04} ${-h*0.04} ${w*0.06} ${-h*0.08}`} stroke={P_DEEP} strokeWidth="0.8" fill="none"/>
      <path d={`M ${w*0.06} ${-h*0.08} L ${w*0.13} ${-h*0.1} L ${w*0.18} ${-h*0.06} Z`} fill={P_RUST}/>
    </g>
    <text x={w*0.5} y={h*0.94} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.09} fill={P_DEEP}>kiarostami</text>
  </PWrap>
);

// ── Ayrılık: kapı eşiği + çatlak ──
const P_Ayr = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_SKY} fg={P_DEEP} no={no} label="IR·2011" label2="2s03d">
    {/* iki bölünmüş alan */}
    <rect x="0" y="0" width={w*0.5} height={h} fill={P_PAPER} opacity="0.5"/>
    {/* dikey çatlak */}
    <path d={`M ${w*0.5} 0 L ${w*0.46} ${h*0.2} L ${w*0.52} ${h*0.36} L ${w*0.48} ${h*0.5} L ${w*0.54} ${h*0.7} L ${w*0.5} ${h}`}
          stroke={P_DEEP} strokeWidth="1.6" fill="none"/>
    {/* iki silüet */}
    <g transform={`translate(${w*0.25} ${h*0.5})`}>
      <circle cx="0" cy="0" r={w*0.07} fill={P_DEEP}/>
      <path d={`M ${-w*0.08} ${h*0.06} L ${w*0.08} ${h*0.06} L ${w*0.06} ${h*0.3} L ${-w*0.06} ${h*0.3} Z`} fill={P_DEEP}/>
    </g>
    <g transform={`translate(${w*0.75} ${h*0.5})`}>
      <circle cx="0" cy="0" r={w*0.07} fill={P_RUST}/>
      <path d={`M ${-w*0.08} ${h*0.06} L ${w*0.08} ${h*0.06} L ${w*0.06} ${h*0.3} L ${-w*0.06} ${h*0.3} Z`} fill={P_RUST}/>
    </g>
    <text x={w*0.5} y={h*0.94} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.09} fill={P_DEEP}>farhadi</text>
  </PWrap>
);

// ── Cinayetin Anıları: pirinç tarlasında silüet + soru işareti ──
const P_Cns = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_SAGE} fg={P_DEEP} no={no} label="KR·2003" label2="2s12d">
    {/* yatay tarla çizgileri */}
    {Array.from({length:18}).map((_,i)=>(
      <line key={i} x1="0" y1={h*(0.5+i*0.028)} x2={w} y2={h*(0.5+i*0.028)} stroke={P_DEEP} strokeWidth="0.25" opacity={0.4-(i*0.02)}/>
    ))}
    {/* uzak silüet */}
    <ellipse cx={w*0.5} cy={h*0.46} rx={w*0.04} ry={h*0.05} fill={P_DEEP}/>
    <rect x={w*0.48} y={h*0.5} width={w*0.04} height={h*0.1} fill={P_DEEP}/>
    {/* büyük soru işareti */}
    <text x={w*0.78} y={h*0.32} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.3} fill={P_RUST} opacity="0.75">?</text>
    {/* ufuk */}
    <line x1="0" y1={h*0.5} x2={w} y2={h*0.5} stroke={P_DEEP} strokeWidth="0.5" opacity="0.6"/>
    <text x={w*0.5} y={h*0.94} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.09} fill={P_DEEP}>bong</text>
  </PWrap>
);

// ── Hüzün Şehri: ada silüeti + sis katmanları ──
const P_Hzn = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_ROSE} fg={P_RUST} no={no} label="TW·1989" label2="2s37d">
    {/* sis katmanları */}
    {[0.32, 0.48, 0.62].map((y,i)=>(
      <rect key={i} x="0" y={h*y} width={w} height={h*0.06} fill={P_PAPER} opacity={0.55-i*0.12}/>
    ))}
    {/* dağ ada silüeti */}
    <path d={`M 0 ${h*0.72} L ${w*0.18} ${h*0.52} L ${w*0.32} ${h*0.62} L ${w*0.5} ${h*0.4} L ${w*0.66} ${h*0.58} L ${w*0.82} ${h*0.48} L ${w} ${h*0.66} L ${w} ${h*0.78} L 0 ${h*0.78} Z`}
          fill={P_RUST} opacity="0.9"/>
    {/* gemi ve fener */}
    <rect x={w*0.42} y={h*0.78} width={w*0.16} height={h*0.025} fill={P_DEEP}/>
    <rect x={w*0.48} y={h*0.74} width="1.5" height={h*0.04} fill={P_DEEP}/>
    <circle cx={w*0.48} cy={h*0.72} r="2" fill={P_SUN}/>
    <text x={w*0.5} y={h*0.94} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.09} fill={P_RUST}>hou</text>
  </PWrap>
);

// ── Dörtyüz Darbe: dalga + tek silüet ──
const P_Dyd = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_PAPER} fg={P_INK} no={no} label="FR·1959" label2="1s39d">
    {Array.from({length:7}).map((_,i)=>(
      <path key={i} d={`M 0 ${h*(0.55+i*0.05)} Q ${w*0.25} ${h*(0.52+i*0.05)} ${w*0.5} ${h*(0.55+i*0.05)} T ${w} ${h*(0.55+i*0.05)}`} fill="none" stroke={P_INK} strokeWidth="0.4" opacity={0.6-i*0.07}/>
    ))}
    <g transform={`translate(${w*0.5} ${h*0.38})`}>
      <circle cx="0" cy="0" r={w*0.06} fill={P_INK}/>
      <rect x={-w*0.06} y={h*0.05} width={w*0.12} height={h*0.18} fill={P_INK}/>
    </g>
    <text x={w*0.5} y={h*0.92} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.09} fill={P_INK}>truffaut</text>
  </PWrap>
);
// ── Bisiklet Hırsızları: bisiklet silueti ──
const P_Bsc = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_CREAM} fg={P_DEEP} no={no} label="IT·1948" label2="1s29d">
    <circle cx={w*0.28} cy={h*0.6} r={w*0.13} fill="none" stroke={P_DEEP} strokeWidth="1.4"/>
    <circle cx={w*0.72} cy={h*0.6} r={w*0.13} fill="none" stroke={P_DEEP} strokeWidth="1.4"/>
    <line x1={w*0.28} y1={h*0.6} x2={w*0.5} y2={h*0.36} stroke={P_DEEP} strokeWidth="1.4"/>
    <line x1={w*0.5} y1={h*0.36} x2={w*0.72} y2={h*0.6} stroke={P_DEEP} strokeWidth="1.4"/>
    <line x1={w*0.28} y1={h*0.6} x2={w*0.72} y2={h*0.6} stroke={P_DEEP} strokeWidth="0.8" opacity="0.5"/>
    <rect x={w*0.47} y={h*0.28} width={w*0.06} height={h*0.1} fill={P_DEEP}/>
    <text x={w*0.5} y={h*0.92} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.09} fill={P_DEEP}>de sica</text>
  </PWrap>
);
// ── Raşomon: bambu, üç çatallı yön ──
const P_Rsm = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_SAGE} fg={P_DEEP} no={no} label="JP·1950" label2="1s28d">
    {Array.from({length:7}).map((_,i)=>(
      <line key={i} x1={w*(0.1+i*0.13)} y1={h*0.18} x2={w*(0.08+i*0.13+Math.sin(i)*0.02)} y2={h*0.82} stroke={P_DEEP} strokeWidth="0.9" opacity={0.6+(i%3)*0.13}/>
    ))}
    <text x={w*0.5} y={h*0.5} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.16} fill={P_PAPER} opacity="0.92">羅</text>
    <text x={w*0.5} y={h*0.92} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.09} fill={P_DEEP}>kurosawa</text>
  </PWrap>
);
// ── Aşk Köpekleri: üç çarpışan çizgi ──
const P_Amp = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_RUST} fg={P_PAPER} no={no} label="MX·2000" label2="2s34d">
    <line x1="0" y1={h*0.85} x2={w*0.5} y2={h*0.5} stroke={P_PAPER} strokeWidth="2.4"/>
    <line x1={w} y1={h*0.15} x2={w*0.5} y2={h*0.5} stroke={P_PAPER} strokeWidth="2.4"/>
    <line x1={w*0.1} y1={h*0.15} x2={w*0.5} y2={h*0.5} stroke={P_SUN} strokeWidth="2.4"/>
    <circle cx={w*0.5} cy={h*0.5} r={w*0.1} fill={P_SUN}/>
    <circle cx={w*0.5} cy={h*0.5} r={w*0.04} fill={P_RUST}/>
    <text x={w*0.5} y={h*0.92} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.09} fill={P_PAPER}>iñárritu</text>
  </PWrap>
);
// ── Rosetta: bot izleri çamurda ──
const P_Rst = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_PLUM} fg={P_DEEP} no={no} label="BE·1999" label2="1s35d">
    {Array.from({length:9}).map((_,i)=>(
      <g key={i} transform={`translate(${w*(0.2+i*0.07)} ${h*(0.32+i*0.06)})`}>
        <ellipse cx="0" cy="0" rx="3.6" ry="2" fill={P_DEEP} opacity={0.5+(i%3)*0.13}/>
      </g>
    ))}
    <rect x={w*0.4} y={h*0.78} width={w*0.2} height={h*0.05} fill={P_DEEP}/>
    <rect x={w*0.46} y={h*0.62} width={w*0.08} height={h*0.16} fill={P_DEEP}/>
    <text x={w*0.5} y={h*0.94} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.09} fill={P_DEEP}>dardenne</text>
  </PWrap>
);
// ── Ida: çapraz çerçeve, küçük figür ──
const P_Ida = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_PAPER} fg={P_DEEP} no={no} label="PL·2013" label2="1s20d">
    <rect x="0" y="0" width={w} height={h*0.66} fill={P_PAPER}/>
    <rect x="0" y={h*0.66} width={w} height={h*0.34} fill={P_DEEP}/>
    {/* küçük figür alt sol */}
    <g transform={`translate(${w*0.22} ${h*0.82})`}>
      <circle cx="0" cy={-h*0.04} r="3.2" fill={P_PAPER}/>
      <rect x="-3.5" y={-h*0.02} width="7" height="14" fill={P_PAPER}/>
    </g>
    <text x={w*0.5} y={h*0.5} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.32} fill={P_DEEP} letterSpacing="-2">Ida</text>
    <text x={w*0.5} y={h*0.97} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.08} fill={P_PAPER}>pawlikowski</text>
  </PWrap>
);
// ── Werckmeister: balina silüeti ──
const P_Wzh = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_INK} fg={P_PAPER} no={no} label="HU·2000" label2="2s25d">
    {/* gece çekirgesi yıldızlar */}
    {Array.from({length:18}).map((_,i)=>{
      const x = (Math.sin(i*11.3)*0.5+0.5)*w;
      const y = (i*9.7)%(h*0.5);
      return <circle key={i} cx={x} cy={y} r="0.7" fill={P_PAPER} opacity={0.4+(i%4)*0.15}/>;
    })}
    {/* balina */}
    <path d={`M ${w*0.1} ${h*0.7} Q ${w*0.3} ${h*0.5} ${w*0.7} ${h*0.55} Q ${w*0.92} ${h*0.55} ${w*0.92} ${h*0.7} Q ${w*0.7} ${h*0.78} ${w*0.4} ${h*0.78} Q ${w*0.18} ${h*0.78} ${w*0.1} ${h*0.7} Z`} fill={P_PAPER} opacity="0.9"/>
    <circle cx={w*0.82} cy={h*0.63} r="1.4" fill={P_INK}/>
    <text x={w*0.5} y={h*0.95} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.08} fill={P_PAPER}>tarr</text>
  </PWrap>
);
// ── Yi Yi: arka yüzlü çocuk + soru işareti ──
const P_Yiy = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_SKY} fg={P_DEEP} no={no} label="TW·2000" label2="2s53d">
    {/* arkadan görünen çocuk başı */}
    <circle cx={w*0.5} cy={h*0.4} r={w*0.16} fill={P_DEEP}/>
    {/* kollar/omuzlar */}
    <path d={`M ${w*0.28} ${h*0.6} Q ${w*0.5} ${h*0.52} ${w*0.72} ${h*0.6} L ${w*0.78} ${h} L ${w*0.22} ${h} Z`} fill={P_DEEP}/>
    {/* küçük polaroid çocuğun elinde */}
    <rect x={w*0.62} y={h*0.66} width={w*0.12} height={h*0.1} fill={P_PAPER} stroke={P_DEEP} strokeWidth="0.6"/>
    <text x={w*0.5} y={h*0.95} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.08} fill={P_PAPER}>yang</text>
  </PWrap>
);
// ── Tropik Hastalık: yapraklı silüet ──
const P_Tpm = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_SAGE} fg={P_DEEP} no={no} label="TH·2004" label2="1s58d">
    {Array.from({length:12}).map((_,i)=>{
      const a = (i/12)*Math.PI*2;
      const rx = w*0.25 + Math.sin(i)*4;
      const ry = h*0.18 + Math.cos(i)*3;
      return <ellipse key={i} cx={w*0.5 + Math.cos(a)*w*0.22} cy={h*0.45 + Math.sin(a)*h*0.16} rx={rx*0.3} ry={ry*0.3} fill={P_DEEP} opacity={0.45+(i%3)*0.15} transform={`rotate(${(i*30)} ${w*0.5} ${h*0.45})`}/>;
    })}
    <circle cx={w*0.5} cy={h*0.45} r={w*0.06} fill={P_SUN}/>
    <text x={w*0.5} y={h*0.94} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.085} fill={P_DEEP}>apichatpong</text>
  </PWrap>
);
// ── Platform: peron çizgisi + uzaklaşan vagon ──
const P_Plt = ({ w, h, no }) => (
  <PWrap w={w} h={h} bg={P_ROSE} fg={P_RUST} no={no} label="CN·2000" label2="2s34d">
    {/* peron */}
    <rect x="0" y={h*0.62} width={w} height={h*0.02} fill={P_RUST}/>
    {/* perspektif çizgileri */}
    <line x1="0" y1={h*0.95} x2={w*0.5} y2={h*0.6} stroke={P_RUST} strokeWidth="0.6" opacity="0.5"/>
    <line x1={w} y1={h*0.95} x2={w*0.5} y2={h*0.6} stroke={P_RUST} strokeWidth="0.6" opacity="0.5"/>
    {/* vagonlar */}
    {[0.42, 0.32, 0.22, 0.14].map((s,i)=>(
      <rect key={i} x={w*(0.5-s/2)} y={h*(0.5-i*0.025)} width={w*s} height={h*0.07-i*1.5} fill={P_DEEP} opacity={0.9-i*0.18}/>
    ))}
    <text x={w*0.5} y={h*0.94} textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize={w*0.085} fill={P_RUST}>jia</text>
  </PWrap>
);

const P_POSTERS = {
  syz:P_Syz, kis:P_Kis, tab:P_Tab, mas:P_Mas,
  slv:P_Slv, ucz:P_Ucz, akl:P_Akl, str:P_Str,
  syt:P_Syt, ssk:P_Ssk, drt:P_Drt, kzs:P_Kzs,
  ayr:P_Ayr, cns:P_Cns, hzn:P_Hzn,
  dyd:P_Dyd, bsc:P_Bsc, rsm:P_Rsm, amp:P_Amp, rst:P_Rst,
  ida:P_Ida, wzh:P_Wzh, yiy:P_Yiy, tpm:P_Tpm, plt:P_Plt,
};

function PastelPoster({ id, w=140, h=180, no }) {
  const P = P_POSTERS[id] || P_Syz;
  return <P w={w} h={h} no={no}/>;
}

window.PastelPoster = PastelPoster;
window.PASTEL_COLORS = {
  PAPER:P_PAPER, INK:P_INK, INK2:P_INK2, ROSE:P_ROSE, SUN:P_SUN, SKY:P_SKY,
  SAGE:P_SAGE, PLUM:P_PLUM, CORAL:P_CORAL, CREAM:P_CREAM, RUST:P_RUST, DEEP:P_DEEP,
};
