/* ═══════════════════════════════════════════════════════════════════
   ORTAK TUVAL — masanın birlikte doldurduğu gizli şekil (28 Ağu 2026).
   `tuval.js` ile eşleşir. Kurgu: _docs/ortak-tuval-devir-28agu26.md

   DİL: masa ekranının (masam.css) altın ailesi. Tuvalin KENDİSİ nötr
   kalır — renk öğrencilerin kutularından gelir, çerçeveden değil.

   🔴 Bu dosyada ASLA olmayacaklar:
     • Izgara çizgisi, boş hücre gölgesi. Boş hücre GÖRÜNMEZ; yalnız
       konan kutular vardır. Çizgi çizmek şeklin sınırını ele verir.
     • Yüzde çubuğu, hedef sayı, geri sayım, "hafta" yazısı.
     • Kişi rengi ↔ isim eşlemesi. Renk kimsenin imzası değildir.
     • Gün içinde kıpırdayan hiçbir şey. Hareket YALNIZ iki eşikte:
       gönderme ve tamamlanma. Odak ürünüyüz.
   ═══════════════════════════════════════════════════════════════════ */

.tvl, .tvl *, .tvl *::before, .tvl *::after { box-sizing: border-box; }

/* ── 30 Ağu · KAPI + KENDİ EKRANI ─────────────────────────────────────
   Tuval masa içinde büyük boş bir kutu olarak duruyordu. Artık masa
   içinde tek satırlık bir KAPI var; tuval kendi ekranında açılıyor. */
