/* Tiklive: müşteri ve yönetim panellerindeki özel sayfaların stilleri.
   Filament'in kendi renk değişkenleri kullanılır; açık ve koyu temada ayrıca ayar gerekmez. */

.tl-grid { display: grid; gap: 1rem; }
.tl-grid-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tl-grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.tl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.25rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid rgb(0 0 0 / .08);
}
.dark .tl-card { background: rgb(255 255 255 / .04); border-color: rgb(255 255 255 / .09); }

.tl-card-one { border-color: var(--primary-500); box-shadow: 0 0 0 1px var(--primary-500); }
.tl-rozet {
    align-self: flex-start;
    padding: .2rem .6rem;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--primary-500);
    color: #fff;
}
.tl-rozet-gri { background: rgb(127 127 127 / .18); color: inherit; }
.tl-rozet-yesil { background: rgb(34 197 94 / .16); color: rgb(22 163 74); }
.dark .tl-rozet-yesil { color: rgb(74 222 128); }
.tl-rozet-sari { background: rgb(245 158 11 / .16); color: rgb(217 119 6); }
.dark .tl-rozet-sari { color: rgb(251 191 36); }

.tl-baslik { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.tl-ust { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.tl-soluk { font-size: .9rem; opacity: .7; line-height: 1.5; }
.tl-buyuk { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.tl-buyuk small { font-size: .9rem; font-weight: 500; opacity: .65; letter-spacing: 0; }

.tl-liste { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.tl-liste li { display: flex; gap: .55rem; align-items: baseline; }
.tl-liste li::before {
    content: "";
    flex: none;
    width: .5rem;
    height: .5rem;
    border-radius: 99px;
    background: var(--primary-500);
    transform: translateY(-.05rem);
}

.tl-adimlar { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; counter-reset: adim; }
.tl-adimlar li { display: flex; gap: .8rem; align-items: flex-start; font-size: .92rem; line-height: 1.5; counter-increment: adim; }
.tl-adimlar li::before {
    content: counter(adim);
    flex: none;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 99px;
    font-size: .8rem;
    font-weight: 700;
    background: var(--primary-500);
    color: #fff;
}

.tl-satir { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.tl-alt { margin-top: auto; padding-top: .5rem; }
.tl-alt form { display: block; }

.tl-tablo { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tl-tablo th { text-align: left; font-weight: 600; opacity: .6; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; padding: .4rem .5rem; }
.tl-tablo td { padding: .6rem .5rem; border-top: 1px solid rgb(127 127 127 / .18); }

.tl-kapak {
    aspect-ratio: 16 / 9;
    border-radius: .7rem;
    background: linear-gradient(135deg, rgb(255 77 90 / .28), rgb(62 230 196 / .2));
    background-size: cover;
    background-position: center;
}