/* ═════════════════════════════════════════════════════════════════════════
   Dosya tepsisi (_Cekirdek/_DosyaTepsisi, [data-dosya-tepsisi]) — bütün temalar (tg7 2026-10-31). _DosyaVarliklari yükler.
   Tarayıcının çıplak "Dosya seç / Dosya seçilmedi" düğmesi yerine: tema renginde simge + "Fotoğraf ekleyin" (ya da "Dosya ekleyin")
   + "ya da buraya sürükleyip bırakın" + kurallar satırı; bütün alan tıklanır, sürüklenen dosya üstündeyken vurgulanır. Seçilenler önizleme
   (görsel) ya da belge simgesi + ad + boyut + kaldır düğmesiyle listelenir.
   Renk ve köşe temanın değişkenlerinden: --op-ana, --op-ana-metin, --op-cizgi, --op-metin, --op-ikincil, --op-kart, --op-yaricap-kucuk
   (yoksa makine ailesinin --vurgu / nötr yedek). Katmansız ve .dt-tepsi önekli: temaların genel form kuralları (.alan label, .op-alan
   input[type=file], button sıfırlamaları) tepsinin parçalarını ezmez. Erişilebilirlik: gizli dosya alanı odak alır, bırakma alanı odak
   halkası çizer; JS kapalıyken (.dt-js yok) yerel alan görünür, tepsi düğmesi ve sürükleme yazısı gizlenir. RTL: mantıksal özellikler.
   ═════════════════════════════════════════════════════════════════════════ */

.dt-tepsi [hidden] { display: none !important; }

