/* =====================================================================
   SUNUCU BARINDIRMA — KABIN PLANLAYICI (2026-10-22)
   Kullanici: "sunucu barindirma tarafi cok yaban duruyor; mantiksal, yaratici, sanatsal, canvas destekli".
   Tam genislik koyu veri salonu sahnesi (iki kipte de koyu: sayfanin hero'su gibi bir "nesne" bandi);
   solda fotogercekci 42U kabin tuvali (turkbil-colo.js), sagda neon cerceveli cam kart.
   Renkler: gece #050B17/#0D1D3A, marka mavi #3564AF/#8DB8FF, logo kirmizisi #C4162B/#D04555.
   ===================================================================== */
.tb-colo {
    position: relative; isolation: isolate; overflow: hidden;
    padding-block: clamp(3rem, 6vw, 5.5rem);
    color: #E8EEF7;
    background:
        radial-gradient(55% 70% at 28% 45%, rgba(53, 100, 175, .22) 0%, rgba(53, 100, 175, 0) 70%),
        radial-gradient(40% 60% at 92% 90%, rgba(196, 22, 43, .10) 0%, rgba(196, 22, 43, 0) 70%),
        linear-gradient(180deg, #050b17 0%, #081329 55%, #060d1c 100%);
}
/* sahne: kabin tuvali, hafif 3B egim (imlecle 5 dereceye kadar) */
.tb-colo-sahne { position: absolute; inset: 0 auto 0 0; width: 60%; z-index: 0; perspective: 1500px; perspective-origin: 55% 45%; }
.tb-colo-kabin {
    position: absolute; inset: 0 3% 0 4%;
    transform: rotateY(calc(-7deg + var(--tb-colo-ry, 0deg))) rotateX(calc(1.5deg + var(--tb-colo-rx, 0deg)));
    transform-origin: 70% 50%;
    -webkit-mask-image: radial-gradient(62% 58% at 52% 50%, #000 62%, transparent 100%);
            mask-image: radial-gradient(62% 58% at 52% 50%, #000 62%, transparent 100%);
}
.tb-colo-tuval { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.tb-colo-hazir .tb-colo-tuval { opacity: 1; }
.tb-colo-temsili { position: absolute; left: clamp(1rem, 3vw, 2.5rem); bottom: 1rem; font-size: .72rem; color: rgba(200, 214, 235, .45); }

.tb-colo-govde { position: relative; z-index: 1; display: flex; justify-content: flex-end; }
/* kart: cam + neon cerceve (alan adi kartiyla ayni dil; @property --tb-neon-aci turkbil-ui.css'te) */
.tb-colo-kart {
    position: relative; isolation: isolate;
    width: min(100%, 580px); margin: 0;
    padding: clamp(1.4rem, 2.4vw, 2.1rem) clamp(1.3rem, 2.4vw, 2.1rem) clamp(1.2rem, 2vw, 1.7rem);
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(18, 33, 64, .88) 0%, rgba(9, 18, 37, .92) 100%);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.tb-colo-kart > * { position: relative; z-index: 2; }
.tb-colo-kart::before {
    content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1.5px; pointer-events: none;
    background: conic-gradient(from var(--tb-neon-aci), transparent 0deg 196deg, rgba(53, 100, 175, .55) 214deg, #7998CA 246deg, #AABDDD 276deg, #D04555 312deg, rgba(196, 22, 43, .5) 334deg, transparent 352deg 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: tb-neon-don 7s linear infinite;
}
.tb-colo-kart::after {
    content: ""; position: absolute; inset: -3px; z-index: 0; border-radius: 25px; padding: 3px; pointer-events: none;
    background: conic-gradient(from var(--tb-neon-aci), transparent 0deg 200deg, #7998CA 250deg, #D04555 315deg, transparent 350deg 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    filter: blur(9px); opacity: .6; animation: tb-neon-don 7s linear infinite;
}
.tb-colo-kart h2 { margin: 0 0 .55rem; font: 700 clamp(1.45rem, 2.3vw, 1.95rem)/1.15 var(--tb-font-baslik, Barlow, sans-serif); letter-spacing: -.02em; color: #F4F7FC; text-wrap: balance; }
.tb-colo-m { margin: 0 0 1.3rem; font-size: .93rem; line-height: 1.6; color: #A9B8CD; max-width: 56ch; }

.tb-colo-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; }
.tb-colo-genis { grid-column: 1 / -1; }
.tb-colo-grup { margin: 0; padding: 0; border: 0; min-width: 0; }
.tb-colo-grup legend, .tb-colo-et { display: block; float: none; width: auto; margin: 0 0 .45rem; padding: 0; font: 600 .82rem/1.2 var(--tb-font-baslik, Barlow, sans-serif); letter-spacing: .01em; color: #C7D3E4; }
.tb-colo-secim { display: flex; flex-wrap: wrap; gap: .4rem; }
.tb-colo-secim input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tb-colo-secim label {
    cursor: pointer; display: inline-flex; align-items: center; min-height: 40px; padding: .5rem .85rem; border-radius: 11px;
    border: 1px solid rgba(141, 184, 255, .18); background: rgba(255, 255, 255, .035);
    font: 600 .88rem/1.1 var(--tb-font-baslik, Barlow, sans-serif); color: #C9D5E6; font-variant-numeric: tabular-nums;
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.tb-colo-secim label:hover { border-color: rgba(141, 184, 255, .42); color: #fff; }
.tb-colo-secim input:checked + label {
    color: #fff; border-color: rgba(141, 184, 255, .6);
    background: linear-gradient(135deg, #3d6fbf 0%, #24467e 100%);
    box-shadow: 0 0 0 1px rgba(141, 184, 255, .2), 0 10px 22px -12px rgba(53, 100, 175, .95);
}
.tb-colo-secim input:focus-visible + label { outline: 2px solid #8DB8FF; outline-offset: 2px; }
.tb-colo-adim { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem; border-radius: 12px; border: 1px solid rgba(141, 184, 255, .18); background: rgba(255, 255, 255, .035); }
.tb-colo-adim button { all: unset; cursor: pointer; display: grid; place-items: center; width: 38px; height: 36px; border-radius: 9px; color: #E8EEF7; font-size: 1rem; }
.tb-colo-adim button:hover { background: rgba(141, 184, 255, .14); }
.tb-colo-adim button:focus-visible { outline: 2px solid #8DB8FF; outline-offset: 1px; }
.tb-colo-adim button:disabled { opacity: .35; cursor: default; background: none; }
.tb-colo-adim output { min-width: 2.2ch; text-align: center; font: 700 1.05rem/1 var(--tb-font-baslik, Barlow, sans-serif); color: #fff; font-variant-numeric: tabular-nums; }

.tb-colo-ozet { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; margin: 1.3rem 0 1rem; padding: .8rem .95rem; border-radius: 12px; background: rgba(5, 11, 23, .55); border: 1px solid rgba(141, 184, 255, .12); }
.tb-colo-ozet span { font: 600 .78rem/1.2 var(--tb-font-baslik, Barlow, sans-serif); color: #8DB8FF; }
.tb-colo-ozet b { font: 600 .92rem/1.4 var(--tb-font-govde, "Open Sans", sans-serif); color: #F2F6FC; font-variant-numeric: tabular-nums; }
.tb-colo-eylem { display: flex; flex-wrap: wrap; gap: .6rem; }
.tb-colo-eylem .tb-btn { min-height: 46px; }
.tb-colo .tb-colo-wa { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.15rem; border-radius: 12px; color: #E8EEF7; border: 1px solid rgba(141, 184, 255, .26); background: rgba(255, 255, 255, .04); font-weight: 600; text-decoration: none; }
.tb-colo .tb-colo-wa:hover { color: #fff; border-color: rgba(37, 211, 102, .55); background: rgba(37, 211, 102, .10); }
.tb-colo-not { margin: .8rem 0 0; font-size: .8rem; color: #8FA1B9; }

/* aydinlik kip: sahne bandi koyu kalir; temanin aydinlik dugme/metin kurallari burada etkisiz */
html:not([data-bs-theme="dark"]) .tb-colo { color: #E8EEF7; }
html:not([data-bs-theme="dark"]) .tb-colo .tb-colo-kart h2 { color: #F4F7FC; }
html:not([data-bs-theme="dark"]) .tb-colo .tb-colo-m { color: #A9B8CD; }
html:not([data-bs-theme="dark"]) .tb-colo .tb-colo-wa { color: #E8EEF7; background: rgba(255, 255, 255, .04); }

/* sagdan sola: kabin sagda, kart solda (flex-end mantiksal: rtl'de kendiliginden sol), egim aynalanir */
[dir="rtl"] .tb-colo-sahne { inset: 0 0 0 auto; }
[dir="rtl"] .tb-colo-kabin { transform: rotateY(calc(7deg + var(--tb-colo-ry, 0deg))) rotateX(calc(1.5deg + var(--tb-colo-rx, 0deg))); transform-origin: 30% 50%; }
[dir="rtl"] .tb-colo-temsili { left: auto; right: clamp(1rem, 3vw, 2.5rem); }

/* dar masaustu (992-1279): kart kabinin ustune binmesin; sahne ve kart daralir */
@media (min-width: 992px) and (max-width: 1279.98px) {
    .tb-colo-sahne { width: 54%; }
    .tb-colo-kart { width: min(100%, 500px); }
}
/* tablet / telefon: kabin ustte, kart altta */
@media (max-width: 991.98px) {
    .tb-colo { padding-block: 0 2.6rem; }
    .tb-colo-sahne { position: relative; inset: auto; width: 100%; height: clamp(320px, 62vw, 460px); }
    .tb-colo-kabin { inset: 0; transform: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%); }
    [dir="rtl"] .tb-colo-kabin { transform: none; }
    .tb-colo-govde { justify-content: center; margin-top: -1rem; }
    .tb-colo-temsili { bottom: 1.6rem; }   /* kart sahnenin alt 1rem'ine biner */
}
@media (max-width: 575.98px) {
    .tb-colo-izgara { grid-template-columns: minmax(0, 1fr); }
    .tb-colo-kart { border-radius: 18px; }
    .tb-colo-eylem .tb-btn, .tb-colo-eylem .tb-colo-wa { flex: 1 1 100%; justify-content: center; }
}
/* dokunmatik: secim ve adim dugmeleri en az 44px */
@media (pointer: coarse) {
    .tb-colo-secim label { min-height: 44px; }
    .tb-colo-adim button { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .tb-colo-kart::before, .tb-colo-kart::after { animation: none; }
    .tb-colo-tuval { transition: none; }
}