.tvl-kapi {
    display: flex; align-items: center; gap: 12px; width: 100%;
    margin: 12px 0 0; padding: 12px 14px; border-radius: 13px;
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.10);
    font-family: inherit; text-align: left; cursor: pointer;
}
.tvl-kapi[hidden] { display: none; }
.tvl-kapi:hover { border-color: rgba(232, 201, 122, 0.34); }
.tvl-kapi-ikon { width: 44px; height: 44px; flex: none; }
.tvl-kapi-ikon .cerceve { fill: rgba(212, 175, 106, 0.06); }
.tvl-kapi-ikon .k1 { fill: rgba(245, 214, 123, 0.75); }
.tvl-kapi-ikon .k2 { fill: rgba(245, 214, 123, 0.5); }
.tvl-kapi-ikon .k3 { fill: rgba(245, 214, 123, 0.35); }
.tvl-kapi-yazi { flex: 1; min-width: 0; display: block; }
.tvl-kapi-yazi b { display: block; font-size: 13.5px; font-weight: 600; color: #e9eef8; }
.tvl-kapi-satir { display: block; font-size: 11.5px; color: #94a3b8; margin-top: 2px; }
.tvl-kapi-ok { flex: none; color: #5f6b80; font-size: 16px; }

/* Tuval ekranı: masanın üstünü kapatan kendi ekranı.
   ⚠️ Adı `tvl-ekran`; `tvl-perde` mühür kartının perdesidir (ad çakışması). */
.tvl {
    position: fixed; inset: 0; z-index: 60;
    margin: 0; padding: 18px 16px 28px;
    border-radius: 0; border: 0;
    background: #0a0e1a;
    overflow-y: auto;
}
.tvl[hidden] { display: none; }
/* Ekran tam sayfa açılır ama SATIR GENİŞLİĞİ telefon ölçüsünde kalır:
   geniş ekranda tuval devleşiyordu (ilk provada 9 sütun 108px'e çıktı). */
.tvl > * { max-width: 430px; margin-left: auto; margin-right: auto; }

.tvl-bas {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 11px; margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.tvl-geri {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8; font-size: 17px; line-height: 1; cursor: pointer; font-family: inherit;
}
.tvl-bas h4 { flex: 1; text-align: left; }
.tvl-bas-ad {
    flex: none; max-width: 40%; font-size: 10px; letter-spacing: 0.5px;
    text-transform: uppercase; color: #5f6b80;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tvl-don {
    display: block; margin: 16px auto 0; padding: 9px 24px; border-radius: 999px;
    background: rgba(212, 175, 106, 0.14); border: 1px solid rgba(212, 175, 106, 0.4);
    color: #e8d5a8; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
}

/* ── RAF — dolmuş şekiller yan yana, dokununca büyür ───────────────── */
.tvl-raf { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.tvl-raf-bas {
    font-size: 10.5px; letter-spacing: 0.6px; text-transform: uppercase;
    color: #5f6b80; margin-bottom: 9px;
}
.tvl-raf-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tvl-raf-kart {
    display: block; width: 100%; padding: 11px 10px; border-radius: 13px;
    background: rgba(15, 23, 42, 0.35); border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: inherit; cursor: pointer; text-align: center;
}
.tvl-raf-kart:hover { border-color: rgba(232, 201, 122, 0.34); }
.tvl-raf-kart .tvl-tuval { max-width: 118px; margin: 0 auto; }
.tvl-raf-ad { display: block; font-size: 12.5px; font-weight: 600; color: #e9eef8; margin-top: 8px; }
.tvl-raf-gun { display: block; font-size: 10.5px; color: #5f6b80; margin-top: 2px; }
.tvl-hikaye { font-size: 13px; line-height: 1.55; color: #cbd5e1; margin: 8px 0 4px; }
.tvl-kaynak { font-size: 11px; color: #7c8798; font-style: italic; }
.tvl-kunye { font-size: 11px; color: #94a3b8; margin-top: 6px; }
.tvl-bas h4 {
    margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.2px;
    color: #e8c97a;
}
/* "Kutularım" — sessiz bir kip düğmesi, vitrin değil. */
.tvl-benim-dug {
    background: transparent; border: 1px solid rgba(232, 201, 122, 0.35);
    color: #e8c97a; font-size: 12px; padding: 5px 10px; border-radius: 999px;
    cursor: pointer; font-family: inherit;
}
.tvl-benim-dug[aria-pressed="true"] { background: rgba(232, 201, 122, 0.16); }

/* ── tuval ────────────────────────────────────────────────────────────
   SABİT KARE DEĞİL: viewBox şeklin en/boy'undan geliyor, kutu boyu ona
   göre oturuyor. Zencirek yatık (32x12), uçurtma dikey (23x37) —
   kare varsayan bir tuval ikisini de ezerdi. */
.tvl-tuval {
    display: block; width: 100%; height: auto;
    /* 🔑 BOY SINIRI: dikey şekiller (uçurtma 23x37) tam genişlikte çizilince
       ekranı dolduruyor ve elindeki kutular şeridi katlanmanın altında
       kalıyordu — kutularını görmek için kaydırmak gerekiyordu. Tuval
       kısalır, şerit hep görünür kalır. */
    max-height: 44vh;
    /* Perde ile aynı gece; tuvalin kendi rengi YOK. */
    background: rgba(10, 14, 26, 0.55);
    border-radius: 12px;
    overflow: visible;
}
.tvl-kutu { rx: 0.18; }

/* Sekiz renk. Hepsi ilk günden herkeste açık: kazanılan/nadir renk yok.
   🔑 TEK TANIM: aynı renk hem tuvaldeki kareye (SVG → fill) hem elindeki
   kutuya (düğme → background) gidiyor. İki ayrı yerde tanımlansaydı bir
   gün ayrışırdı: elindeki kutu bir renk, tuvale inen başka bir renk. */
:root {
    --tvl-r1: #e8c97a;   /* altın   */
    --tvl-r2: #7fb3f5;   /* gökyüzü */
    --tvl-r3: #86d9a8;   /* yosun   */
    --tvl-r4: #f2a2b8;   /* gül     */
    --tvl-r5: #b9a5f0;   /* leylak  */
    --tvl-r6: #f5b473;   /* kiremit */
    --tvl-r7: #7fd8d4;   /* deniz   */
    --tvl-r8: #d9dee8;   /* sis     */
}
.tvl-r1 { fill: var(--tvl-r1, #e8c97a); background: var(--tvl-r1, #e8c97a); }
.tvl-r2 { fill: var(--tvl-r2, #7fb3f5); background: var(--tvl-r2, #7fb3f5); }
.tvl-r3 { fill: var(--tvl-r3, #86d9a8); background: var(--tvl-r3, #86d9a8); }
.tvl-r4 { fill: var(--tvl-r4, #f2a2b8); background: var(--tvl-r4, #f2a2b8); }
.tvl-r5 { fill: var(--tvl-r5, #b9a5f0); background: var(--tvl-r5, #b9a5f0); }
.tvl-r6 { fill: var(--tvl-r6, #f5b473); background: var(--tvl-r6, #f5b473); }
.tvl-r7 { fill: var(--tvl-r7, #7fd8d4); background: var(--tvl-r7, #7fd8d4); }
.tvl-r8 { fill: var(--tvl-r8, #d9dee8); background: var(--tvl-r8, #d9dee8); }
/* SVG karesi düğme değildir: arka plan ona bulaşmasın. */
.tvl-kutu, .tvl-cekirdek { background: none; }

/* ── derin saat kutusu ────────────────────────────────────────────────
   4 saati geçtikten sonra kazanılan kutu. HERKES görür (29 Ağu kullanıcı
   kararı — bedeli konuşuldu: masada kimin uzun çalıştığı tahmin edilebilir
   hâle gelir; karar bilinerek verildi).

   🔑 İşaret RENK DEĞİŞTİRMEZ, PARLAKLIK ARTIRMAZ: kutu sahibinin kendi
   renginde kalır, içine bir çekirdek gelir. Sebebi: farklı/parlak renk
   "daha değerli kutu" diye okunur ve iki sınıflı bir para birimi doğar.
   Çekirdek "bu kutu uzun bir oturumdan geldi" der, "bu kutu daha iyi"
   demez. Yakından bakınca görünür, uzaktan tuvali bozmaz. */
.tvl-kutu.derin { rx: 0.30; }
.tvl-cekirdek { fill: #0a0e1a; opacity: 0.55; }

/* ── "Kutularım" kipi ─────────────────────────────────────────────────
   Tuval söner, yalnız kendi kutuların yanar. Bu görüntüyü ve bu sayıyı
   başka hiç kimse görmez — sayı yalnız sahibinin ekranında hesaplanır. */
.tvl-tuval.benim-kipi .tvl-kutu { opacity: 0.10; }
.tvl-tuval.benim-kipi .tvl-kutu.benim { opacity: 1; }

.tvl-alt {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-top: 10px; flex-wrap: wrap;
}
/* "Kutularım" artık BU satırda — değiştirdiği sayının yanında. */
.tvl-alt .tvl-benim-dug { flex: none; }
/* YALNIZ "bu şekle N kutu kondu". Yüzde/hedef/geri sayım yok. */
.tvl-sayi { font-size: 12px; color: #94a3b8; }
.tvl-sayi b { color: #cbd5e1; font-weight: 600; }

.tvl-bekle { font-size: 12px; color: #94a3b8; }

/* ── gönderme sahnesi: YUVARLANAN KUTU ───────────────────────────────
   Eskiden iki ayrı hareket vardı: elindeki kutu kalkıp SİLİNİYOR, sonra
   tuvalde başka bir yerde yeni bir kutu beliriyordu. Arada boşluk kalıyordu
   — "dokunuyorsun gözden kayboluyor, sonra beliriyor."

   Şimdi TEK kutu var: elindekinin kopyası ekranın üstünde uçuyor, yay
   çizerek YUVARLANIYOR ve tam hücresine oturuyor. Göz tek bir yolu izliyor.

   Üç iç içe kat, çünkü tek transform ile yay çizilemez:
     dış → yatay yol (düzgün hız) · orta → dikey yol (yayın kendisi) ·
     iç  → yuvarlanma + küçülme.
   🔒 Bittikten sonra HİÇBİR ŞEY kıpırdamaz: tek eşik, tek hareket. */
.tvl-ucan { position: fixed; z-index: 10070; pointer-events: none; }
.tvl-ucan-dikey { width: 100%; height: 100%; }
.tvl-ucan-ic { width: 100%; height: 100%; border-radius: 7px; }

/* 1. FAZ — dokunulduğu ANDA başlar ve HEMEN yola çıkar.
   🔴 Burada önce "havada süzülme" vardı: kutu kalkıp hedefini öğrenene
   kadar zıplayarak bekliyordu ("yarım saniye hafif zıplıyor, sonra
   atılıyor"). Bekleme KALKTI. Hedef hücre daha bilinmiyor ama TUVALİN
   nerede olduğu biliniyor — kutu oraya doğru yola çıkıyor. Yön baştan
   doğru; cevap gelince (2. faz) bulunduğu yerden gerçek hücresine sapıyor.
   Süre uzun (1400 ms) ve YAVAŞLAYARAK: cevap geldiğinde kutu hâlâ yolda
   olsun, ikinci faz devralsın. */
.tvl-ucan.firlatiliyor { animation: tvl-yatay 1400ms cubic-bezier(0.12, 0.62, 0.30, 1) both; }
.tvl-ucan-dikey.firlatiliyor { animation: tvl-dikey 1400ms cubic-bezier(0.25, 0.55, 0.35, 1) both; }
.tvl-ucan-ic.firlatiliyor { animation: tvl-donme 1400ms linear both; }

/* 2. FAZ — YOL. Kopya bulunduğu yerden devam eder; geri sarma yok. */
/* 2. FAZ — hedef belli: kopya bulunduğu yerden gerçek hücresine sapar. */
.tvl-ucan.yolda { animation: tvl-yatay 600ms linear both; }
.tvl-ucan-dikey.yolda { animation: tvl-dikey 600ms ease-in-out both; }
.tvl-ucan-ic.yolda { animation: tvl-donme 600ms cubic-bezier(0.30, 0.10, 0.30, 1) both; }
.tvl-ucan-ic.derin { box-shadow: inset 0 0 0 6px rgba(10, 14, 26, 0.55); }

@keyframes tvl-yatay { to { transform: translateX(var(--dx, 0)); } }
@keyframes tvl-dikey {
    0%   { transform: translateY(0); }
    /* Yayın tepesi: yolun üçte birinde, kavis kadar yukarıda. */
    45%  { transform: translateY(calc(var(--dy, 0px) * 0.30 - var(--yay, 60px))); }
    100% { transform: translateY(var(--dy, 0)); }
}
@keyframes tvl-donme {
    0%   { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(540deg) scale(var(--olcek, 0.4)); }
}

/* Kopya yoldayken gerçek kare gizlidir — kutu iki yerde birden görünmesin. */
.tvl-kutu.gelmedi { opacity: 0; }
/* Varış: kısa bir yerleşme vuruşu, sonra durur. */
@keyframes tvl-oturma {
    0%   { transform: scale(1.32); filter: brightness(1.7); }
    55%  { transform: scale(0.93); filter: brightness(1.15); }
    100% { transform: scale(1); filter: brightness(1); }
}
.tvl-kutu.oturdu {
    transform-box: fill-box; transform-origin: center;
    animation: tvl-oturma 340ms ease-out both;
}

/* ── tamamlanma ──────────────────────────────────────────────────────
   Kutular merkezden dışa DALGA hâlinde toplanır (~1,2 sn), bir kez
   parlar, mühürlenir. Tek gösteri budur. */
@keyframes tvl-dalga {
    0%   { transform: scale(1); filter: brightness(1); }
    40%  { transform: scale(1.35); filter: brightness(1.9); }
    100% { transform: scale(1); filter: brightness(1); }
}
.tvl-tuval.muhurleniyor .tvl-kutu {
    transform-box: fill-box; transform-origin: center;
    animation: tvl-dalga 620ms ease-out both;
    animation-delay: var(--gecikme, 0ms);
}

/* ── mühür kartı + raf ───────────────────────────────────────────────── */
.tvl-kart {
    margin-top: 12px; padding: 14px;
    border-radius: 14px;
    background: rgba(232, 201, 122, 0.08);
    border: 1px solid rgba(232, 201, 122, 0.28);
}
.tvl-kart h5 {
    margin: 0 0 2px; font-size: 15px; color: #e8c97a; font-weight: 700;
}
.tvl-kart .tvl-aile { font-size: 11px; color: #94a3b8; margin-bottom: 8px; }
.tvl-kart .tvl-hikaye { font-size: 13px; line-height: 1.55; color: #cbd5e1; margin: 0 0 8px; }
.tvl-kart .tvl-kaynak { font-size: 11px; color: #7c8798; font-style: italic; }
.tvl-kart .tvl-kunye { font-size: 12px; color: #94a3b8; margin-top: 8px; }
.tvl-kart .tvl-kunye b { color: #cbd5e1; font-weight: 600; }
.tvl-kart .tvl-tuval { margin-bottom: 10px; }


/* ── elindeki kutular ────────────────────────────────────────────────
   Kutular tuvalin ALTINDA, kendi renginde, dokunulabilir duruyor. Ayrı bir
   dağıtım sayfası YOK: dokunduğun kutu oradan kalkar, tuvale iner.
   (Eski sayfada en büyük yazı seçim değişince değişmiyordu — ekran "hiçbir
   şey olmadı" gibi okunuyordu.) */
.tvl-elim { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.07); }
.tvl-elim-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.tvl-elim-ad { font-size: 11px; color: #94a3b8; letter-spacing: 0.3px; }

/* ELİNDEKİ KUTULAR — HEPSİ AYNI BOY, YAN YANA (29 Ağu, kullanıcı).
   Sığmazsa satır YATAY KAYAR: alt alta kırılıp boyları farklı görünmesin.
   Kaydırma çubuğu gizli — parmakla kaydırılır, ekranda çizgi durmaz. */
.tvl-el-kutular {
    display: flex; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; overflow-y: hidden;
    padding: 2px 0 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tvl-el-kutular::-webkit-scrollbar { display: none; }
/* Sağ kenarda soluşma: sığmayan kutu "kırpılmış" değil "yanda daha var"
   diye okunsun. Kaydırma çubuğu yok, işaret bu. */
.tvl-el-sarma { position: relative; }
.tvl-el-sarma::after {
    content: ''; position: absolute; right: 0; top: 0; bottom: 6px; width: 26px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(17,26,46,0), rgba(17,26,46,0.92));
}
.tvl-el-kutu {
    flex: 0 0 auto;
    width: 32px; height: 32px; border: 0; padding: 0; border-radius: 8px;
    cursor: pointer; font-family: inherit; position: relative;
    transition: transform 0.10s ease;
}
.tvl-el-kutu:active { transform: scale(0.9); }
/* Derin saat kutusu elde de işaretli durur — ama BOYU AYNI: ayıran şey
   ortadaki çekirdek, kalın çerçeve değil. (Kalın çerçeve kutuyu küçük
   gösteriyordu; "hepsi aynı boyda olsun" isteğinin sebebi buydu.) */
.tvl-el-kutu.derin::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 3px;
    background: rgba(10, 14, 26, 0.55);
}

/* Yola çıkan kutu SİLİNMEZ, yerinde soluklaşır: uçan kopya varana kadar
   "bu kutu gitti" demek yanlış olurdu (istek başarısız olabilir). */
.tvl-el-kutu.bosaldi { opacity: 0.18; pointer-events: none; transform: scale(0.86); }

/* Renk sırası: kutularla AYNI ölçüde, yan yana. Renk seçmek de bir kutuya
   dokunmak gibi görünsün — "istediğimi istediğim renkte yollayabiliyorum". */
.tvl-renk-bas {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin: 12px 0 6px; flex-wrap: wrap;
}

/* "Topluca gönder" kutuların SATIRINDA, en sonda. Satır yatay kayarken
   kaybolmasın diye sağ kenara yapışık. TEK dokunuş — onay adımı YOK. */
.tvl-hepsi {
    position: sticky; right: 0; flex: 0 0 auto;
    /* Sıkışmasın: kutulardan ayrılsın, kendi nefesi olsun. Kaydırınca son
       kutunun üstüne binmemesi için solunda gölge var. */
    margin-left: 10px;
    height: 32px; padding: 0 14px; border-radius: 10px;
    background: #131b2c;
    box-shadow: -10px 0 12px -6px rgba(10, 14, 26, 0.95);
    border: 1px dashed rgba(232, 201, 122, 0.45);
    color: #e8c97a; font-size: 11px; line-height: 30px; cursor: pointer;
    font-family: inherit; white-space: nowrap;
}
/* İkinci dokunuşu bekleyen hâl — geri alınamaz iş tek dokunuşla olmasın. */

/* Renk seçimi — sekiz kutu, hepsi ilk günden açık, hepsi AYNI BOY.
   Sekizi bir satıra sığsın diye eşit paylı ızgara: dar telefonda da tek
   satır kalır, kırılıp boyları değişmez. */
.tvl-renkler { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.tvl-renk {
    width: 100%; aspect-ratio: 1 / 1; max-width: 32px;
    border-radius: 8px; cursor: pointer;
    border: 2px solid transparent; padding: 0;
    transition: transform 0.10s ease;
}
.tvl-renk:active { transform: scale(0.9); }
.tvl-renk[aria-pressed="true"] { border-color: #e8e2d0; }

/* Mühür kartı perdesi (tek kalan perde). */
.tvl-perde {
    position: fixed; inset: 0; z-index: 10060;
    background: rgba(4, 7, 14, 0.72);
    display: flex; align-items: flex-end; justify-content: center;
    padding: 16px;
}
@media (min-width: 560px) { .tvl-perde { align-items: center; } }
.tvl-sayfa {
    width: 100%; max-width: 420px;
    background: #0f1626; border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px; padding: 16px; color: #e2e8f0;
}
.tvl-sayfa-alt { display: flex; gap: 8px; margin-top: 14px; }
.tvl-sayfa-alt button { flex: 1; padding: 10px; border-radius: 10px; font-family: inherit; cursor: pointer; font-size: 13px; }
.tvl-onay { background: linear-gradient(135deg, #e8c97a, #d4a94e); border: 0; color: #1a1608; font-weight: 700; }

/* ── hareket istemeyene ──────────────────────────────────────────────
   Uçuş yok: kutular yerinde belirir. Tamamlanma yalnız renk/opaklık. */
@media (prefers-reduced-motion: reduce) {
    .tvl-kutu.ucuyor { animation: none; opacity: 1; }
    .tvl-ucan, .tvl-ucan-dikey, .tvl-ucan-ic { animation: none !important; }
    .tvl-kutu.oturdu { animation: none; }
    .tvl-el-kutu, .tvl-renk { transition: none; }
    .tvl-tuval.muhurleniyor .tvl-kutu { animation: none; filter: brightness(1.5); }
    }