/* Akan davetiye duvarı (components/flow-wall.blade.php). Kartlar sunucuda
   değil tarayıcıda, bileşendeki script ile çizilir (bkz. data-columns). */

/* ── Akan duvar. Performans için bilinçli olarak sade:
   - Hareket YALNIZCA 9 sütunun transform animasyonu (saf CSS) — her
     sütun tek bir GPU katmanı; kartlara JS ile hiçbir şey yazılmaz,
     kare başına ölçüm/stil yazma yok. Kartların gölge/degrade/kenar
     süsleri statik — katman bir kez çizilir, akış sırasında yeniden
     boyanmaz.
   - Kartlarda will-change / filter / mask / container-type yok (126
     ayrı katman ya da kap açmasın); kart içi ölçüler doğrudan kart
     genişliğinden (--wall-card) hesaplanır.
   - Yazıya doğru solma masaüstünde zemin renginde bir degrade katman
     (::after, solda); mobilde üstte, kabın kendisinde tek bir mask
     (aşağıya bkz. — kenar çizgisi sızıntısı).
   - Duvar ekrandan çıkınca akış duraklar (.is-paused, bkz. script).
   Akış sonsuz ve kesintisiz: kartlar arası boşluk margin ile
   verildiği için iki kopyanın toplam yüksekliği tam 2x — -%50 → 0
   geçişinde sıçrama olmaz. */
.dm-wall { --wall-card: clamp(96px, 8.6vw, 150px); --wall-gap: calc(var(--wall-card) * .14);
    position: relative; height: 420px; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; contain: layout paint; }
.dm-wall::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, var(--color-page, #FAF7F2), rgba(250, 247, 242, 0) 18%); }
/* Masaüstü: section'a göre absolute — üstten alta tüm bölüm, metin
   kolonunun bitiminden sayfanın sağ kenarına kadar. Sol kenar metnin
   bittiği yere göre: 768–1199px'te grid kolonu dar (%48), 1200px+'da
   metin max 30rem (%42). */
@media (min-width: 768px) {
    .dm-wall { position: absolute; top: 0; bottom: 0; right: 0; left: 48%; width: auto; height: auto; margin: 0; }
    .dm-wall::after { background: linear-gradient(to right, var(--color-page, #FAF7F2), rgba(250, 247, 242, 0) 30%); }
}
@media (min-width: 1200px) { .dm-wall { left: 42%; } }
/* Mobil (<768px): üstteki solma zemin renkli katman yerine duvarın
   kendisinde tek bir mask ile — kartlara değil kaba, tek katman. Katman
   yöntemiyle telefonlarda akan sütunların GPU katmanı kırpma kenarında
   piksele yuvarlanıp solmanın 1px dışına taşıyor (koyu kartlar üst
   kenarda ince çizgi), düz zemin rengi de bölümün gül ışıklı
   zemininden ton olarak ayrılıyordu. Mask gerçek saydamlık verir; ilk
   2px tamamen saydam. Katmanı kullanan sayfalar (::after arka planını
   kendisi veren) kendi solmasını korur. */
@media (max-width: 767px) {
    .dm-wall { -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 2px, #000 24%); mask-image: linear-gradient(to bottom, transparent 0, transparent 2px, #000 24%); }
    .dm-wall::after { background: none; }
}
/* Boşluksuz kaplama geometrisi: her sütun = aynı 7 kartın iki kopyası
   (yükseklik 2C) ve -C → 0 arası akar. Kap, ilk kopyanın ORTASI alanın
   merkezine gelecek şekilde konur (translate -%25 = -C/2) ve dönüş de
   o noktanın etrafında yapılır (transform-origin 50% 25%). Böylece
   akışın her anında sütun, merkezden iki yöne en az C/2 uzanır; C
   (7 kart) 30° yatık alanın sütun eksenindeki yarı boyundan hep
   büyük. 9 sütun da alanın sütunlara dik genişliğini her ekranda
   kaplar — köşelerde/kenarlarda boşluk kalmaz. Kart oranı (5:7) ve
   sayıları (FlowWall::COLUMNS/ROWS) bu hesaba bağlı. */
.dm-wall-tilt { position: absolute; left: 50%; top: 50%; display: flex; gap: var(--wall-gap); align-items: flex-start; transform-origin: 50% 25%; transform: translate(-50%, -25%) rotate(30deg); }
.dm-wall-col { animation: dmWallFlow var(--dur) linear var(--delay) infinite; will-change: transform; backface-visibility: hidden; }
.dm-wall.is-paused .dm-wall-col { animation-play-state: paused; }
@keyframes dmWallFlow { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }
.dm-wall-card { position: relative; width: var(--wall-card); aspect-ratio: 5 / 7; margin-bottom: var(--wall-gap); }
@media (prefers-reduced-motion: reduce) { .dm-wall-col { animation: none; } }

/* ── Davetiye kartı */
.dm-wall-inner { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; background: var(--bg); color: var(--fg);
    box-shadow: 0 10px 22px -12px rgba(52, 40, 50, .45); }
.dm-wall-frame { position: absolute; inset: calc(var(--wall-card) * .05); border: 1px solid var(--ac); border-radius: 3px; opacity: .85; }
.dm-wall-ct { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: calc(var(--wall-card) * .025); padding: calc(var(--wall-card) * .1); text-align: center; }
.dm-wall-ey { font-family: var(--font-sans); font-size: calc(var(--wall-card) * .07); letter-spacing: .14em; color: var(--ac); margin-bottom: calc(var(--wall-card) * .015); }
.dm-wall-nm { line-height: 1.05; }
.dm-wall-nm.is-script { font-family: 'Great Vibes', cursive; font-size: calc(var(--wall-card) * .19); }
.dm-wall-nm.is-serif { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; font-size: calc(var(--wall-card) * .16); }
.dm-wall-nm.is-sans { font-family: var(--font-heading); font-size: calc(var(--wall-card) * .13); }
.dm-wall-amp { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: calc(var(--wall-card) * .12); line-height: 1; color: var(--ac); }
.dm-wall-dt { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: calc(var(--wall-card) * .09); margin-top: calc(var(--wall-card) * .02); }
.dm-wall-tn { position: absolute; left: 0; right: 0; bottom: calc(var(--wall-card) * .08); text-align: center; font-family: var(--font-sans); font-size: calc(var(--wall-card) * .065); letter-spacing: .06em; color: var(--ac); opacity: .75; }