.dt-tepsi {
    --dt-ana: var(--op-ana, var(--vurgu, #2f5bd3));
    --dt-ana-metin: var(--op-ana-metin, var(--dt-ana));
    --dt-cizgi: var(--op-cizgi, var(--cizgi, #d9dee4));
    --dt-metin: var(--op-metin, var(--metin, #1f2933));
    --dt-soluk: var(--op-ikincil, var(--soluk, #5b6670));
    --dt-yaricap: var(--op-yaricap-kucuk, var(--yaricap, 12px));
    display: grid; gap: 10px; min-inline-size: 0;
}
.dt-tepsi .dt-baslik { display: block; margin: 0; }
/* Tepsili form ızgarası (tek istisna; tepsinin kabı): yan sütundaki kısa alanın girdisi tepsi yüksekliğine esnemesin (kariyer: Telefon |
   Özgeçmiş). Makine talep formundaki .talep-formu .form-izgara kuralıyla aynı. */
:is(.form-izgara, .op-form-izgara):has(.dt-tepsi) { align-items: start; }

/* ── Bırakma alanı ── */
.dt-tepsi .dt-birak {
    position: relative; display: flex; align-items: center; gap: 14px 16px; box-sizing: border-box;
    min-block-size: 92px; margin: 0; padding: 16px 20px;
    border: 1.5px dashed color-mix(in srgb, var(--dt-ana) 40%, var(--dt-cizgi)); border-radius: var(--dt-yaricap);
    background: color-mix(in srgb, var(--dt-ana) 4%, #fff); color: var(--dt-metin);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.dt-tepsi.dt-js .dt-birak { cursor: pointer; }
.dt-tepsi.dt-js .dt-birak:hover, .dt-tepsi .dt-birak.dt-ustunde {
    border-color: var(--dt-ana); background: color-mix(in srgb, var(--dt-ana) 8%, #fff);
}
.dt-tepsi .dt-birak.dt-ustunde { border-style: solid; box-shadow: 0 0 0 4px color-mix(in srgb, var(--dt-ana) 16%, transparent); }
.dt-tepsi.dt-js .dt-birak:focus-within { outline: 2px solid var(--dt-ana); outline-offset: 3px; border-color: var(--dt-ana); }

.dt-tepsi .dt-ikon {
    flex: none; display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 50%;
    background: color-mix(in srgb, var(--dt-ana) 12%, #fff); color: var(--dt-ana-metin);
}
.dt-tepsi .dt-ikon svg { display: block; inline-size: 24px; block-size: 24px; }
.dt-tepsi .dt-birak-govde { flex: 1 1 auto; display: grid; gap: 4px; min-inline-size: 0; }
.dt-tepsi .dt-birak-satir { display: block; font-size: 15px; line-height: 1.45; }
.dt-tepsi .dt-birak .dt-sec {
    display: inline; margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
    font-size: 15.5px; font-weight: 700; line-height: inherit; letter-spacing: normal; text-transform: none;
    color: var(--dt-ana-metin); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer;
}
/* Bütün alan tıklanır: düğmenin (label) görünmez kaplaması bırakma alanını örter */
.dt-tepsi.dt-js .dt-birak .dt-sec::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.dt-tepsi .dt-birak-metin { color: var(--dt-soluk); font-size: 15px; font-weight: 400; }
.dt-tepsi .dt-kurallar { display: block; margin: 0; font-size: 13px; line-height: 1.45; color: var(--dt-soluk); }

/* Gizli dosya alanı (JS açık): görünmez, odak alır (Enter / Boşluk seçiciyi açar) */
.dt-tepsi.dt-js .dt-birak .dt-girdi {
    position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 1px; block-size: 1px;
    min-inline-size: 0; min-block-size: 0; max-inline-size: 1px; margin: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; clip-path: inset(50%);
    transition: none;   /* JS sınıfı eklenince yerel alan küçülürken görünmesin (temanın / hareket azaltmanın "all" geçişi) */
}
/* JS kapalı: yerel alan görünür (form yine gönderilir); tepsi düğmesi ve sürükleme yazısı gizli */
.dt-tepsi:not(.dt-js) .dt-sec, .dt-tepsi:not(.dt-js) .dt-birak-metin { display: none; }
.dt-tepsi:not(.dt-js) .dt-birak .dt-girdi {
    display: block; inline-size: 100%; max-inline-size: 100%; min-block-size: 0; margin: 0; padding: 4px 0; border: 0; background: none; font-size: 14px;
}

/* ── Seçilen dosyalar ── */
.dt-tepsi .dt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dt-tepsi .dt-liste:empty { display: none; }
.dt-tepsi .dt-oge {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0;
    padding-block: 8px; padding-inline: 8px 6px; border: 1px solid var(--dt-cizgi); border-radius: var(--dt-yaricap);
    background: var(--op-kart, #fff);
}
.dt-tepsi .dt-onizleme {
    display: grid; place-items: center; inline-size: 44px; block-size: 44px; overflow: hidden;
    border-radius: min(var(--dt-yaricap), 10px); background: color-mix(in srgb, var(--dt-ana) 10%, #fff); color: var(--dt-ana-metin);
}
.dt-tepsi .dt-onizleme canvas { display: block; inline-size: 100%; block-size: 100%; }
.dt-tepsi .dt-onizleme svg { display: block; inline-size: 22px; block-size: 22px; }
.dt-tepsi .dt-bilgi { display: grid; gap: 2px; min-inline-size: 0; }
.dt-tepsi .dt-ad {
    min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 600; color: var(--dt-metin);
}
.dt-tepsi .dt-boyut { font-size: 12.5px; color: var(--dt-soluk); white-space: nowrap; }
.dt-tepsi .dt-kaldir {
    display: grid; place-items: center; inline-size: 40px; block-size: 40px; min-inline-size: 0; min-block-size: 0; margin: 0; padding: 0;
    border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: var(--dt-soluk); cursor: pointer;
}
.dt-tepsi .dt-kaldir svg { display: block; inline-size: 18px; block-size: 18px; }
.dt-tepsi .dt-kaldir:hover { background: #fdecea; color: #b3261e; }
.dt-tepsi .dt-kaldir:focus-visible { outline: 2px solid var(--dt-ana); outline-offset: 2px; }
.dt-tepsi .dt-sayac { margin: 0; font-size: 13px; color: var(--dt-soluk); }
.dt-tepsi .dt-sayac:empty { display: none; }
.dt-tepsi .dt-hata, .dt-tepsi .dt-gizlilik { margin: 0; }
.dt-tepsi .dt-gizlilik { font-size: 13px; color: var(--dt-soluk); }

@media (max-width: 560px) {
    .dt-tepsi .dt-birak { gap: 12px; min-block-size: 0; padding: 14px; }
    .dt-tepsi .dt-ikon { inline-size: 42px; block-size: 42px; }
    .dt-tepsi .dt-ikon svg { inline-size: 22px; block-size: 22px; }
    .dt-tepsi .dt-birak-satir, .dt-tepsi .dt-birak-metin { font-size: 14px; }
    .dt-tepsi .dt-birak .dt-sec { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .dt-tepsi .dt-birak { transition: none; }
}