From f1c7e57e43ec0354f4ee719cd507fddda47d030c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Tue, 23 Jun 2026 11:06:06 +0300
Subject: [PATCH] style: refine services card responsive typography and layout
 styling

---
 .../templates/home/services-cards.blade.php   | 110 +++++++++++++-----
 1 file changed, 82 insertions(+), 28 deletions(-)

diff --git a/resources/views/templates/home/services-cards.blade.php b/resources/views/templates/home/services-cards.blade.php
index ca3b54a..f44a220 100644
--- a/resources/views/templates/home/services-cards.blade.php
+++ b/resources/views/templates/home/services-cards.blade.php
@@ -1,52 +1,52 @@
 <section class="wrapper !bg-[#ffffff]">
 <div class="container">
-	<div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mb-[4.5rem] !mt-[-9rem] xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem]">
-	<div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
+	<div class="flex flex-wrap glass-card-row !mb-[4.5rem] !mt-[-9rem] xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem]">
+	<div class="w-6/12 md:w-6/12 lg:w-6/12 xl:w-3/12 flex-[0_0_auto] max-w-full glass-card-col">
 		<div class="card glass-card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] h-full flex flex-col">
-		<div class="card-body flex-[1_1_auto] p-[40px] flex flex-col">
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  solid-mono text-[#e668b3] text-fuchsia !mb-3"><path class="fill-primary" d="M152 0H29.33A29.32 29.32 0 000 29.33v165.33A29.32 29.32 0 0029.33 224h78.72l2.35-13.12a29.71 29.71 0 018.11-15.68l62.83-62.72V29.33A29.33 29.33 0 00152 0zM42.67 42.67h42.67a10.67 10.67 0 110 21.33H42.66a10.67 10.67 0 010-21.33zM96 149.33H42.67a10.67 10.67 0 110-21.33H96a10.67 10.67 0 110 21.33zm42.67-42.66h-96a10.67 10.67 0 010-21.34h96a10.67 10.67 0 110 21.34z"></path><path class="fill-secondary" d="M133.63 256a8 8 0 01-7.89-9.38l5.67-32.06a8 8 0 012.22-4.27l79.2-79.2c9.73-9.75 19.28-7.12 24.51-1.89l13.2 13.2a18.69 18.69 0 010 26.4l-79.2 79.2a7.83 7.83 0 01-4.27 2.22l-32 5.67a10.71 10.71 0 01-1.44.11zm32.05-13.65z"></path></svg>
-			<h4>{!! t('Yapay Zeka') !!}</h4>
-			<p class="!mb-2 flex-1 min-h-[4.5rem]">{!! t('Yapay zeka teknolojilerini kullanarak işlerinizi otomatikleştirebiliriz.') !!}</p>
-			<a href="{{ route('page.show', ['slug' => 'yapay-zeka']) }}" class="more hover !text-[#e668b3] focus:!text-[#e668b3] hover:!text-[#e668b3] !mt-auto">{!! t('Daha fazla bilgi edin') !!}</a>
+		<div class="card-body glass-card-body flex-[1_1_auto] flex flex-col">
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="svg-inject icon-svg !w-[1.8rem] !h-[1.8rem] md:!w-[2.2rem] md:!h-[2.2rem] solid-mono text-[#e668b3] text-fuchsia !mb-2 md:!mb-3"><path class="fill-primary" d="M152 0H29.33A29.32 29.32 0 000 29.33v165.33A29.32 29.32 0 0029.33 224h78.72l2.35-13.12a29.71 29.71 0 018.11-15.68l62.83-62.72V29.33A29.33 29.33 0 00152 0zM42.67 42.67h42.67a10.67 10.67 0 110 21.33H42.66a10.67 10.67 0 010-21.33zM96 149.33H42.67a10.67 10.67 0 110-21.33H96a10.67 10.67 0 110 21.33zm42.67-42.66h-96a10.67 10.67 0 010-21.34h96a10.67 10.67 0 110 21.34z"></path><path class="fill-secondary" d="M133.63 256a8 8 0 01-7.89-9.38l5.67-32.06a8 8 0 012.22-4.27l79.2-79.2c9.73-9.75 19.28-7.12 24.51-1.89l13.2 13.2a18.69 18.69 0 010 26.4l-79.2 79.2a7.83 7.83 0 01-4.27 2.22l-32 5.67a10.71 10.71 0 01-1.44.11zm32.05-13.65z"></path></svg>
+			<h4 class="!text-[14px] md:!text-[1.1rem] !mb-1 md:!mb-2">{!! t('Yapay Zeka') !!}</h4>
+			<p class="!mb-2 flex-1 min-h-[4rem] md:min-h-[4.5rem] !text-[11px] md:!text-[14px] !leading-snug md:!leading-relaxed">{!! t('Yapay zeka teknolojilerini kullanarak işlerinizi otomatikleştirebiliriz.') !!}</p>
+			<a href="{{ route('page.show', ['slug' => 'yapay-zeka']) }}" class="more hover !text-[#e668b3] focus:!text-[#e668b3] hover:!text-[#e668b3] !mt-auto !text-[11px] md:!text-[14px]">{!! t('Daha fazla bilgi edin') !!}</a>
 		</div>
 		<!--/.card-body -->
 		</div>
 		<!--/.card -->
 	</div>
 	<!--/column -->
-	<div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
+	<div class="w-6/12 md:w-6/12 lg:w-6/12 xl:w-3/12 flex-[0_0_auto] max-w-full glass-card-col">
 		<div class="card glass-card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] h-full flex flex-col">
-		<div class="card-body flex-[1_1_auto] p-[40px] flex flex-col">
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  solid-mono text-[#a07cc5] text-violet !mb-3"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
-			<h4>{!! t('Web Uygulamaları') !!}</h4>
-			<p class="!mb-2 flex-1 min-h-[4.5rem]">{!! t('Web uygulamaları geliştirmek için gerekli olan tüm hizmetleri sunuyoruz.') !!}</p>
-			<a href="{{ route('page.show', ['slug' => 'web-uygulamalari']) }}" class="more hover !text-[#a07cc5] focus:!text-[#a07cc5] hover:!text-[#a07cc5] !mt-auto">{!! t('Daha fazla bilgi edin') !!}</a>
+		<div class="card-body glass-card-body flex-[1_1_auto] flex flex-col">
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-inject icon-svg !w-[1.8rem] !h-[1.8rem] md:!w-[2.2rem] md:!h-[2.2rem] solid-mono text-[#a07cc5] text-violet !mb-2 md:!mb-3"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
+			<h4 class="!text-[14px] md:!text-[1.1rem] !mb-1 md:!mb-2">{!! t('Web Uygulamaları') !!}</h4>
+			<p class="!mb-2 flex-1 min-h-[4rem] md:min-h-[4.5rem] !text-[11px] md:!text-[14px] !leading-snug md:!leading-relaxed">{!! t('Web uygulamaları geliştirmek için gerekli olan tüm hizmetleri sunuyoruz.') !!}</p>
+			<a href="{{ route('page.show', ['slug' => 'web-uygulamalari']) }}" class="more hover !text-[#a07cc5] focus:!text-[#a07cc5] hover:!text-[#a07cc5] !mt-auto !text-[11px] md:!text-[14px]">{!! t('Daha fazla bilgi edin') !!}</a>
 		</div>
 		<!--/.card-body -->
 		</div>
 		<!--/.card -->
 	</div>
 	<!--/column -->
-	<div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
+	<div class="w-6/12 md:w-6/12 lg:w-6/12 xl:w-3/12 flex-[0_0_auto] max-w-full glass-card-col">
 		<div class="card glass-card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] h-full flex flex-col">
-		<div class="card-body flex-[1_1_auto] p-[40px] flex flex-col">
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  solid-mono text-[#f78b77] text-orange !mb-3"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"></path></svg>
-			<h4>{!! t('Müzik Prodüksiyon') !!}</h4>
-			<p class="!mb-2 flex-1 min-h-[4.5rem]">{!! t('Müzik prodüksiyonu, film müzikleri, kurumsal müzik çalışmaları ve benzeri alanlarda hizmet veriyoruz.') !!}</p>
-			<a href="{{ route('music-productions.index') }}" class="more hover !text-[#f78b77] focus:!text-[#f78b77] hover:!text-[#f78b77] !mt-auto">{!! t('Daha fazla bilgi edin') !!}</a>
+		<div class="card-body glass-card-body flex-[1_1_auto] flex flex-col">
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="svg-inject icon-svg !w-[1.8rem] !h-[1.8rem] md:!w-[2.2rem] md:!h-[2.2rem] solid-mono text-[#f78b77] text-orange !mb-2 md:!mb-3"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"></path></svg>
+			<h4 class="!text-[14px] md:!text-[1.1rem] !mb-1 md:!mb-2">{!! t('Müzik Prodüksiyon') !!}</h4>
+			<p class="!mb-2 flex-1 min-h-[4rem] md:min-h-[4.5rem] !text-[11px] md:!text-[14px] !leading-snug md:!leading-relaxed">{!! t('Müzik prodüksiyonu, film müzikleri, kurumsal müzik çalışmaları ve benzeri alanlarda hizmet veriyoruz.') !!}</p>
+			<a href="{{ route('music-productions.index') }}" class="more hover !text-[#f78b77] focus:!text-[#f78b77] hover:!text-[#f78b77] !mt-auto !text-[11px] md:!text-[14px]">{!! t('Daha fazla bilgi edin') !!}</a>
 		</div>
 		<!--/.card-body -->
 		</div>
 		<!--/.card -->
 	</div>
 	<!--/column -->
-	<div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
+	<div class="w-6/12 md:w-6/12 lg:w-6/12 xl:w-3/12 flex-[0_0_auto] max-w-full glass-card-col">
 		<div class="card glass-card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] h-full flex flex-col">
-		<div class="card-body flex-[1_1_auto] p-[40px] flex flex-col">
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  solid-mono text-[#45c4a0] text-green !mb-3"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
-			<h4>{!! t('Uygulama Geliştirme') !!}</h4>
-			<p class="!mb-2 flex-1 min-h-[4.5rem]">{!! t('Android, iOS, MacOS, Windows uygulamaları geliştiriyoruz.') !!}</p>
-			<a href="{{ route('page.show', ['slug' => 'uygulama-gelistirme']) }}" class="more hover !text-[#45c4a0] focus:!text-[#45c4a0] hover:!text-[#45c4a0] !mt-auto">{!! t('Daha fazla bilgi edin') !!}</a>
+		<div class="card-body glass-card-body flex-[1_1_auto] flex flex-col">
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-inject icon-svg !w-[1.8rem] !h-[1.8rem] md:!w-[2.2rem] md:!h-[2.2rem] solid-mono text-[#45c4a0] text-green !mb-2 md:!mb-3"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
+			<h4 class="!text-[14px] md:!text-[1.1rem] !mb-1 md:!mb-2">{!! t('Uygulama Geliştirme') !!}</h4>
+			<p class="!mb-2 flex-1 min-h-[4rem] md:min-h-[4.5rem] !text-[11px] md:!text-[14px] !leading-snug md:!leading-relaxed">{!! t('Android, iOS, MacOS, Windows uygulamaları geliştiriyoruz.') !!}</p>
+			<a href="{{ route('page.show', ['slug' => 'uygulama-gelistirme']) }}" class="more hover !text-[#45c4a0] focus:!text-[#45c4a0] hover:!text-[#45c4a0] !mt-auto !text-[11px] md:!text-[14px]">{!! t('Daha fazla bilgi edin') !!}</a>
 		</div>
 		<!--/.card-body -->
 		</div>
@@ -60,9 +60,45 @@
 </section>
 
 <style>
+.glass-card-row {
+  margin-left: -8px !important;
+  margin-right: -8px !important;
+}
+
+@media (min-width: 768px) {
+  .glass-card-row {
+    margin-left: -12.5px !important;
+    margin-right: -12.5px !important;
+  }
+}
+
+.glass-card-col {
+  padding-left: 8px !important;
+  padding-right: 8px !important;
+  margin-top: 16px !important;
+}
+
+@media (min-width: 768px) {
+  .glass-card-col {
+    padding-left: 12.5px !important;
+    padding-right: 12.5px !important;
+    margin-top: 25px !important;
+  }
+}
+
+.glass-card-body {
+  padding: 20px !important;
+}
+
+@media (min-width: 768px) {
+  .glass-card-body {
+    padding: 40px !important;
+  }
+}
+
 .glass-card {
   position: relative !important;
-  border-radius: 30px !important;
+  border-radius: 16px !important;
   border: none !important;
   background: rgba(255, 255, 255, 0) !important;
   overflow: visible !important;
@@ -70,6 +106,12 @@
   transition: all 0.3s ease-in-out;
 }
 
+@media (min-width: 768px) {
+  .glass-card {
+    border-radius: 30px !important;
+  }
+}
+
 .glass-card svg {
 	filter: brightness(1.4);
 	transition: all 0.3s ease-in-out;
@@ -97,23 +139,35 @@
     inset: 0;
     z-index: 1;
     overflow: hidden;
-    border-radius: 30px;
+    border-radius: 16px;
     pointer-events: none;
     -webkit-box-shadow: inset 2px 2px 0px -2px rgba(255, 255, 255, 0.7), inset 0 0 3px 1px rgba(255, 255, 255, 0.7);
             box-shadow: inset 2px 2px 0px -2px rgba(255, 255, 255, 0.7), inset 0 0 3px 1px rgba(255, 255, 255, 0.7);
 }
 
+@media (min-width: 768px) {
+  .glass-card::before {
+    border-radius: 30px;
+  }
+}
+
 .glass-card::after {
     content: '';
     position: absolute;
     z-index: -1;
     inset: 0;
-    border-radius: 30px;
+    border-radius: 16px;
     -webkit-backdrop-filter: blur(15px);
             backdrop-filter: blur(15px);
     overflow: hidden;
 }
 
+@media (min-width: 768px) {
+  .glass-card::after {
+    border-radius: 30px;
+  }
+}
+
 .glass-card:hover {
   transform: translateY(-5px);
   background: rgba(255, 255, 255, 0.6) !important;