/* ═════════════════════════════════════════════════════════════════════════
   Görsel doğrulama kutusu (2026-10-24, _Cekirdek/_Dogrulama.cshtml) — bütün temalarda aynı sade görünüş: çerçeve yok, tek satır
   (resim + yenile simgesi + kod kutusu); etiket ve "okuyamıyorsanız" notu yalnız ekran okuyucuya. Renkleri temanın değişkenlerinden
   okur (yoksa nötr yedek): --cizgi, --soluk, --vurgu, --hata. Yazı tipi ve renk temadan gelir; temanın form kuralları (.form input …)
   kod kutusuna da uyar, bu dosyadaki kutu kuralları yalnız yedektir. Yalnız açık tema.
   Dokunma hedefleri en az 44 px; dar ekranda resim 118 px'e kadar küçülür, daha darda kod kutusu alt satıra iner (yatay taşma yok).
   ═════════════════════════════════════════════════════════════════════════ */
.tk-dg { grid-column: 1 / -1; margin: .5rem 0 1rem; padding: 0; border: 0; font-size: .95rem; line-height: 1.4; text-align: start;
    min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; }
.tk-dg .tk-dg-satir { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.tk-dg .tk-dg-resim { display: block; flex: 1 1 118px; inline-size: auto; min-inline-size: 118px; max-inline-size: 150px; block-size: auto; aspect-ratio: 3 / 1;
    border: 1px solid var(--cizgi, #d9dee4); border-radius: 6px; background: #fff; }
.tk-dg .tk-dg-yenile { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px;
    min-block-size: 44px; min-inline-size: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent;
    color: var(--soluk, #5b6670); box-shadow: none; cursor: pointer; }
.tk-dg .tk-dg-yenile svg { display: block; inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; }
.tk-dg .tk-dg-yenile:hover { color: var(--vurgu, #1f5fbf); background: rgba(0, 0, 0, .05); }
.tk-dg .tk-dg-yenile:focus-visible, .tk-dg .tk-dg-kod:focus-visible { outline: 2px solid var(--vurgu, #1f5fbf); outline-offset: 2px; }
.tk-dg .tk-dg-yenile[hidden] { display: none !important; }
.tk-dg .tk-dg-yenile:disabled { opacity: .5; cursor: progress; }
.tk-dg-kod { display: block; box-sizing: border-box; flex: 1 1 6rem; inline-size: auto; min-inline-size: 6rem; max-inline-size: 10rem;
    min-block-size: 44px; margin: 0; padding: .5rem .75rem; border: 1px solid var(--cizgi, #c7ced6); border-radius: 8px; background: #fff;
    color: inherit; font: inherit; font-size: 1.05rem; letter-spacing: .15em; text-transform: uppercase; }
.tk-dg .tk-dg-kod { padding-inline: .6rem; }   /* temanın geniş yan boşluğu dar satırda yer tutucuyu kesmesin */
.tk-dg .tk-dg-kod::placeholder { letter-spacing: normal; text-transform: none; font-size: .85rem; }
.tk-dg .tk-dg-kod[aria-invalid="true"] { border-color: var(--hata, #b42318); }
.tk-dg .tk-dg-hata { margin: .4rem 0 0; color: var(--hata, #b42318); font-weight: 600; font-size: .85rem; }
.tk-dg .tk-dg-gizli { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; margin: -1px !important;
    padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
    white-space: nowrap !important; border: 0 !important; }