Update component configurations and styles: add new registry for @magicui in components.json, remove unused opengraph image files, and enhance opengraph-image.tsx with new font loading and styling adjustments. Refactor button sizes and styles in various components for improved responsiveness and visual consistency. Overall, these changes aim to streamline the application and enhance user experience.

src/components/katalog-arama.tsx

@@ -122,7 +122,7 @@ export function KatalogArama() {
         type="button"
         onClick={() => setAcik(true)}
         aria-label="Bölüm veya üniversite ara"
-        className="ml-auto flex size-10 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-white text-slate-700 transition-[background-color,transform] duration-150 hover:bg-slate-100 active:scale-[0.96] sm:hidden"
+        className="ml-auto flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-white text-slate-700 transition-[background-color,transform] duration-150 hover:bg-slate-100 active:scale-[0.96] sm:hidden"
       >
         <Search className="size-4" aria-hidden />
       </button>

src/components/manuel-liste/listem-butonu.tsx

@@ -29,9 +29,9 @@ export function ListemButonu() {
       aria-expanded={acik}
       aria-label={`Seçtiklerim — ${liste.length}/${MANUEL_LISTE_MAX} program`}
       title="Tablodan seçtiğin programlar"
-      className="relative inline-flex h-12 cursor-pointer items-center gap-2 whitespace-nowrap rounded-full border border-slate-200 bg-white px-5 text-sm font-semibold text-slate-700 transition-[color,background-color,border-color,transform] duration-200 hover:border-slate-300 hover:bg-slate-50 active:scale-[0.97]"
+      className="relative inline-flex h-9 cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-full border border-slate-200 bg-white px-3 text-xs font-semibold text-slate-700 transition-[color,background-color,border-color,transform] duration-200 hover:border-slate-300 hover:bg-slate-50 active:scale-[0.97] sm:h-12 sm:gap-2 sm:px-5 sm:text-sm"
     >
-      <ListChecks className="size-4 text-primary" aria-hidden />
+      <ListChecks className="size-3.5 text-primary sm:size-4" aria-hidden />
       <span className="hidden sm:inline">Seçtiklerim</span>
       {liste.length > 0 ? (
         // key=length: her eklemede rozet yeniden doğar ve spring ile oturur

src/components/sign-out-button.tsx

@@ -11,14 +11,14 @@ export function SignOutButton() {
     <Button
       size="sm"
       variant="ghost"
-      className="size-12 cursor-pointer rounded-full border border-slate-200 bg-white text-slate-600 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900"
+      className="size-9 cursor-pointer rounded-full border border-slate-200 bg-white text-slate-600 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 sm:size-12"
       aria-label="Çıkış yap"
       onClick={async () => {
         await authClient.signOut();
         router.refresh();
       }}
     >
-      <LogOut className="size-5" aria-hidden />
+      <LogOut className="size-4 sm:size-5" aria-hidden />
     </Button>
   );
 }

src/components/site-header.tsx

@@ -6,11 +6,11 @@ import { UserNav, UserNavFallback } from "@/components/user-nav";
 
 export function SiteHeader() {
   return (
-    <header className="sticky top-6 z-50 mt-6 print:hidden">
-      <div className="relative mx-auto flex h-16 max-w-6xl items-center justify-between gap-3 px-4">
+    <header className="sticky top-4 z-50 mt-4 sm:top-6 sm:mt-6 print:hidden">
+      <div className="relative mx-auto flex h-12 max-w-6xl items-center justify-between gap-2 px-3 sm:h-16 sm:gap-3 sm:px-4">
         <Link
           href="/"
-          className="group flex items-center font-bricolage text-xl"
+          className="group flex min-w-0 shrink items-center font-bricolage"
         >
           <Image
             src="/kolay-tercih-mark.svg"
@@ -18,11 +18,13 @@ export function SiteHeader() {
             width={44}
             height={44}
             aria-hidden="true"
-            className="size-11 shrink-0"
+            className="size-8 shrink-0 sm:size-11"
           />
-          <span>
-            <span className="font-light text-3xl tracking-tighter">Kolay</span>
-            <span className="font-semibold text-3xl tracking-tighter">
+          <span className="truncate">
+            <span className="text-lg font-light tracking-tighter sm:text-3xl">
+              Kolay
+            </span>
+            <span className="text-lg font-semibold tracking-tighter sm:text-3xl">
               Tercih
             </span>
           </span>

src/components/user-nav.tsx

@@ -11,8 +11,8 @@ import { SignOutButton } from "./sign-out-button";
  */
 export function UserNavFallback() {
   return (
-    <div className="flex items-center gap-2" aria-hidden>
-      <div className="h-12 w-28 rounded-full bg-slate-900/10" />
+    <div className="flex shrink-0 items-center gap-1.5 sm:gap-2" aria-hidden>
+      <div className="h-9 w-16 rounded-full bg-slate-900/10 sm:h-12 sm:w-28" />
     </div>
   );
 }
@@ -23,11 +23,11 @@ export async function UserNav() {
   // Manuel liste localStorage'ta yaşadığı için Listem girişsiz de çalışır
   if (!u) {
     return (
-      <div className="flex items-center gap-2">
+      <div className="flex shrink-0 items-center gap-1.5 sm:gap-2">
         <ListemButonu />
         <Button
           asChild
-          className="h-12 cursor-pointer rounded-full bg-slate-900 px-7 text-base font-medium text-white transition-colors duration-200 hover:bg-slate-700"
+          className="h-9 cursor-pointer rounded-full bg-slate-900 px-3.5 text-sm font-medium text-white transition-colors duration-200 hover:bg-slate-700 sm:h-12 sm:px-7 sm:text-base"
         >
           <Link href="/giris">Giriş yap</Link>
         </Button>
@@ -36,15 +36,16 @@ export async function UserNav() {
   }
 
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex shrink-0 items-center gap-1.5 sm:gap-2">
       <ListemButonu />
       <Link
         href="/paket"
-        className="inline-flex h-12 items-center gap-2 whitespace-nowrap rounded-full border border-slate-200 bg-white px-5 text-sm font-semibold text-slate-700 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50"
+        className="inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-full border border-slate-200 bg-white px-3 text-xs font-semibold text-slate-700 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50 sm:h-12 sm:gap-2 sm:px-5 sm:text-sm"
         title="Kredilerin — yüklemek için tıkla"
       >
-        <Coins className="size-4 text-amber-500" aria-hidden />
-        {u.creditBalance} kredi
+        <Coins className="size-3.5 text-amber-500 sm:size-4" aria-hidden />
+        <span className="tabular-nums">{u.creditBalance}</span>
+        <span className="hidden sm:inline">kredi</span>
       </Link>
       <SignOutButton />
     </div>