From 935cde1f42f17d1e93c208a25f31bda52026c34e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96zg=C3=BCr=20G=C3=B6rg=C3=BCl=C3=BC?=
 <ozgurgorgulu54@gmail.com>
Date: Sun, 31 Mar 2024 00:51:27 +0300
Subject: [PATCH 01/17] components(form-row): fix CSS specificity

---
 components/form-row.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/form-row.vue b/components/form-row.vue
index f93c7d6d..fa40f2fc 100644
--- a/components/form-row.vue
+++ b/components/form-row.vue
@@ -2,7 +2,7 @@
     <v-row
         :class="{'horizontal': props.direction === 'horizontal'}"
         no-gutters=""
-        class="flex-column flex-sm-row">
+        class="form-row flex-column flex-sm-row">
         <v-col>
             <template v-if="props.label">
                 <label>
@@ -33,7 +33,7 @@ const props = defineProps({
 <style lang="scss" scoped="">
 @import "~vuetify/src/components/VTextField/_variables.scss";
 
-.row {
+.form-row {
     --vh-form-row-gap: .375rem;
     --vh-form-row-label-col-width: 100%;
     --vh-form-row-label-justify-content: flex-start;
@@ -45,7 +45,7 @@ const props = defineProps({
             --vh-form-row-label-justify-content: flex-end
         }
     }
-    .col:first-child {
+    & > .col:first-child {
         flex: 0 0 var(--vh-form-row-label-col-width);
         max-width: var(--vh-form-row-label-col-width);
         label {

From 9e127ff0c7e4dcf8a5fc38c484702a24951880ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96zg=C3=BCr=20G=C3=B6rg=C3=BCl=C3=BC?=
 <ozgurgorgulu54@gmail.com>
Date: Sun, 31 Mar 2024 00:53:15 +0300
Subject: [PATCH 02/17] components(calculator-list-item): migrate to
 Composition API

---
 components/calculator-list-item.vue | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/components/calculator-list-item.vue b/components/calculator-list-item.vue
index 5c88f830..6a2accb3 100644
--- a/components/calculator-list-item.vue
+++ b/components/calculator-list-item.vue
@@ -1,26 +1,24 @@
 <template>
     <v-list-item
-        :to="calculator.url"
+        :to="props.calculator.url"
         color="primary">
         <v-list-item-icon>
             <v-icon>
-                {{ calculator.icon }}
+                {{ props.calculator.icon }}
             </v-icon>
         </v-list-item-icon>
 
         <v-list-item-title>
-            {{ calculator.shortTitle }}
+            {{ props.calculator.shortTitle }}
         </v-list-item-title>
     </v-list-item>
 </template>
 
-<script>
-export default {
-    props: {
-        calculator: {
-            type: Object,
-            required: true
-        }
+<script setup="">
+const props = defineProps({
+    calculator: {
+        type: Object,
+        required: true
     }
-};
+});
 </script>

From f9034ec388a8c879c554efb5daa00e338ab9a8aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96zg=C3=BCr=20G=C3=B6rg=C3=BCl=C3=BC?=
 <ozgurgorgulu54@gmail.com>
Date: Sun, 31 Mar 2024 00:53:27 +0300
Subject: [PATCH 03/17] components(calculator-list-item): update color

---
 components/calculator-list-item.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/components/calculator-list-item.vue b/components/calculator-list-item.vue
index 6a2accb3..a7a5e653 100644
--- a/components/calculator-list-item.vue
+++ b/components/calculator-list-item.vue
@@ -1,7 +1,5 @@
 <template>
-    <v-list-item
-        :to="props.calculator.url"
-        color="primary">
+    <v-list-item :to="props.calculator.url">
         <v-list-item-icon>
             <v-icon>
                 {{ props.calculator.icon }}

From 0687db112db2ee4b693949358dd8ee12c6d289c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96zg=C3=BCr=20G=C3=B6rg=C3=BCl=C3=BC?=
 <ozgurgorgulu54@gmail.com>
Date: Sun, 31 Mar 2024 00:54:38 +0300
Subject: [PATCH 04/17] components(calculator-list): migrate to Composition API

---
 components/calculator-list.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/components/calculator-list.vue b/components/calculator-list.vue
index 49f1c1bd..a7bd6a9b 100644
--- a/components/calculator-list.vue
+++ b/components/calculator-list.vue
@@ -14,12 +14,6 @@
     </v-list>
 </template>
 
-<script>
+<script setup="">
 import { calculators } from "@/domain/hesaplayicilar/calculator-list.js";
-
-export default {
-    data: () => ({
-        calculators
-    })
-};
 </script>

From eecf93611fe563f0269203ba55ef03c504c67b5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96zg=C3=BCr=20G=C3=B6rg=C3=BCl=C3=BC?=
 <ozgurgorgulu54@gmail.com>
Date: Sun, 31 Mar 2024 00:54:56 +0300
Subject: [PATCH 05/17] components(calculator-grid): migrate to Composition API

---
 components/calculator-grid.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/components/calculator-grid.vue b/components/calculator-grid.vue
index 3f58452b..e1399b68 100644
--- a/components/calculator-grid.vue
+++ b/components/calculator-grid.vue
@@ -11,12 +11,6 @@
     </v-row>
 </template>
 
-<script>
+<script setup="">
 import { calculators } from "@/domain/hesaplayicilar/calculator-list.js";
-
-export default {
-    data: () => ({
-        calculators
-    })
-};
 </script>

From b0f02f1717a9f27fcec6d779ebab660c791ae535 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96zg=C3=BCr=20G=C3=B6rg=C3=BCl=C3=BC?=
 <ozgurgorgulu54@gmail.com>
Date: Sun, 31 Mar 2024 00:55:43 +0300
Subject: [PATCH 06/17] components(calculator-card-item): migrate to
 Composition API

---
 components/calculator-card-item.vue | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/components/calculator-card-item.vue b/components/calculator-card-item.vue
index 0f91e4b3..914cbd2d 100644
--- a/components/calculator-card-item.vue
+++ b/components/calculator-card-item.vue
@@ -1,43 +1,41 @@
 <template>
     <v-card
-        :to="calculator.url"
+        :to="props.calculator.url"
         outlined=""
         class="vh-calculator-card-item px-4 py-6 px-lg-6 py-lg-8">
         <div class="vh-calculator-card-item__icon d-inline-block pa-4 rounded-circle mb-4">
             <v-icon
                 color="primary"
                 size="40">
-                {{ calculator.icon }}
+                {{ props.calculator.icon }}
             </v-icon>
         </div>
 
         <v-card-title class="pa-0 mb-4">
-            {{ calculator.title }}
+            {{ props.calculator.title }}
         </v-card-title>
 
         <!-- eslint-disable vue/no-v-text-v-html-on-component vue/no-v-html -->
         <v-card-text
             class="pa-0"
-            v-html="calculator.summary" />
+            v-html="props.calculator.summary" />
 
         <v-icon
             color="white"
             class="vh-calculator-card-item__bg-icon"
             size="128">
-            {{ calculator.icon }}
+            {{ props.calculator.icon }}
         </v-icon>
     </v-card>
 </template>
 
-<script>
-export default {
-    props: {
-        calculator: {
-            type: Object,
-            required: true
-        }
+<script setup="">
+const props = defineProps({
+    calculator: {
+        type: Object,
+        required: true
     }
-};
+});
 </script>
 
 <style lang="scss" scoped="">

From 574a82820dae725492be8b7848fbac7a8af2a608 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96zg=C3=BCr=20G=C3=B6rg=C3=BCl=C3=BC?=
 <ozgurgorgulu54@gmail.com>
Date: Sun, 31 Mar 2024 00:59:30 +0300
Subject: [PATCH 07/17] components(calculator-card-item): refactor CSS

---
 components/calculator-card-item.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/components/calculator-card-item.vue b/components/calculator-card-item.vue
index 914cbd2d..7fa2976d 100644
--- a/components/calculator-card-item.vue
+++ b/components/calculator-card-item.vue
@@ -2,8 +2,8 @@
     <v-card
         :to="props.calculator.url"
         outlined=""
-        class="vh-calculator-card-item px-4 py-6 px-lg-6 py-lg-8">
-        <div class="vh-calculator-card-item__icon d-inline-block pa-4 rounded-circle mb-4">
+        class="px-4 py-6 px-lg-6 py-lg-8">
+        <div class="icon d-inline-block pa-4 rounded-circle mb-4">
             <v-icon
                 color="primary"
                 size="40">
@@ -16,13 +16,13 @@
         </v-card-title>
 
         <!-- eslint-disable vue/no-v-text-v-html-on-component vue/no-v-html -->
-        <v-card-text
+        <v-card-subtitle
             class="pa-0"
             v-html="props.calculator.summary" />
 
         <v-icon
             color="white"
-            class="vh-calculator-card-item__bg-icon"
+            class="bg-icon"
             size="128">
             {{ props.calculator.icon }}
         </v-icon>
@@ -39,13 +39,13 @@ const props = defineProps({
 </script>
 
 <style lang="scss" scoped="">
-.vh-calculator-card-item {
+.v-card {
     position: relative;
-    &__icon {
-        background: rgba($vh-color-primary, .08)
+    .icon {
+        background: rgba($vh-color-primary, $vh-card-hover-opacity)
     }
-    &__bg-icon {
-        position: absolute !important;
+    .bg-icon {
+        position: absolute;
         inset-inline-end: 0;
         inset-block-end: 0;
         transform: translate(30%, -10%) rotate(-15deg);

From fea6bb08b1a8f5e0a3c0a967e103128aaa376bec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96zg=C3=BCr=20G=C3=B6rg=C3=BCl=C3=BC?=
 <ozgurgorgulu54@gmail.com>
Date: Sun, 31 Mar 2024 01:01:43 +0300
Subject: [PATCH 08/17] components(article-grid): migrate to Composition API

---
 components/article-grid.vue | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/components/article-grid.vue b/components/article-grid.vue
index 9d908bc6..a6c368b1 100644
--- a/components/article-grid.vue
+++ b/components/article-grid.vue
@@ -1,6 +1,6 @@
 <template>
     <v-row>
-        <template v-for="_article in articles">
+        <template v-for="_article in props.articles">
             <v-col
                 :key="_article.title"
                 cols="12"
@@ -12,13 +12,11 @@
     </v-row>
 </template>
 
-<script>
-export default {
-    props: {
-        articles: {
-            type: Array,
-            required: true
-        }
+<script setup="">
+const props = defineProps({
+    articles: {
+        type: Array,
+        required: true
     }
-};
+});
 </script>

From 444df62e81a5f8ae7c52e57de078e189e5bcebd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96zg=C3=BCr=20G=C3=B6rg=C3=BCl=C3=BC?=
 <ozgurgorgulu54@gmail.com>
Date: Sun, 31 Mar 2024 01:02:32 +0300
Subject: [PATCH 09/17] components(article-card-item): migrate to Composition
 API

---
 components/article-card-item.vue | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/components/article-card-item.vue b/components/article-card-item.vue
index f8d700d5..ab090d0b 100644
--- a/components/article-card-item.vue
+++ b/components/article-card-item.vue
@@ -1,26 +1,24 @@
 <template>
     <v-card
-        :to="article.url"
+        :to="props.article.url"
         outlined=""
         class="px-4 py-6 px-lg-6 py-lg-8">
         <v-card-title class="pa-0 mb-4">
-            {{ article.title }}
+            {{ props.article.title }}
         </v-card-title>
         <v-card-text class="pa-0">
-            {{ article.description }}…
+            {{ props.article.description }}…
         </v-card-text>
     </v-card>
 </template>
 
-<script>
-export default {
-    props: {
-        article: {
-            type: Object,
-            required: true
-        }
+<script setup="">
+const props = defineProps({
+    article: {
+        type: Object,
+        required: true
     }
-};
+});
 </script>
 
 <style lang="scss" scoped="">

From d1f4c8253b0ee03546179348c5d9308b64780204 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96zg=C3=BCr=20G=C3=B6rg=C3=BCl=C3=BC?=
 <ozgurgorgulu54@gmail.com>
Date: Sun, 31 Mar 2024 01:07:23 +0300
Subject: [PATCH 10/17] pages(/yazilar): use article-grid for articles

---
 pages/yazilar/index.vue | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/pages/yazilar/index.vue b/pages/yazilar/index.vue
index 78789d31..e5423f27 100644
--- a/pages/yazilar/index.vue
+++ b/pages/yazilar/index.vue
@@ -9,16 +9,7 @@
         <inner-container>
             <article-disclaimer-alert class="mb-12" />
 
-            <v-row>
-                <template v-for="_article in articles">
-                    <v-col
-                        :key="_article.slug"
-                        cols="12"
-                        lg="4">
-                        <article-card-item :article="_article" />
-                    </v-col>
-                </template>
-            </v-row>
+            <article-grid :articles="articles" />
         </inner-container>
     </div>
 </template>

From 05a1b0f9c4b87e49f2e4d88a8ae6187e47f17533 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96zg=C3=BCr=20G=C3=B6rg=C3=BCl=C3=BC?=
 <ozgurgorgulu54@gmail.com>
Date: Sun, 31 Mar 2024 01:08:13 +0300
Subject: [PATCH 11/17] components(article-card-item): make it denser

---
 components/article-card-item.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/components/article-card-item.vue b/components/article-card-item.vue
index ab090d0b..fa693563 100644
--- a/components/article-card-item.vue
+++ b/components/article-card-item.vue
@@ -2,13 +2,13 @@
     <v-card
         :to="props.article.url"
         outlined=""
-        class="px-4 py-6 px-lg-6 py-lg-8">
-        <v-card-title class="pa-0 mb-4">
+        class="px-4 py-6">
+        <v-card-title class="pa-0 mb-6">
             {{ props.article.title }}
         </v-card-title>
-        <v-card-text class="pa-0">
+        <v-card-subtitle class="pa-0">
             {{ props.article.description }}…
-        </v-card-text>
+        </v-card-subtitle>
     </v-card>
 </template>
 
@@ -23,8 +23,7 @@ const props = defineProps({
 
 <style lang="scss" scoped="">
 .v-card {
-    min-height: 192px;
-    &__text {
+    .v-card__subtitle {
         @include vh-ellipsis-multiline(4)
     }
 }

From 524c0a9f690377fe657b33309c5e21157b5bb6f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96zg=C3=BCr=20G=C3=B6rg=C3=BCl=C3=BC?=
 <ozgurgorgulu54@gmail.com>
Date: Sun, 31 Mar 2024 01:11:21 +0300
Subject: [PATCH 12/17] components(affordability-alert): migrate to Composition
 API

---
 components/affordability-alert.vue | 45 +++++++++++-------------------
 1 file changed, 16 insertions(+), 29 deletions(-)

diff --git a/components/affordability-alert.vue b/components/affordability-alert.vue
index 30e29bfb..6697ec40 100644
--- a/components/affordability-alert.vue
+++ b/components/affordability-alert.vue
@@ -1,44 +1,31 @@
 <template>
-    <!-- DO NOT use v-html on the root element -->
+    <!-- DO NOT use `v-html` on the root element -->
     <vh-alert type="info">
         <!-- eslint-disable vue/no-v-text-v-html-on-component vue/no-v-html -->
         <div v-html="text" />
     </vh-alert>
 </template>
 
-<script>
+<script setup="">
 import { calculateMinimumWageDayCount, calculateMinimumWageMonthCount } from "@/utils/calculate-minimum-wage-count.js";
 import { moneyFormat } from "@/utils/formatter.js";
 
 const { MINIMUM_WAGE } = process.env;
 
-export default {
-    props: {
-        price: {
-            type: Number,
-            required: true
-        }
-    },
-    computed: {
-        text() {
-            const vm = this;
+const props = defineProps({
+    price: {
+        type: Number,
+        required: true
+    }
+});
 
-            const count = vm.minimumWageMonthCount > 1 ? vm.minimumWageMonthCount : vm.minimumWageDayCount;
-            const timeUnit = vm.minimumWageMonthCount > 1 ? "aylık" : "günlük";
+const minimumWageMonthCount = calculateMinimumWageMonthCount(props.price, MINIMUM_WAGE);
+const minimumWageDayCount = calculateMinimumWageDayCount(props.price, MINIMUM_WAGE);
+const formattedMinimumWage = moneyFormat(MINIMUM_WAGE, "TRY");
 
-            return `Türkiye'de asgari ücretle (${vm.formattedMinimumWage}) çalışan birisi yemeden içmeden bu ürünü <span class="text-h6 font-weight-bold">${count}</span> ${timeUnit} maaşıyla satın alabilir.`;
-        },
-        formattedMinimumWage() {
-            return moneyFormat(MINIMUM_WAGE, "TRY");
-        },
-        minimumWageDayCount() {
-            const vm = this;
-            return calculateMinimumWageDayCount(vm.price, MINIMUM_WAGE);
-        },
-        minimumWageMonthCount() {
-            const vm = this;
-            return calculateMinimumWageMonthCount(vm.price, MINIMUM_WAGE);
-        }
-    }
-};
+const text = (() => {
+    const count = minimumWageMonthCount > 1 ? minimumWageMonthCount : minimumWageDayCount;
+    const timeUnit = minimumWageMonthCount > 1 ? "aylık" : "günlük";
+    return `Türkiye'de asgari ücretle (${formattedMinimumWage}) çalışan birisi yemeden içmeden bu ürünü <span class="text-h6 font-weight-bold">${count}</span> ${timeUnit} maaşıyla satın alabilir.`;
+})();
 </script>

From d78b205caf43f8b66b3c2d1997eb111037f3d70d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96zg=C3=BCr=20G=C3=B6rg=C3=BCl=C3=BC?=
 <ozgurgorgulu54@gmail.com>
Date: Sun, 31 Mar 2024 01:20:45 +0300
Subject: [PATCH 13/17] components(affordability-alert): refactor

---
 components/affordability-alert.vue | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/components/affordability-alert.vue b/components/affordability-alert.vue
index 6697ec40..63726646 100644
--- a/components/affordability-alert.vue
+++ b/components/affordability-alert.vue
@@ -1,8 +1,7 @@
 <template>
-    <!-- DO NOT use `v-html` on the root element -->
     <vh-alert type="info">
-        <!-- eslint-disable vue/no-v-text-v-html-on-component vue/no-v-html -->
-        <div v-html="text" />
+        Türkiye'de asgari ücretle ({{ formattedMinimumWage }}) çalışan birisi yemeden içmeden bu ürünü <span
+        class="text-h6 font-weight-bold">{{ count }}</span> {{ timeUnit }} maaşıyla satın alabilir.
     </vh-alert>
 </template>
 
@@ -21,11 +20,8 @@ const props = defineProps({
 
 const minimumWageMonthCount = calculateMinimumWageMonthCount(props.price, MINIMUM_WAGE);
 const minimumWageDayCount = calculateMinimumWageDayCount(props.price, MINIMUM_WAGE);
-const formattedMinimumWage = moneyFormat(MINIMUM_WAGE, "TRY");
 
-const text = (() => {
-    const count = minimumWageMonthCount > 1 ? minimumWageMonthCount : minimumWageDayCount;
-    const timeUnit = minimumWageMonthCount > 1 ? "aylık" : "günlük";
-    return `Türkiye'de asgari ücretle (${formattedMinimumWage}) çalışan birisi yemeden içmeden bu ürünü <span class="text-h6 font-weight-bold">${count}</span> ${timeUnit} maaşıyla satın alabilir.`;
-})();
+const formattedMinimumWage = moneyFormat(MINIMUM_WAGE, "TRY");
+const count = minimumWageMonthCount > 1 ? minimumWageMonthCount : minimumWageDayCount;
+const timeUnit = minimumWageMonthCount > 1 ? "aylık" : "günlük";
 </script>

From 47baf6d3688d5f13046541cce2af94c765ccb516 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96zg=C3=BCr=20G=C3=B6rg=C3=BCl=C3=BC?=
 <ozgurgorgulu54@gmail.com>
Date: Sun, 31 Mar 2024 01:48:48 +0300
Subject: [PATCH 14/17] components(retail-price-update-info): update text

---
 components/retail-price-update-info.vue | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/components/retail-price-update-info.vue b/components/retail-price-update-info.vue
index 8f9e25e4..d490b34a 100644
--- a/components/retail-price-update-info.vue
+++ b/components/retail-price-update-info.vue
@@ -1,12 +1,16 @@
 <template>
-    <p class="text--secondary subtitle-2 mb-0 text-balance">
-        Piyasa fiyatı <b>{{ formattedDate }}</b> tarihinde <a
-        :href="sourceUrl"
-        class="text--secondary"
-        target="_blank"
-        rel="nofollow noopener noreferrer">{{ domain }}</a>
-        sitesinden elle güncellenmiştir. Güncel fiyat farklı olabilir.
-    </p>
+    <div class="text--secondary subtitle-2">
+        <p class="mb-0">
+            Son güncellenme: {{ formattedUpdatedDate }}
+        </p>
+        <p class="mb-0">
+            Kaynak: <a
+            :href="sourceUrl"
+            class="text--secondary"
+            target="_blank"
+            rel="nofollow noopener noreferrer">{{ domain }}</a>
+        </p>
+    </div>
 </template>
 
 <script setup="">
@@ -24,6 +28,6 @@ const props = defineProps({
     }
 });
 
+const formattedUpdatedDate = dateFormat(props.lastUpdatedDate);
 const domain = getDomainFromUrl(props.sourceUrl);
-const formattedDate = dateFormat(props.lastUpdatedDate);
 </script>

From 1ac733bbeb46f73a663159228e3a68fbb2a11781 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96zg=C3=BCr=20G=C3=B6rg=C3=BCl=C3=BC?=
 <ozgurgorgulu54@gmail.com>
Date: Sun, 31 Mar 2024 01:53:12 +0300
Subject: [PATCH 15/17] components(radio-grid): remove redundant CSS variables
 usage

---
 components/radio-grid.vue | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/components/radio-grid.vue b/components/radio-grid.vue
index b6ec886b..6798b3fc 100644
--- a/components/radio-grid.vue
+++ b/components/radio-grid.vue
@@ -42,31 +42,28 @@ const emitInput = item => emit("input", item.value);
 <style lang="scss" scoped="">
 @import "~vuetify/src/styles/styles.sass";
 
-// I chose to set it individually for each item count
-// to give more control over the user experience
-// on different screen resolutions and with different item counts.
+$optimal-width: 144px;
+
 .radio-grid {
-    --vh-radio-grid-optimal-width: 144px;
     display: grid;
-    grid-template-columns: var(--vh-radio-grid-columns);
     grid-gap: .75rem;
     grid-auto-rows: 1fr;
     &:has(> .v-card:nth-child(1)) {
-        --vh-radio-grid-columns: repeat(auto-fill, minmax(var(--vh-radio-grid-optimal-width), 1fr))
+        grid-template-columns: repeat(auto-fill, minmax(#{$optimal-width}, 1fr))
     }
     &:has(> .v-card:nth-child(2)) {
-        --vh-radio-grid-columns: repeat(2, 1fr)
+        grid-template-columns: repeat(2, 1fr)
     }
     &:has(> .v-card:nth-child(3)) {
-        --vh-radio-grid-columns: repeat(2, 1fr);
+        grid-template-columns: repeat(2, 1fr);
         @media #{map-get($display-breakpoints, "sm-and-up")} {
-            --vh-radio-grid-columns: repeat(auto-fill, minmax(var(--vh-radio-grid-optimal-width), 1fr))
+            grid-template-columns: repeat(auto-fill, minmax(#{$optimal-width}, 1fr))
         }
     }
     &:has(> .v-card:nth-child(4)) {
-        --vh-radio-grid-columns: repeat(2, 1fr);
+        grid-template-columns: repeat(2, 1fr);
         @media #{map-get($display-breakpoints, "sm-and-up")} {
-            --vh-radio-grid-columns: repeat(4, 1fr)
+            grid-template-columns: repeat(4, 1fr)
         }
     }
     .v-card {

From 56a8a252316e85761e68e11dc1195810e017eeb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96zg=C3=BCr=20G=C3=B6rg=C3=BCl=C3=BC?=
 <ozgurgorgulu54@gmail.com>
Date: Sun, 31 Mar 2024 01:56:57 +0300
Subject: [PATCH 16/17] components(form-row): remove redundant CSS variables
 usage

---
 components/form-row.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/components/form-row.vue b/components/form-row.vue
index fa40f2fc..a2b16ac0 100644
--- a/components/form-row.vue
+++ b/components/form-row.vue
@@ -34,15 +34,14 @@ const props = defineProps({
 @import "~vuetify/src/components/VTextField/_variables.scss";
 
 .form-row {
-    --vh-form-row-gap: .375rem;
     --vh-form-row-label-col-width: 100%;
     --vh-form-row-label-justify-content: flex-start;
-    gap: var(--vh-form-row-gap);
+    gap: .375rem;
     &.horizontal {
         @media #{map-get($display-breakpoints, "sm-and-up")} {
-            --vh-form-row-gap: 1rem;
             --vh-form-row-label-col-width: 170px; // Optimized for "TRT bandrolü (€20,00)" text
-            --vh-form-row-label-justify-content: flex-end
+            --vh-form-row-label-justify-content: flex-end;
+            gap: 1rem
         }
     }
     & > .col:first-child {

From ca8eb2def2946a9df23a5d6a5ec2d618296df60c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96zg=C3=BCr=20G=C3=B6rg=C3=BCl=C3=BC?=
 <ozgurgorgulu54@gmail.com>
Date: Sun, 31 Mar 2024 01:57:04 +0300
Subject: [PATCH 17/17] 7.4.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 450a7f71..672e0fc1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "vergihesaplayici.com",
-    "version": "7.3.0",
+    "version": "7.4.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "vergihesaplayici.com",
-            "version": "7.3.0",
+            "version": "7.4.0",
             "license": "MIT",
             "dependencies": {
                 "firebase": "10.10.0",
diff --git a/package.json b/package.json
index 2350c073..60026a93 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "vergihesaplayici.com",
-    "version": "7.3.0",
+    "version": "7.4.0",
     "description": "vergihesaplayici.com, vergi hesaplar.",
     "license": "MIT",
     "homepage": "https://vergihesaplayici.com/",