/* Trendizm — ortak bileşenler (site, panel, SaaS, admin).
   Her blok ileride bir Blade bileşenine karşılık gelir: <x-dugme>, <x-kart>, <x-rozet>, <x-form.alan> ... */

/* Düğme — <x-dugme tur="ana|vurgu|cizgi|hayalet" boyut="sm|lg"> */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: var(--b-2); padding: .7rem 1.25rem; border: 1.5px solid transparent; border-radius: var(--r-tam); font-weight: var(--kalin-dugme); font-size: var(--fs-sm); line-height: 1.2; white-space: nowrap; transition: background var(--gecis), border-color var(--gecis), color var(--gecis), transform var(--gecis); }
.dugme svg { width: 18px; height: 18px; }
.dugme:active { transform: translateY(1px); }
.dugme--ana { background: var(--ana); color: #fff; }
.dugme--ana:hover { background: var(--ana-koyu); color: #fff; }
.dugme--vurgu { background: var(--vurgu); color: #fff; }
.dugme--vurgu:hover { background: var(--vurgu-koyu); color: #fff; }
.dugme--cizgi { background: var(--yuzey); border-color: var(--cizgi); color: var(--metin); }
.dugme--cizgi:hover { border-color: var(--ana); color: var(--ana); }
.dugme--hayalet { background: transparent; color: var(--metin-2); }
.dugme--hayalet:hover { background: var(--yuzey-2); color: var(--metin); }
.dugme--sm { padding: .45rem .9rem; font-size: var(--fs-xs); }
.dugme--lg { padding: .9rem 1.6rem; font-size: var(--fs-md); }
.dugme--blok { width: 100%; }

/* Kart — <x-kart> */
.kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-lg); }
.kart__govde { padding: var(--b-6); }
.kart__baslik { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--b-4); padding: var(--b-5) var(--b-6); border-bottom: 1px solid var(--cizgi); }
.kart__baslik h2, .kart__baslik h3 { font-size: var(--fs-lg); }

/* Rozet — <x-rozet durum="basari|uyari|hata|bilgi|notr"> */
.rozet { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-tam); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; background: var(--yuzey-2); color: var(--metin-2); }
.rozet::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rozet--basari { background: var(--basari-acik); color: var(--basari); }
.rozet--uyari { background: var(--uyari-acik); color: var(--uyari); }
.rozet--hata { background: var(--hata-acik); color: var(--hata); }
.rozet--bilgi { background: var(--bilgi-acik); color: var(--bilgi); }
.rozet--vurgu { background: var(--vurgu-acik); color: var(--vurgu-koyu); }

/* Form — <x-form.alan etiket="" ad="" > */
.alan { display: grid; gap: 6px; }
.alan label, .alan__etiket { font-size: var(--fs-sm); font-weight: 600; }
.giris, .secim, .metin-alani { width: 100%; padding: .7rem .9rem; background: var(--yuzey); border: 1.5px solid var(--cizgi); border-radius: var(--r-md); transition: border-color var(--gecis), box-shadow var(--gecis); }
.giris:focus, .secim:focus, .metin-alani:focus { outline: 0; border-color: var(--ana); box-shadow: 0 0 0 4px var(--ana-acik); }
.alan__ipucu { font-size: var(--fs-xs); color: var(--metin-3); }
.form-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--b-4); }
.form-izgara .tam { grid-column: 1 / -1; }

/* Tablo — <x-tablo> */
.tablo-sar { overflow-x: auto; }
.tablo { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tablo th { text-align: left; padding: var(--b-3) var(--b-4); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--metin-3); border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.tablo td { padding: var(--b-4); border-bottom: 1px solid var(--cizgi); vertical-align: middle; white-space: nowrap; }
.tablo tr:last-child td { border-bottom: 0; }
.tablo tbody tr:hover { background: var(--zemin); }
.tablo .sag { text-align: right; }

/* Avatar */
.avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ana-acik); color: var(--ana); font-size: var(--fs-xs); font-weight: 700; flex: none; }

/* Simge (satır içi SVG) */
.simge { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 640px) {
	.form-izgara { grid-template-columns: 1fr; }
}
/* Logo — <x-logo> */
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: var(--fs-lg); color: var(--metin); letter-spacing: -.02em; }
.logo:hover { color: var(--metin); }
.logo__isaret { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ana); color: #fff; }
.logo__isaret svg { width: 20px; height: 20px; }