/* =============================================================================
GAYOOR — MAĞAZA VİTRİNİ TASARIM KATMANI v1.0 · 23.09.2026
-----------------------------------------------------------------------------
Bu dosya mevcut Riode temasının ÜSTÜNE yüklenir ve HTML'e dokunmadan
görünümü modernize eder. Tema dosyalarını değiştirmediği için hiçbir
işlevi bozma riski taşımaz; kaldırıldığında site eski haline döner.
Kapsam dışı bırakılanlar (bilerek):
- .product-single → ürün detay sayfasının kendi satır içi stilleri var,
kart kuralları oraya sızmasın diye :not() ile hariç.
- .gy-* → kategori filtre paneli ve sepet/kampanya blokları
zaten özel tasarlandı, dokunulmuyor.
Palet: Gayoor logosundaki yeşil esas alındı; yönetim ve mağaza panelindeki
zümrüt tonuyla (#10b981) aynı aileden, ama metinde okunabilir olması için
koyu varyant (#047857) ayrı tutuldu.
========================================================================== */
/* Yazı tipi, header.php içinde ile yükleniyor (ek round-trip olmasın). */
:root {
/* Marka
DİKKAT: Zümrüt #10b981 üzerine BEYAZ yazı kontrastı 2,54:1 — okunabilirlik
eşiğinin (4,5:1) çok altında. Bu yüzden dolgu rengi olarak bir ton koyusu
(#08875d, beyazla 4,53:1) kullanılıyor; parlak zümrüt yalnızca yazı
taşımayan süs öğelerinde (başlık çizgisi, etkin nokta, odak halkası). */
--g-primary: #08875d; /* dolgu — üstüne beyaz yazı gelebilir */
--g-primary-hover: #066d4b;
--g-primary-deep: #045c3f; /* beyaz zeminde yazı/bağlantı */
--g-primary-dark: #04492f; /* açık yeşil zeminde yazı */
--g-primary-bright: #10b981; /* yalnızca süs öğeleri */
--g-primary-soft: #e8f7f1;
--g-primary-rgb: 8, 135, 93;
/* Nötrler — hafif yeşil eğilimli, düz gri değil */
--g-ink: #0d1713;
--g-ink-2: #374741;
--g-text: #1d2b26;
--g-text-2: #4a5c55;
--g-muted: #5d6f68;
--g-muted-2: #5f716a;
--g-bg: #f6f8f7;
--g-surface: #ffffff;
--g-surface-2: #f1f5f3;
--g-line: #e5ebe8;
--g-line-soft: #eef2f0;
/* Durum */
--g-sale: #d92d20;
--g-sale-soft: #fdecea;
--g-amber: #b45309;
--g-amber-soft: #fdf3e3;
/* Biçim */
--g-r-sm: 10px;
--g-r: 14px;
--g-r-lg: 20px;
--g-r-pill: 999px;
--g-sh-xs: 0 1px 2px rgba(13,23,19,.05);
--g-sh-sm: 0 1px 3px rgba(13,23,19,.06), 0 1px 2px rgba(13,23,19,.04);
--g-sh: 0 6px 16px -8px rgba(13,23,19,.18), 0 2px 6px -4px rgba(13,23,19,.10);
--g-sh-lg: 0 18px 40px -22px rgba(13,23,19,.32), 0 6px 14px -10px rgba(13,23,19,.14);
--g-t: 200ms cubic-bezier(.4,0,.2,1);
--g-font: "Plus Jakarta Sans", "Poppins", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* =========================================================================
1) TEMEL
========================================================================= */
body,
.page-wrapper {
font-family: var(--g-font);
color: var(--g-text);
background-color: var(--g-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.005em;
}
h1, h2, h3, h4, h5, h6,
.title, .banner-title, .product-name, .page-title {
font-family: var(--g-font);
color: var(--g-ink);
letter-spacing: -0.02em;
}
::selection { background: rgba(var(--g-primary-rgb), .22); color: var(--g-ink); }
a { transition: color var(--g-t); }
a:hover { color: var(--g-primary-deep); }
/* Klavye ile gezinenler için görünür odak halkası */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--g-primary);
outline-offset: 2px;
border-radius: 6px;
}
/* Sayılar tablolarda hizalı dursun */
.product-price, .amount, .cart-subtotal span, td .amount,
.price, .new-price, .old-price {
font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* =========================================================================
2) BÖLÜM BAŞLIKLARI
========================================================================= */
.title-link-wrapper {
border-bottom: 1px solid var(--g-line);
padding-bottom: 14px !important;
align-items: baseline;
}
.title-link-wrapper .title,
.product-wrapper-1 .title {
font-size: 21px;
font-weight: 800;
letter-spacing: -0.03em;
position: relative;
padding-left: 14px;
}
.title-link-wrapper .title::before,
.product-wrapper-1 .title::before {
content: "";
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 4px; height: 0.95em;
border-radius: 999px;
background: var(--g-primary-bright);
}
.title-link-wrapper > a {
font-size: 13px !important;
font-weight: 700 !important;
color: var(--g-primary-deep) !important;
white-space: nowrap;
}
.title-link-wrapper > a:hover { color: var(--g-primary-dark) !important; }
/* =========================================================================
3) DÜĞMELER
========================================================================= */
.btn {
font-family: var(--g-font);
font-weight: 700;
letter-spacing: -0.01em;
border-radius: var(--g-r-sm);
transition: background-color var(--g-t), border-color var(--g-t),
color var(--g-t), transform var(--g-t), box-shadow var(--g-t);
}
.btn:active { transform: translateY(1px); }
.btn-rounded { border-radius: var(--g-r-pill); }
.btn-primary,
.btn.btn-primary {
background-color: var(--g-primary) !important;
border-color: var(--g-primary) !important;
color: #fff !important;
box-shadow: 0 6px 14px -8px rgba(var(--g-primary-rgb), .9);
}
.btn-primary:hover,
.btn.btn-primary:hover {
background-color: var(--g-primary-hover) !important;
border-color: var(--g-primary-hover) !important;
box-shadow: 0 10px 20px -10px rgba(var(--g-primary-rgb), .95);
}
.btn-dark {
background-color: var(--g-ink) !important;
border-color: var(--g-ink) !important;
color: #fff !important;
}
.btn-dark:hover {
background-color: #000 !important;
border-color: #000 !important;
}
.btn-outline {
border-width: 1.5px;
}
/* Sepete ekle / ödeme gibi ana eylem düğmeleri */
.btn-checkout,
.btn-cart,
.btn-add-cart {
background-color: var(--g-primary) !important;
border-color: var(--g-primary) !important;
color: #fff !important;
font-weight: 800 !important;
letter-spacing: .01em;
box-shadow: 0 10px 22px -12px rgba(var(--g-primary-rgb), 1);
}
.btn-checkout:hover,
.btn-cart:hover,
.btn-add-cart:hover {
background-color: var(--g-primary-hover) !important;
border-color: var(--g-primary-hover) !important;
}
/* =========================================================================
4) FORM ALANLARI
========================================================================= */
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"],
select, textarea {
font-family: var(--g-font);
border-radius: var(--g-r-sm);
border: 1.5px solid var(--g-line);
background-color: var(--g-surface);
color: var(--g-text);
transition: border-color var(--g-t), box-shadow var(--g-t);
}
.form-control:focus,
input:focus, select:focus, textarea:focus {
border-color: var(--g-primary) !important;
box-shadow: 0 0 0 4px rgba(var(--g-primary-rgb), .12) !important;
outline: none;
}
.form-control::placeholder { color: #7a8b85; }
label { font-weight: 600; color: var(--g-text-2); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--g-primary); }
/* =========================================================================
5) ÜST BAŞLIK (HEADER)
========================================================================= */
.header { background: var(--g-surface); }
.header-top {
background: var(--g-ink) !important;
color: #e7efea;
border: none !important;
font-size: 12.5px;
letter-spacing: .01em;
}
.header-top a { color: #d6e5dd !important; }
.header-top a:hover { color: #fff !important; }
.header-top .welcome-msg {
font-weight: 700;
color: #fff;
letter-spacing: .02em;
}
.header-top,
.header-top p,
.header-top span { color: #cfe0d8; }
.header-top .header-right .delimiter { color: rgba(255,255,255,.45) !important; }
.header-top .header-right .divider {
background-color: rgba(255,255,255,.22) !important;
height: 14px !important;
}
.header-top i { opacity: .9; }
.header-middle {
background: var(--g-surface);
border-bottom: 1px solid var(--g-line-soft);
padding-block: 4px;
}
.header-middle .logo img { height: auto; }
/* Arama kutusu — pill biçimi, net eylem düğmesi */
.header-search.hs-round,
.header-search {
border-radius: var(--g-r-pill) !important;
border: 1.5px solid var(--g-line) !important;
background: var(--g-surface-2) !important;
transition: border-color var(--g-t), box-shadow var(--g-t), background-color var(--g-t);
}
.header-search:focus-within {
border-color: var(--g-primary) !important;
background: var(--g-surface) !important;
box-shadow: 0 0 0 4px rgba(var(--g-primary-rgb), .12);
}
.header-search .form-control {
border: none !important;
background: transparent !important;
box-shadow: none !important;
font-size: 14px;
}
.header-search .select-box select {
border: none !important;
background: transparent !important;
color: var(--g-muted-2);
font-size: 13px;
font-weight: 600;
}
.header-search .btn-search {
background: var(--g-primary) !important;
color: #fff !important;
border-radius: var(--g-r-pill) !important;
margin: 4px;
padding-inline: 20px;
transition: background-color var(--g-t);
}
.header-search .btn-search:hover { background: var(--g-primary-hover) !important; }
/* Sağ üst ikonlar */
.header-right .wishlist,
.header-right .compare,
.header-right .cart-dropdown > a {
color: var(--g-text-2);
transition: color var(--g-t);
}
.header-right .wishlist:hover,
.header-right .compare:hover,
.header-right .cart-dropdown > a:hover { color: var(--g-primary-deep); }
.cart-count {
background: var(--g-primary) !important;
color: #fff !important;
font-weight: 800;
box-shadow: 0 0 0 2px #fff;
}
.header-call .phone-number { color: var(--g-ink); font-weight: 800; }
/* Alt menü çubuğu */
.header-bottom {
background: var(--g-surface);
border-bottom: 1px solid var(--g-line);
box-shadow: var(--g-sh-xs);
}
.header-bottom.fixed,
.header-bottom.sticky-header.fixed {
box-shadow: var(--g-sh);
backdrop-filter: saturate(140%) blur(8px);
background: rgba(255, 255, 255, .92);
}
.category-toggle {
border-radius: var(--g-r-sm) !important;
font-weight: 700;
letter-spacing: .01em;
}
.category-dropdown .dropdown-box,
.megamenu {
border-radius: var(--g-r) !important;
border: 1px solid var(--g-line) !important;
box-shadow: var(--g-sh-lg) !important;
overflow: hidden;
}
.category-menu > li > a,
.megamenu li a {
border-radius: 8px;
transition: background-color var(--g-t), color var(--g-t), padding-left var(--g-t);
}
.category-menu > li > a:hover,
.megamenu li a:hover {
background: var(--g-primary-soft);
color: var(--g-primary-dark) !important;
}
/* Akıllı arama önizlemesi */
#mobileSmartSearchShow {
border-radius: var(--g-r) !important;
border: 1px solid var(--g-line);
box-shadow: var(--g-sh-lg);
overflow: hidden;
}
.searchItem {
padding: 10px 12px;
border-bottom: 1px solid var(--g-line-soft);
transition: background-color var(--g-t);
}
.searchItem:hover { background: var(--g-primary-soft); }
.searchItem img { border-radius: 8px; border: 1px solid var(--g-line-soft); }
/* =========================================================================
6) BREADCRUMB
========================================================================= */
.breadcrumb-nav {
background: transparent;
border: none;
}
.breadcrumb-nav .breadcrumb {
padding-block: 18px;
font-size: 13px;
color: var(--g-muted-2);
}
.breadcrumb li a { color: var(--g-muted-2); }
.breadcrumb li a:hover { color: var(--g-primary-deep); }
.breadcrumb li:last-child { color: var(--g-ink); font-weight: 700; }
.breadcrumb li.active a { color: var(--g-ink); font-weight: 700; }
/* Sayfa üst bandı tam genişliktedir; köşe yuvarlatması ekranın kenarında
çentik gibi göründüğü için kaldırıldı. Satır içi gri gradyan yerine
düz yüzey + alt çizgi. */
.page-header {
border-radius: 0 !important;
background: var(--g-surface) !important;
border-bottom: 1px solid var(--g-line);
padding-block: 28px;
}
.page-header .page-title {
font-weight: 800;
letter-spacing: -0.03em;
text-wrap: balance;
}
/* =========================================================================
7) ÜRÜN KARTLARI
(.product-single hariç — ürün detayı kendi stiline sahip)
========================================================================= */
.product:not(.product-single) {
background: var(--g-surface);
border: 1px solid var(--g-line);
border-radius: var(--g-r);
padding: 10px 10px 14px;
height: 100%;
display: flex;
flex-direction: column;
transition: border-color var(--g-t), box-shadow var(--g-t), transform var(--g-t);
position: relative;
}
.product:not(.product-single):hover {
border-color: rgba(var(--g-primary-rgb), .45);
box-shadow: var(--g-sh);
transform: translateY(-3px);
}
/* Görsel kutusu: kare oran + contain → ambalajlı ürünlerde kırpma olmaz */
.product:not(.product-single) .product-media {
border-radius: var(--g-r-sm);
overflow: hidden;
background: #fff;
margin-bottom: 12px;
position: relative;
}
.product:not(.product-single) .product-media > a {
display: block;
aspect-ratio: 1 / 1;
width: 100%;
}
.product:not(.product-single) .product-media img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
padding: 8px;
transition: transform 420ms cubic-bezier(.2,.7,.3,1);
}
.product:not(.product-single):hover .product-media img { transform: scale(1.06); }
/* Hızlı eylem (sepete ekle) */
.product:not(.product-single) .product-action-horizontal {
position: absolute;
right: 8px; bottom: 8px;
opacity: 0;
transform: translateY(6px);
transition: opacity var(--g-t), transform var(--g-t);
}
.product:not(.product-single):hover .product-action-horizontal,
.product:not(.product-single):focus-within .product-action-horizontal {
opacity: 1;
transform: none;
}
.product:not(.product-single) .btn-product-icon {
width: 42px; height: 42px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--g-r-pill);
background: var(--g-primary) !important;
color: #fff !important;
border: none !important;
font-size: 17px;
box-shadow: 0 8px 18px -8px rgba(var(--g-primary-rgb), 1);
transition: background-color var(--g-t), transform var(--g-t);
}
.product:not(.product-single) .btn-product-icon:hover {
background: var(--g-primary-hover) !important;
transform: scale(1.06);
}
/* Metin bloğu */
.product:not(.product-single) .product-details {
padding: 0 4px;
display: flex;
flex-direction: column;
flex: 1;
text-align: left;
}
.product:not(.product-single).text-center .product-details { text-align: left; }
.product:not(.product-single) .product-cat a {
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--g-muted-2);
}
.product:not(.product-single) .product-cat a:hover { color: var(--g-primary-deep); }
.product:not(.product-single) .product-name {
margin: 6px 0 4px;
font-size: 13.5px;
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.01em;
min-height: 2.8em;
}
.product:not(.product-single) .product-name a {
color: var(--g-text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product:not(.product-single) .product-name a:hover { color: var(--g-primary-deep); }
.product:not(.product-single) .ratings-container { margin-bottom: 6px; }
.product:not(.product-single) .rating-reviews {
font-size: 11px;
color: #7a8b85;
}
.product:not(.product-single) .product-pa-wrapper { margin-top: auto; }
.product:not(.product-single) .product-price {
font-size: 18px;
font-weight: 800;
color: var(--g-ink);
letter-spacing: -0.02em;
padding-top: 6px;
}
.product:not(.product-single) .product-price .old-price {
font-size: 13px;
font-weight: 600;
color: #7a8b85;
text-decoration: line-through;
margin-right: 6px;
}
.product:not(.product-single) .product-price .new-price { color: var(--g-primary-deep); }
/* Rozetler */
.product .badge,
.badge.no-stock {
border-radius: var(--g-r-pill) !important;
font-family: var(--g-font);
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: .02em;
padding: 4px 11px !important;
box-shadow: var(--g-sh-xs);
}
.badge.no-stock {
background-color: var(--g-ink) !important;
color: #fff !important;
}
/* Stoksuz ürünler soluk görünsün */
.product:not(.product-single):has(.no-stock) .product-media img { opacity: .55; filter: saturate(.5); }
/* =========================================================================
8) BANNER / SLIDER
========================================================================= */
/* Kategori sayfası üst bandı — satır içi düz sarı zemin ve ağır gölge yerine
marka gradyanı. Satır içi stil olduğu için !important gerekiyor. */
/* Kategorinin kendi fotoğrafı varsa (satır içi background-image) KORUNUR;
üzerine marka perdesi serilir, böylece başlık her fotoğrafta okunur kalır.
Fotoğraf yoksa zemin rengi + perde = düz marka gradyanı. */
.shop-default-banner {
background-color: var(--g-primary-deep) !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
border-radius: var(--g-r-lg) !important;
min-height: 160px;
padding: 30px 34px;
position: relative;
overflow: hidden;
box-shadow: var(--g-sh);
}
.shop-default-banner::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg, rgba(4,73,47,.94) 0%, rgba(4,92,63,.86) 45%, rgba(8,135,93,.62) 100%);
pointer-events: none;
}
.shop-default-banner .banner-content { text-shadow: none !important; position: relative; z-index: 2; }
.shop-default-banner .banner-title {
color: #fff !important;
font-size: clamp(22px, 4vw, 34px);
font-weight: 800;
letter-spacing: -0.03em;
margin: 0;
text-wrap: balance;
}
.shop-default-banner .banner-subtitle {
color: rgba(255,255,255,.82) !important;
font-size: 13px;
letter-spacing: .06em;
text-transform: uppercase;
}
.banner.br-sm, .banner.br-xs, .shop-default-banner {
border-radius: var(--g-r-lg) !important;
overflow: hidden;
}
.banner-title { font-weight: 800; letter-spacing: -0.03em; }
.banner-subtitle { letter-spacing: .01em; }
.swiper-pagination-bullet {
background: var(--g-line) !important;
opacity: 1 !important;
width: 8px; height: 8px;
transition: width var(--g-t), background-color var(--g-t);
}
.swiper-pagination-bullet-active {
background: var(--g-primary-bright) !important;
width: 22px;
border-radius: 999px;
}
.swiper-button-next, .swiper-button-prev {
background: rgba(255,255,255,.94) !important;
border: 1px solid var(--g-line);
border-radius: 999px !important;
box-shadow: var(--g-sh-sm);
color: var(--g-ink) !important;
transition: background-color var(--g-t), color var(--g-t);
}
.swiper-button-next:hover, .swiper-button-prev:hover {
background: var(--g-primary) !important;
color: #fff !important;
border-color: var(--g-primary);
}
/* Anasayfadaki hizmet/ikon kutuları */
.icon-box-wrapper {
border-radius: var(--g-r-lg) !important;
border: 1px solid var(--g-line);
background: var(--g-surface);
box-shadow: var(--g-sh-xs);
}
/* =========================================================================
9) BLOG KARTLARI
========================================================================= */
.post {
background: var(--g-surface);
border: 1px solid var(--g-line);
border-radius: var(--g-r);
overflow: hidden;
transition: box-shadow var(--g-t), transform var(--g-t), border-color var(--g-t);
}
.post:hover {
box-shadow: var(--g-sh);
transform: translateY(-3px);
border-color: rgba(var(--g-primary-rgb), .4);
}
.post .post-media img { width: 100%; height: auto; object-fit: cover; }
.post .post-details { padding: 16px; }
.post .post-title {
font-size: 15px;
font-weight: 700;
line-height: 1.4;
letter-spacing: -0.015em;
}
.post .post-title a { color: var(--g-ink); }
.post .post-title a:hover { color: var(--g-primary-deep); }
/* =========================================================================
10) KENAR ÇUBUĞU / WIDGET
========================================================================= */
.widget .widget-title {
font-size: 14px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--g-ink);
margin-bottom: 12px;
}
/* =========================================================================
11) SEPET / ÖDEME / TABLOLAR
========================================================================= */
.shop-table, .cart-table {
border-radius: var(--g-r);
overflow: hidden;
background: var(--g-surface);
border: 1px solid var(--g-line);
border-collapse: separate;
border-spacing: 0;
}
.shop-table thead th, .cart-table thead th {
background: var(--g-surface-2);
font-size: 11.5px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--g-muted-2);
border-bottom: 1px solid var(--g-line) !important;
padding-block: 14px;
}
.shop-table td, .cart-table td {
border-bottom: 1px solid var(--g-line-soft) !important;
vertical-align: middle;
}
.shop-table tbody tr:last-child td,
.cart-table tbody tr:last-child td { border-bottom: none !important; }
.cart-table .product-thumbnail img {
border-radius: var(--g-r-sm);
border: 1px solid var(--g-line-soft);
background: #fff;
object-fit: contain;
width: 76px; height: 76px;
padding: 4px;
}
.cart-table .product-name a { font-weight: 600; color: var(--g-text); }
.cart-table .product-name a:hover { color: var(--g-primary-deep); }
/* Özet kartı */
.cart-summary {
background: var(--g-surface);
border: 1px solid var(--g-line);
border-radius: var(--g-r);
padding: 22px;
box-shadow: var(--g-sh-sm);
}
.cart-summary .cart-title {
font-size: 16px;
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 4px;
}
.cart-summary .cart-subtotal { padding-block: 6px; font-size: 14px; }
.cart-summary .cart-subtotal label { color: var(--g-muted-2); font-weight: 500; margin: 0; }
.cart-summary .cart-subtotal span { font-weight: 700; color: var(--g-text); }
.cart-summary .divider { border-color: var(--g-line) !important; opacity: 1; }
/* Genel toplam satırı öne çıksın */
.cart-summary .cart-subtotal:last-of-type label { color: var(--g-ink); font-weight: 800; font-size: 15px; }
.cart-summary .cart-subtotal:last-of-type span { color: var(--g-primary-deep); font-weight: 800; font-size: 19px; }
/* Adım göstergesi: bkz. bölüm 18.4 (tema özgüllüğü nedeniyle oraya taşındı). */
/* Ödeme sayfasındaki PayTR çerçevesi */
#paytriframe {
border-radius: var(--g-r) !important;
border: 1px solid var(--g-line) !important;
background: #fff;
box-shadow: var(--g-sh-sm);
min-height: 520px;
}
/* =========================================================================
12) ÜYE SAYFALARI / FATURA GÖRÜNÜMÜ
========================================================================= */
/* DİKKAT: bu üçü iç içedir (.invoice-inner > .invoice-info > .profileDetail).
Üçüne birden kart vermek üst üste üç çerçeve üretiyordu; yalnızca en
dıştaki kart oluyor. */
.invoice-inner {
background: var(--g-surface);
border: 1px solid var(--g-line);
border-radius: var(--g-r-lg);
padding: 8px;
}
.invoice-info, .profileDetail { background: transparent; border: none; }
.invoice .table > :not(caption) > * > * { border-color: var(--g-line-soft) !important; }
.invoice-bottom {
background: var(--g-surface-2) !important;
border: 1px solid var(--g-line);
border-radius: var(--g-r) !important;
}
/* =========================================================================
13) ÜRÜN DETAYI (kart kuralları dışında, güvenli dokunuşlar)
========================================================================= */
.product-single .product-name {
font-size: clamp(20px, 3vw, 27px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.25;
text-wrap: balance;
}
.product-single .product-price {
font-size: 28px;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--g-ink);
}
.product-single .product-price .new-price { color: var(--g-ink); }
.product-single .product-gallery .product-image,
.product-single .product-gallery img {
border-radius: var(--g-r) !important;
background: #fff;
}
.product-single .product-gallery {
border: 1px solid var(--g-line);
border-radius: var(--g-r-lg);
background: #fff;
padding: 10px;
}
.product-single .product-form .btn,
.product-single .btn-cart {
border-radius: var(--g-r-sm);
font-weight: 800;
}
.product-single .product-divider { border-color: var(--g-line); }
.product-single .product-meta { color: var(--g-muted-2); font-size: 13px; }
/* Adet seçici */
.input-group .quantity,
.quantity-plus, .quantity-minus {
border-radius: var(--g-r-sm);
}
.quantity-plus:hover, .quantity-minus:hover { color: var(--g-primary-deep); }
/* Sekmeler */
.tab-nav .nav-link, .nav-tabs .nav-link {
font-weight: 700;
letter-spacing: -0.01em;
border: none !important;
border-bottom: 2px solid transparent !important;
color: var(--g-muted-2);
}
.tab-nav .nav-link.active, .nav-tabs .nav-link.active {
color: var(--g-ink) !important;
border-bottom-color: var(--g-primary) !important;
background: transparent !important;
}
/* =========================================================================
14) SAYFALAMA
========================================================================= */
.pagination .page-item .page-link,
.pagination .page-link {
border-radius: var(--g-r-sm) !important;
border: 1px solid var(--g-line) !important;
color: var(--g-text-2) !important;
font-weight: 700;
margin: 0 3px;
transition: all var(--g-t);
}
.pagination .page-link:hover {
border-color: var(--g-primary) !important;
color: var(--g-primary-deep) !important;
background: var(--g-primary-soft) !important;
}
.pagination .page-item.active .page-link,
.pagination .active > .page-link {
background: var(--g-primary) !important;
border-color: var(--g-primary) !important;
color: #fff !important;
}
/* =========================================================================
15) ALT BİLGİ (FOOTER)
-------------------------------------------------------------------------
Temanın KENDİ "footer-dark" varyantı kullanılıyor (footer.php'de sınıf
eklendi). Böylece koyu zemine geçerken tüm alt metin renkleri tema
tarafından birlikte geliyor; "koyu üstüne koyu yazı" riski yok.
Aşağısı yalnızca renkleri Gayoor paletine çekiyor.
========================================================================= */
.footer.footer-dark { background-color: var(--g-ink) !important; }
.footer-dark a,
.footer-dark .widget-about .widget-about-title,
.footer-dark .category-name { color: #c2d2cb !important; }
.footer-dark a:hover,
.footer-dark a:active,
.footer-dark a.active { color: var(--g-primary) !important; }
.footer-dark .widget-about .widget-about-call,
.footer-dark .widget-title { color: #ffffff !important; }
.footer-dark .widget-title {
font-weight: 800;
font-size: 14px;
letter-spacing: -0.01em;
}
.footer-dark .widget-about .widget-about-call:hover { color: var(--g-primary) !important; }
/* Tema açık zemin için #666 veriyordu — koyu zeminde okunmaz, düzeltildi */
.footer-dark .footer-top .widget-body,
.footer-dark .footer-middle,
.footer-dark .footer-bottom,
.footer-dark p { color: #a7bab2 !important; }
.footer-dark .footer-top,
.footer-dark .footer-middle,
.footer-dark .footer-bottom,
.footer-dark .category-box a::after { border-color: rgba(255,255,255,.10) !important; }
.footer-dark .footer-bottom { font-size: 12.5px; }
.footer .widget { background: transparent; border: none; padding: 0; }
.footer-dark .social-icon {
border: 1px solid rgba(255,255,255,.16) !important;
border-radius: var(--g-r-pill) !important;
color: #cfdcd6 !important;
transition: background-color var(--g-t), color var(--g-t), border-color var(--g-t);
}
.footer-dark .social-icon:hover {
background: var(--g-primary) !important;
border-color: var(--g-primary) !important;
color: #fff !important;
}
/* Bülten bandı — temanın neon yeşili yerine marka zümrüt tonu.
Satır içi stil olduğu için !important gerekiyor. */
.footer .footer-newsletter {
background: linear-gradient(135deg, var(--g-primary-deep) 0%, var(--g-primary) 100%) !important;
filter: none !important;
}
.footer .footer-newsletter .icon-box-title,
.footer .footer-newsletter p { color: #fff !important; }
.footer .footer-newsletter .form-control {
background: rgba(255,255,255,.14) !important;
border: 1.5px solid rgba(255,255,255,.45) !important;
color: #fff !important;
border-radius: var(--g-r-sm) !important;
}
.footer .footer-newsletter .form-control::placeholder { color: rgba(255,255,255,.75); }
.footer .footer-newsletter .btn {
background-color: var(--g-ink) !important;
border-color: var(--g-ink) !important;
color: #fff !important;
border-radius: var(--g-r-sm) !important;
}
.footer .footer-newsletter .btn:hover { background-color: #000 !important; }
/* =========================================================================
16) BİLDİRİMLER / KÜÇÜK PARÇALAR
========================================================================= */
#toast-container > div {
border-radius: var(--g-r-sm) !important;
box-shadow: var(--g-sh-lg) !important;
font-family: var(--g-font);
opacity: 1 !important;
}
.swal2-popup { border-radius: var(--g-r-lg) !important; font-family: var(--g-font) !important; }
.swal2-styled.swal2-confirm { border-radius: var(--g-r-sm) !important; font-weight: 700 !important; }
hr.divider { border-color: var(--g-line); opacity: 1; }
/* Sayfa içeriğine nefes payı */
.page-content { padding-bottom: 56px; }
/* =========================================================================
16b) MOBİL ALT ÇUBUK VE YAN MENÜ
Tema bu bileşenlere zaten sahipti; burada modernize ediliyor.
Reklam trafiğinin büyük kısmı mobil olduğu için en çok fark eden yer.
========================================================================= */
.sticky-footer.fix-bottom {
background: rgba(255,255,255,.96) !important;
backdrop-filter: saturate(160%) blur(10px);
border-top: 1px solid var(--g-line) !important;
box-shadow: 0 -6px 20px -14px rgba(13,23,19,.35);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sticky-footer .sticky-link {
color: var(--g-muted-2) !important;
font-weight: 600;
transition: color var(--g-t);
}
.sticky-footer .sticky-link p {
font-size: 10px !important;
letter-spacing: .04em;
margin: 2px 0 0;
color: inherit;
}
.sticky-footer .sticky-link i { font-size: 20px; }
.sticky-footer .sticky-link.active,
.sticky-footer .sticky-link:hover { color: var(--g-primary-deep) !important; }
.sticky-footer .cart-dropdown .cart-count {
background: var(--g-primary) !important;
box-shadow: 0 0 0 2px #fff;
}
.mobile-menu-wrapper .mobile-menu-container {
background: var(--g-surface) !important;
border-right: 1px solid var(--g-line);
}
.mobile-menu li a {
color: var(--g-text-2) !important;
font-weight: 600;
border-bottom: 1px solid var(--g-line-soft) !important;
}
.mobile-menu li a:hover { color: var(--g-primary-deep) !important; }
.mobile-menu-wrapper .mobile-menu-close { color: var(--g-ink); }
.mobile-menu-wrapper .input-wrapper .form-control { border-radius: var(--g-r-pill); }
/* =========================================================================
17) MOBİL
========================================================================= */
@media (max-width: 991px) {
.title-link-wrapper .title,
.product-wrapper-1 .title { font-size: 18px; }
.product:not(.product-single) { padding: 8px 8px 12px; border-radius: var(--g-r-sm); }
.product:not(.product-single) .product-name { font-size: 12.5px; min-height: 2.9em; }
.product:not(.product-single) .product-price { font-size: 16px; }
/* Dokunmatikte hızlı eylem her zaman görünür */
.product:not(.product-single) .product-action-horizontal { opacity: 1; transform: none; }
.product:not(.product-single) .btn-product-icon { width: 38px; height: 38px; font-size: 15px; }
.cart-table .product-thumbnail img { width: 60px; height: 60px; }
.shop-breadcrumb li { flex-basis: 100px; font-size: 11.5px; padding: 8px; }
}
@media (max-width: 575px) {
.cart-summary { padding: 16px; }
.page-header .page-title { font-size: 22px; }
}
/* Dokunmatik cihazlarda hover'a bağlı gizleme yapma */
@media (hover: none) {
.product:not(.product-single) .product-action-horizontal { opacity: 1; transform: none; }
}
/* =========================================================================
18) ÇAKIŞMA DÜZELTMELERİ (23.09.2026 — 2. tur)
-------------------------------------------------------------------------
Aşağıdakiler "tahmin" değil: temanın CSS'i ile bu katman kural kural
karşılaştırıldı ve ÖZGÜLLÜK (specificity) yarışını kaybeden ya da tema
kuralıyla çelişen her kural tek tek bulundu. Bulunan 66 çakışmanın
görünür olanları burada kapatılıyor.
========================================================================= */
/* -------------------------------------------------------------------------
18.1 ARAMA KUTUSU — İŞLEVSEL HATA
`.header-search` üzerine verdiğim overflow:hidden, canlı arama
önizlemesini (#mobileSmartSearchShow, position:absolute; top:42px)
KIRPIYORDU: yazarken çıkan ürün listesi görünmüyordu.
Köşe yuvarlaklığı artık çocuk öğelerden geliyor.
------------------------------------------------------------------------- */
.header-search,
.header-search.hs-round { overflow: visible !important; }
.header-search .select-box select {
border: 0 !important;
background: transparent !important;
border-radius: var(--g-r-pill) 0 0 var(--g-r-pill) !important;
color: var(--g-muted-2) !important;
font-family: var(--g-font) !important;
}
/* Tema arama kutusuna 2px neon yeşil çerçeve veriyordu — hap görünümünü bozuyordu */
.header-search input.form-control,
.header-search.hs-round .form-control,
.header-search.hs-round.hs-expanded .form-control,
.header-search.hs-expanded input.form-control {
border: 0 !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: var(--g-font) !important;
font-size: 14px !important;
color: var(--g-text) !important;
}
.header-search input.form-control::placeholder,
.header-search input.form-control::-webkit-input-placeholder { color: #7a8b85 !important; }
.header-search .btn-search,
.header-search.hs-expanded .btn-search {
background: var(--g-primary) !important;
border: 0 !important;
border-color: transparent !important;
color: #fff !important;
}
.header-search .btn-search:hover,
.header-search .btn-search:focus,
.header-search .btn-search:active {
background: var(--g-primary-hover) !important;
color: #fff !important;
border-color: transparent !important;
}
#mobileSmartSearchShow { background: var(--g-surface); }
/* -------------------------------------------------------------------------
18.2 ÜRÜN KARTI — HIZLI EYLEM DÜĞMESİ
Tema bu çubuğu ortalıyordu: left:50%; width:166px; transform:translateX(-50%).
Ben sağ alta almak için right/transform verince kurallar ÇELİŞTİ
(left+width kazanır, right yok sayılır) → çubuk kartın sağından taşıyordu.
Artık tema değerleri açıkça sıfırlanıyor.
------------------------------------------------------------------------- */
.product:not(.product-single) .product-action-horizontal {
left: auto !important;
right: 10px !important;
bottom: 10px !important;
width: auto !important;
min-width: 0 !important;
padding: 0 !important;
transform: none !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.product:not(.product-single):hover .product-action-horizontal,
.product:not(.product-single):focus-within .product-action-horizontal {
bottom: 10px !important;
opacity: 1 !important;
transform: none !important;
}
/* Tek görselli kartlarda tema, "ikinci görsel" kuralını aynı görsele
uyguluyor (img:first-child ve img:last-child aynı eleman). Konum ve
görünürlük garantiye alınıyor. */
.product:not(.product-single) .product-media a > img:only-child {
position: relative !important;
opacity: 1 !important;
top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
}
/* -------------------------------------------------------------------------
18.3 SEPET ÖZETİ — tema `.cart .cart-summary` daha özgüldü,
kart tasarımım sepet sayfasında hiç uygulanmıyordu.
------------------------------------------------------------------------- */
.cart .cart-summary,
.cart-summary {
background: var(--g-surface) !important;
border: 1px solid var(--g-line) !important;
border-radius: var(--g-r) !important;
padding: 22px !important;
box-shadow: var(--g-sh-sm);
}
.cart .cart-summary .cart-title,
.cart-summary .cart-title {
font-size: 16px !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
margin-bottom: 14px !important;
}
.cart .cart-summary .btn-checkout { letter-spacing: .01em !important; }
.cart .form-control { border-radius: var(--g-r-sm) !important; }
/* -------------------------------------------------------------------------
18.4 ADIM GÖSTERGESİ (Sepet → Teslimat → Ödeme)
Tema `.breadcrumb.shop-breadcrumb li` ile 20px gri yazı dayatıyordu;
hap tasarımım hiç görünmüyordu.
------------------------------------------------------------------------- */
.breadcrumb.shop-breadcrumb {
display: flex !important;
gap: 8px;
flex-wrap: wrap;
padding: 20px 0 !important;
margin: 0 0 10px !important;
}
.breadcrumb.shop-breadcrumb li {
flex: 1 1 130px;
text-align: center;
padding: 10px 12px !important;
border-radius: var(--g-r-pill);
background: var(--g-surface-2);
border: 1px solid var(--g-line);
font-size: 12.5px !important;
font-weight: 700 !important;
color: var(--g-muted-2) !important;
opacity: 1 !important;
transition: background-color var(--g-t), color var(--g-t), border-color var(--g-t);
}
.breadcrumb.shop-breadcrumb li a { color: inherit !important; }
.breadcrumb.shop-breadcrumb li.active {
background: var(--g-primary-soft) !important;
border-color: rgba(var(--g-primary-rgb), .40);
color: var(--g-primary-dark) !important;
}
.breadcrumb.shop-breadcrumb li.active a { color: var(--g-primary-dark) !important; }
.breadcrumb.shop-breadcrumb li:not(:last-child)::after { content: none !important; }
/* Normal breadcrumb (adım göstergesi olmayan) */
.breadcrumb-nav .breadcrumb:not(.shop-breadcrumb) li a { color: var(--g-muted-2) !important; }
.breadcrumb-nav .breadcrumb:not(.shop-breadcrumb) li a:hover { color: var(--g-primary-deep) !important; }
.breadcrumb-nav .breadcrumb:not(.shop-breadcrumb) li:last-child { color: var(--g-ink) !important; font-weight: 700; }
/* -------------------------------------------------------------------------
18.5 SEPET SAYACI — tema `.cart-dropdown .cart-count` daha özgüldü
------------------------------------------------------------------------- */
.cart-dropdown .cart-count {
background: var(--g-primary) !important;
color: #fff !important;
font-weight: 800 !important;
}
/* -------------------------------------------------------------------------
18.6 TEMADA KALAN NEON YEŞİL (#3dbf26)
28 kuralda hâlâ eski neon yeşil vardı; marka paletiyle çakışıyordu.
------------------------------------------------------------------------- */
.header a:not(.btn):hover,
.product-name a:hover,
.product-cat a:hover,
.title-link-wrapper a:hover,
.post-title:hover,
.post-title a:hover,
.sticky-link:hover,
.cart-dropdown .product-price { color: var(--g-primary-deep) !important; }
.footer a:hover,
.footer a:active { color: var(--g-primary-deep) !important; }
.footer.footer-dark a:hover,
.footer.footer-dark a:active { color: var(--g-primary-bright) !important; }
.btn-product-icon:hover,
.btn-product-icon:active,
.product-action-horizontal .btn-product-icon:hover,
.product-action-horizontal .btn-product-icon:focus,
.product-action-horizontal .btn-product-icon:active {
background-color: var(--g-primary-hover) !important;
border-color: var(--g-primary-hover) !important;
color: #fff !important;
}
.btn-primary.btn-outline {
color: var(--g-primary-deep) !important;
border-color: var(--g-primary) !important;
background-color: transparent !important;
}
.btn-primary.btn-outline:hover,
.btn-primary.btn-outline:focus,
.btn-primary.btn-outline:active {
background-color: var(--g-primary) !important;
border-color: var(--g-primary) !important;
color: #fff !important;
}
/* -------------------------------------------------------------------------
18.7 KENAR ÇUBUĞU WIDGET'LARI
Genel `.widget` kart kuralı, kategori sayfasındaki filtre panelinin
İÇİNDEKİ widget'lara da uygulanıp "kart içinde kart" üretiyordu ve
alt bilgideki widget boşluklarını siliyordu. Kart kuralı kaldırıldı;
yalnızca başlık tipografisi kalıyor.
------------------------------------------------------------------------- */
.widget {
background: transparent;
border: none;
padding: 0;
}
.gy-filter .widget,
.footer .widget { background: transparent !important; border: none !important; padding: 0 !important; }
.footer-top .widget { margin-bottom: 4rem; }
/* -------------------------------------------------------------------------
18.8 TABLO BAŞLIĞI
------------------------------------------------------------------------- */
.shop-table.cart-table th {
letter-spacing: .06em !important;
padding: 14px 0 12px !important;
}
/* -------------------------------------------------------------------------
18.9 YAZI TİPİ GERÇEKTEN UYGULANSIN
Tema, Poppins'i 23 ayrı seçicide TEK TEK dayatıyordu (.header, .product,
.footer, .form-control, .alert …). body üzerinden yazı tipi vermek bu
yüzden yetmiyordu: sayfanın büyük kısmı hâlâ Poppins ile çiziliyordu.
Aşağıdaki liste, temanın Poppins verdiği her seçiciyi karşılıyor.
(İkon fontları — w-icon-*, fa-* — bu kuralların dışında kalır, çünkü
kendi font-family'lerini daha özgül seçicilerle tanımlarlar.)
------------------------------------------------------------------------- */
body,
h1, h2, h3, h4, h5, h6,
.header,
.footer,
.product,
.alert,
.testimonial,
.post-meta,
.font-primary,
.menu .submenu,
.mobile-menu-wrapper,
.form-control,
.input-wrapper input,
.price-range input,
.shipping-address .form-control,
.header-search input.form-control,
.cart-dropdown .cart-count,
#product-tab-reviews .review-form .form-control {
font-family: var(--g-font) !important;
}
/* -------------------------------------------------------------------------
18.10 ARAMA KUTUSUNDAKİ NEON YEŞİL ÇERÇEVE
`.header-search.hs-expanded .select-box` temada 2px neon yeşil çerçeve
alıyordu — hap biçimli arama kutusunun içinde ayrı bir yeşil kutu olarak
görünüyordu.
------------------------------------------------------------------------- */
.header-search .select-box,
.header-search.hs-expanded .select-box {
border: 0 !important;
background: transparent !important;
color: var(--g-muted-2) !important;
}
.header-search .select-box::before { color: var(--g-muted-2) !important; }
/* Tema tüm düğmelere 2px çerçeve veriyor; modern görünüm için inceltildi */
.btn { border-width: 1.5px; }
/* =========================================================================
19) İNCE İŞÇİLİK — 3. TUR (23.09.2026)
-------------------------------------------------------------------------
2. turdan sonra yapılan ikinci makine denetiminde, ÖZGÜLLÜK yarışını
kaybettiği için hiç uygulanmayan 89 kural ve canlı sayfalarda hâlâ eski
neon yeşili (#3dbf26) basan 106 tema kuralı bulundu. Aşağıdaki blok
bunların tamamını kapatıyor.
========================================================================= */
/* -------------------------------------------------------------------------
19.1 SLIDER NOKTALARI — GÖRÜNÜR HATA
Ana sayfadaki tüm kaydırmalı alanların aktif noktası hâlâ neon yeşildi
(`.swiper-theme .swiper-pagination .swiper-pagination-bullet-active`,
özgüllük 0-3-0; benim kuralım 0-1-0 olduğu için hiç uygulanmıyordu).
------------------------------------------------------------------------- */
.swiper-pagination .swiper-pagination-bullet,
.swiper-theme .swiper-pagination .swiper-pagination-bullet,
.pg-grey > .swiper-pagination .swiper-pagination-bullet {
background-color: #cfd8d4 !important;
border-color: #cfd8d4 !important;
opacity: 1 !important;
transition: width var(--g-t), background-color var(--g-t) !important;
}
.pg-white > .swiper-pagination .swiper-pagination-bullet {
background-color: rgba(255,255,255,.55) !important;
border-color: transparent !important;
}
.swiper-pagination .swiper-pagination-bullet-active,
.swiper-theme .swiper-pagination .swiper-pagination-bullet-active,
.pg-white > .swiper-pagination .swiper-pagination-bullet-active,
.pg-grey > .swiper-pagination .swiper-pagination-bullet-active {
background-color: var(--g-primary) !important;
border-color: var(--g-primary) !important;
width: 22px !important;
border-radius: 999px !important;
opacity: 1 !important;
}
.pg-white > .swiper-pagination .swiper-pagination-bullet-active {
background-color: #fff !important;
border-color: #fff !important;
}
/* Kaydırma okları */
.swiper-theme .swiper-button-next,
.swiper-theme .swiper-button-prev,
.widget-products .swiper-button-next,
.widget-products .swiper-button-prev,
.nav-top > .swiper-button-next,
.nav-top > .swiper-button-prev { color: var(--g-ink) !important; }
.swiper-theme .swiper-button-next:not(.swiper-button-disabled):hover,
.swiper-theme .swiper-button-next:not(.swiper-button-disabled):focus,
.swiper-theme .swiper-button-next:not(.swiper-button-disabled):active,
.swiper-theme .swiper-button-prev:not(.swiper-button-disabled):hover,
.swiper-theme .swiper-button-prev:not(.swiper-button-disabled):focus,
.swiper-theme .swiper-button-prev:not(.swiper-button-disabled):active {
background-color: var(--g-primary) !important;
border-color: var(--g-primary) !important;
color: #fff !important;
}
.widget-products .swiper-button-next:not(.swiper-button-disabled):hover,
.widget-products .swiper-button-prev:not(.swiper-button-disabled):hover,
.nav-top > .swiper-button-next:not(.swiper-button-disabled):hover,
.nav-top > .swiper-button-prev:not(.swiper-button-disabled):hover,
.single-product .nav-top > .swiper-button-next:not(.swiper-button-disabled):hover,
.single-product .nav-top > .swiper-button-prev:not(.swiper-button-disabled):hover {
color: var(--g-primary-deep) !important;
}
/* Ürün görseli küçük resim seçimi — seçili çerçeve neon yeşildi */
.product-thumb.active::before,
.swiper-slide-thumb-active::before,
.product-thumbs .swiper-slide-thumb-active .product-thumb::before {
border-color: var(--g-primary) !important;
}
/* -------------------------------------------------------------------------
19.2 BAŞLIK ALTI VURGU ÇİZGİSİ
`.title.title-link::before` neon yeşil dolgu veriyordu.
------------------------------------------------------------------------- */
.title.title-link::before { background-color: var(--g-primary) !important; }
.widget.widget-products .title.title-link::before {
background-color: var(--g-primary) !important;
height: 2px !important;
}
/* -------------------------------------------------------------------------
19.3 YARDIMCI SINIFLAR
Tema bunları `!important` ile tanımlamış; aynı önemde olup daha sonra
yüklendiğimiz için buradaki değerler geçerli olur.
------------------------------------------------------------------------- */
.bg-primary { background-color: var(--g-primary) !important; }
.text-primary { color: var(--g-primary-deep) !important; }
.border-primary { border-color: var(--g-primary) !important; }
/* -------------------------------------------------------------------------
19.4 BAĞLANTI GÖRÜNÜMLÜ DÜĞMELER
btn-link / btn-underline / btn-white varyantlarının hepsi neon yeşildi.
------------------------------------------------------------------------- */
.btn-cart.btn-link,
.btn-primary.btn-link,
.btn-primary.btn-underline,
.btn-white.btn-outline:hover,
.btn-white.btn-outline:focus,
.btn-white.btn-outline:active { color: var(--g-primary-deep) !important; }
.btn-cart.btn-link:hover,
.btn-cart.btn-link:focus,
.btn-cart.btn-link:active,
.btn-primary.btn-link:hover,
.btn-primary.btn-link:focus,
.btn-primary.btn-link:active,
.btn-primary.btn-underline:hover,
.btn-primary.btn-underline:focus,
.btn-primary.btn-underline:active {
color: var(--g-primary-dark) !important;
border-color: var(--g-primary-dark) !important;
}
/* -------------------------------------------------------------------------
19.5 ÜST BAR / ARAMA KALINTILARI
------------------------------------------------------------------------- */
.header-call:hover .w-icon-call,
.header-search.hs-toggle:hover,
#product-tab-reviews .avg-mark { color: var(--g-primary-deep) !important; }
/* Arama hapının sol tarafındaki kategori kutusu 2px neon çerçeveliydi */
.header-search.hs-expanded .select-box,
.header-search .select-box {
border: 0 !important;
border-right: none !important;
color: var(--g-muted-2) !important;
background: transparent !important;
}
.header-search.hs-expanded .select-box::after {
background: var(--g-line) !important;
height: 22px !important;
}
/* -------------------------------------------------------------------------
19.6 AÇILIR KUTULAR (select)
Tema `.select-box select` ve `.toolbox select` ile benim genel `select`
kuralımı eziyordu: köşe yarıçapı ve çerçeve hiç uygulanmıyordu.
Arama kutusunun içindeki select hariç tutuluyor (orada çerçeve olmamalı).
------------------------------------------------------------------------- */
.toolbox select,
.select-box select {
border: 1.5px solid var(--g-line) !important;
border-radius: var(--g-r-sm) !important;
background-color: var(--g-surface) !important;
color: var(--g-text) !important;
font-family: var(--g-font) !important;
font-size: 13px !important;
height: auto !important;
padding: 9px 30px 9px 12px !important;
transition: border-color var(--g-t), box-shadow var(--g-t);
}
.toolbox select:focus,
.select-box select:focus {
border-color: var(--g-primary) !important;
box-shadow: 0 0 0 3px rgba(var(--g-primary-rgb), .12) !important;
outline: none !important;
}
.toolbox .select-box::before { color: var(--g-muted-2) !important; }
/* -------------------------------------------------------------------------
19.7 KENAR ÇUBUĞU ÜRÜN LİSTESİ (.product-widget)
Tema ürün adını #666 gri yapıyordu (özgüllük 0-2-0) — başlık tipografim
uygulanmıyordu.
------------------------------------------------------------------------- */
.product-widget .product-name,
.sidebar .product-widget .product-name {
color: var(--g-ink) !important;
font-family: var(--g-font) !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.45 !important;
}
.product-widget .product-name a:hover { color: var(--g-primary-deep) !important; }
.product-widget .product-price { font-size: 14px !important; font-weight: 800 !important; }
.product-widget .product-media img { border-radius: 8px !important; }
/* -------------------------------------------------------------------------
19.8 SEPET TABLOSU
`.shop-table.cart-table td.product-price` (0-3-1) fiyatı 400 ağırlıkta
bırakıyordu; ara toplam ile aynı satırda ton farkı oluşmuyordu.
------------------------------------------------------------------------- */
.shop-table.cart-table td.product-price {
font-size: 14px !important;
font-weight: 600 !important;
color: var(--g-muted-2) !important;
letter-spacing: -0.01em !important;
}
.shop-table.cart-table td.product-subtotal {
font-size: 15px !important;
font-weight: 800 !important;
color: var(--g-ink) !important;
letter-spacing: -0.02em !important;
}
/* -------------------------------------------------------------------------
19.9 WIDGET BAŞLIKLARI
------------------------------------------------------------------------- */
.widget.widget-products .title {
font-size: 16px !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
color: var(--g-ink) !important;
}
/* -------------------------------------------------------------------------
19.10 ÜRÜN DETAYI — YAPIŞKAN ÜST ŞERİT
Tema sabitlendiğinde `.product-details`i gizliyor; benim genel
`display:flex` kuralım bununla çelişiyordu.
------------------------------------------------------------------------- */
.product-sticky-content.fix-top.fixed .product-details { display: none !important; }
.product-sticky-content.fixed {
background: var(--g-surface) !important;
border-bottom: 1px solid var(--g-line) !important;
box-shadow: var(--g-sh) !important;
}
.product-sticky-content .product-name { font-weight: 700 !important; }
/* -------------------------------------------------------------------------
19.11 İSTİSNA — arama hapının içindeki kategori kutusu
19.6 tüm `select`leri çerçeveliyor; arama hapında çerçeve OLMAMALI.
Bu blok dosyanın en sonunda durmalı.
------------------------------------------------------------------------- */
.header-search .select-box select,
.header-search.hs-expanded .select-box select {
border: 0 !important;
background: transparent !important;
border-radius: var(--g-r-pill) 0 0 var(--g-r-pill) !important;
box-shadow: none !important;
padding: 0 20px 0 15px !important;
color: var(--g-muted-2) !important;
font-size: 13px !important;
}
.header-search .select-box select:focus { box-shadow: none !important; }
/* -------------------------------------------------------------------------
19.12 SON 9 KALINTI
Denetimin son turunda hâlâ eski neon yeşili basan kurallar.
------------------------------------------------------------------------- */
.btn-product { background-color: var(--g-primary) !important; }
.btn-product:hover,
.btn-product:focus,
.btn-product:active { background-color: var(--g-primary-hover) !important; }
.category-dropdown:hover > a { background-color: var(--g-primary-hover) !important; }
.icon-box-primary .icon-box-icon i { color: var(--g-primary-deep) !important; }
.shop-table .btn-close:hover i { color: #d64545 !important; }
#product-tab-reviews .tab-nav-boxed .nav-link:hover,
.nav-tabs .nav-item:hover .nav-link { color: var(--g-primary-deep) !important; }
.mobile-menu-container .nav-item .nav-link.active { border-color: var(--g-primary) !important; }
.tab-nav-underline .nav-item .nav-link.active::after,
.tab-nav-underline .nav-item:hover .nav-link::after { border-color: var(--g-primary) !important; }
/* =========================================================================
20) TARAYICIDA GÖRÜLENLER — 4. TUR (23.09.2026)
-------------------------------------------------------------------------
Sunucuya gerçek bir tarayıcı (Chromium) kuruldu ve sayfaların ekran
görüntüsü alındı. Aşağıdakiler tahmin değil, GÖRÜLEN kusurlar.
========================================================================= */
/* -------------------------------------------------------------------------
20.1 KENAR ÇUBUĞU ÜRÜN LİSTESİ — "ÇOK SEVİLENLER"
Benim ürün KARTI kuralım (.product:not(.product-single)) kenar çubuğundaki
YATAY ürün satırlarına da uygulanıyordu: görsel üstte, ad altta, dev
kutular hâlinde alt alta diziliyorlardı. Kart kuralları burada geri alınıp
temanın yatay düzeni (görsel solda, ad+fiyat sağda) yeniden kuruluyor.
------------------------------------------------------------------------- */
.product.product-widget {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid var(--g-line-soft, #eef2f0) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 12px 0 !important;
margin: 0 !important;
text-align: left !important;
overflow: visible !important;
}
.product.product-widget:last-child { border-bottom: 0 !important; }
.product.product-widget:hover { transform: none !important; box-shadow: none !important; }
.product.product-widget .product-media {
flex: 0 0 72px !important;
width: 72px !important;
max-width: 72px !important;
margin: 0 12px 0 0 !important;
padding: 0 !important;
border-radius: 10px !important;
border: 1px solid var(--g-line, #e5ebe8) !important;
background: #fff !important;
overflow: hidden !important;
}
.product.product-widget .product-media > a {
aspect-ratio: 1 / 1 !important;
display: block !important;
width: 100% !important;
}
.product.product-widget .product-media img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
padding: 6px !important;
transform: none !important;
}
.product.product-widget:hover .product-media img { transform: none !important; }
.product.product-widget .product-details {
display: block !important;
flex: 1 1 auto !important;
min-width: 0 !important;
padding: 0 !important;
text-align: left !important;
}
.product.product-widget .product-name {
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
margin: 0 0 6px !important;
min-height: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product.product-widget .product-price {
font-size: 14px !important;
font-weight: 800 !important;
margin: 0 !important;
justify-content: flex-start !important;
}
/* Kenar çubuğunda hızlı eylem düğmesi gösterilmemeli */
.product.product-widget .product-action-horizontal,
.product.product-widget .product-action-vertical,
.product.product-widget .product-label-group { display: none !important; }
/* -------------------------------------------------------------------------
20.2 YAPIŞKAN ÜRÜN ŞERİDİ
Sayfa kaydırılınca üstte/altta belirmesi gereken şerit, ürün bilgisinin
TAM ORTASINDA sabit duruyordu: aynı ürün ikinci kez, üç fiyat yan yana
("109,00 TL78,00 TL 109,00 TL") yapışık hâlde görünüyordu.
Artık yalnızca tema JS'i .fixed sınıfını eklediğinde görünüyor.
------------------------------------------------------------------------- */
/* DİKKAT: sepete ekle formu bu kabın İÇİNDE duruyor — kabın tamamı
gizlenemez. Yalnızca şeridin "ürün özeti" kopyası gizleniyor. */
.product-sticky-content:not(.fixed) .product-list-sm,
.product-sticky-content:not(.fixed) .product-image-sm,
.config_new .product-sticky-content:not(.fixed) > .product-form > .product-list-sm { display: none !important; }
.product-sticky-content.fixed {
display: block !important;
background: var(--g-surface) !important;
border-top: 1px solid var(--g-line) !important;
box-shadow: 0 -10px 30px -18px rgba(13,23,19,.45) !important;
}
.product-sticky-content.fixed .product-price { gap: 8px; }
.config_new, .config_new .sticky-content-wrapper { min-height: 0 !important; height: auto !important; }
/* -------------------------------------------------------------------------
20.3 FİYATLAR YAPIŞIKTI
"109,00 TL78,00 TL" gibi birleşik çıkıyordu; eski fiyat da üstü çizili
değildi.
------------------------------------------------------------------------- */
/* DİKKAT: `td.product-price` de bu sınıfı taşıyor. Hücreye display:flex
verilince hücre tablo düzeninden çıkıyor ve sepet tablosunda sütun
kayıyordu; bu yüzden tablo hücreleri dışarıda bırakıldı. */
.product-price:not(td):not(th) { display: flex !important; align-items: baseline; flex-wrap: wrap; gap: 8px; }
td.product-price, th.product-price { display: table-cell !important; }
.product-price ins,
.product-price .new-price { text-decoration: none !important; }
.product-price del,
.product-price .old-price {
text-decoration: line-through !important;
color: var(--g-muted-2) !important;
font-weight: 600 !important;
font-size: .82em !important;
}
/* -------------------------------------------------------------------------
20.4 KENAR ÇUBUĞU KUTULARI
Güven rozetleri (ücretsiz kargo, güvenli ödeme...) üç kenarı çizgili,
sıkışık bir liste gibi duruyordu.
------------------------------------------------------------------------- */
.sidebar .widget {
background: var(--g-surface) !important;
border: 1px solid var(--g-line) !important;
border-radius: var(--g-r) !important;
padding: 18px !important;
margin-bottom: 18px !important;
}
.sidebar .widget .widget-title,
.sidebar .widget .title {
font-size: 14px !important;
font-weight: 800 !important;
letter-spacing: -0.01em !important;
margin: 0 0 14px !important;
padding: 0 0 12px !important;
border-bottom: 1px solid var(--g-line-soft, #eef2f0) !important;
}
.sidebar .widget-icon-box .icon-box {
padding: 12px 0 !important;
border: 0 !important;
border-bottom: 1px solid var(--g-line-soft, #eef2f0) !important;
}
.sidebar .widget-icon-box .icon-box:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; }
.sidebar .widget-icon-box .icon-box:first-child { padding-top: 0 !important; }
.sidebar .widget-icon-box .icon-box-title { font-size: 13.5px !important; font-weight: 700 !important; margin-bottom: 2px !important; }
.sidebar .widget-icon-box .icon-box-content p { font-size: 12.5px !important; margin: 0 !important; color: var(--g-muted-2) !important; }
/* -------------------------------------------------------------------------
20.5 ÜRÜN GALERİSİ
Dikey (portre) görselli üründe ana görsel kutuyu uçtan uca dolduruyor,
galeri kartı bilgi kartının iki katı yüksekliğe çıkıyordu; küçük resimler
de kartın dışına taşıyordu. Artık tüm ürünlerde aynı kare çerçeve.
------------------------------------------------------------------------- */
.product-gallery .product-single-swiper .swiper-slide { background: #fff; }
.product-gallery .product-image {
aspect-ratio: 1 / 1;
display: flex !important;
align-items: center;
justify-content: center;
margin: 0;
padding: 18px;
background: #fff;
overflow: hidden;
}
.product-gallery .product-image img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
}
.product-gallery .product-thumbs-wrap { margin-top: 12px; padding: 0 2px 2px; }
.product-gallery .product-thumbs-wrap .swiper-slide {
border: 1px solid var(--g-line);
border-radius: 10px;
overflow: hidden;
background: #fff;
cursor: pointer;
transition: border-color var(--g-t);
}
.product-gallery .product-thumbs-wrap .swiper-slide:hover { border-color: var(--g-primary); }
.product-gallery .product-thumbs-wrap .swiper-slide-thumb-active { border-color: var(--g-primary) !important; }
.product-gallery .product-thumbs-wrap .swiper-slide img {
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1;
object-fit: contain !important;
padding: 6px;
display: block;
}
/* Galeri okları: görselin üstünde yüzen daireler */
.product-single-swiper .swiper-button-next,
.product-single-swiper .swiper-button-prev {
width: 38px; height: 38px;
border-radius: 50%;
background: rgba(255,255,255,.94) !important;
border: 1px solid var(--g-line) !important;
color: var(--g-ink) !important;
box-shadow: var(--g-sh-sm);
opacity: 0;
transition: opacity var(--g-t), background-color var(--g-t);
}
.product-gallery:hover .swiper-button-next,
.product-gallery:hover .swiper-button-prev { opacity: 1; }
.product-single-swiper .swiper-button-next:hover,
.product-single-swiper .swiper-button-prev:hover {
background: var(--g-primary) !important;
border-color: var(--g-primary) !important;
color: #fff !important;
}
/* -------------------------------------------------------------------------
20.6 STOK YOK DÜĞMESİ
Marka kuralım satır içi kırmızıyı eziyordu: tükenmiş ürün de yemyeşil
"sepete ekle" gibi duruyordu.
------------------------------------------------------------------------- */
.btn.gy-out-of-stock,
.btn.gy-out-of-stock:hover,
.btn.gy-out-of-stock:focus {
background: #f1f4f3 !important;
border: 1.5px solid #dde5e1 !important;
color: #6b7b75 !important;
cursor: not-allowed !important;
box-shadow: none !important;
transform: none !important;
font-weight: 700;
letter-spacing: 0;
}
.btn.gy-out-of-stock i { margin-right: 7px; }
/* -------------------------------------------------------------------------
20.7 TELEFON GÖRÜNÜMÜ
Tarayıcıda 390px genişlikte bakıldığında görülenler.
------------------------------------------------------------------------- */
/* (a) Üst şerit: kargo duyurusu "tek satır" olarak ayarlıydı ve sağdaki
bağlantılarla birlikte 390px'e sığmayınca ekranın SOLUNA taşıp
yarısı görünmez oluyordu ("...1.000 TL ÜZERİ" diye kesik duruyordu). */
@media (max-width: 991px) {
.header-top .container { gap: 10px; }
.header-top .header-left { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.header-top .welcome-msg {
font-size: 11px !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
}
.header-top .header-right { flex: 0 0 auto; white-space: nowrap; }
.header-top .header-right a { font-size: 11.5px !important; }
}
/* (b) Kenar çubuğu açma düğmesi: içerik zaten sayfada alt alta göründüğü için
işlevsizdi; ekranın sağ kenarında gri bir kutu olarak duruyordu. */
.sidebar-fixed > .sidebar-toggle,
.product-sidebar .sidebar-toggle,
.product-sidebar .sidebar-overlay,
.product-sidebar .sidebar-close { display: none !important; }
/* (c) Sekmeler ("Açıklama / İade & Teslimat / Ürün Yorumları") telefonda
iki satıra kırılıp hizası bozuluyordu; artık yana kaydırılabiliyor. */
@media (max-width: 767px) {
.product-tabs .nav-tabs {
flex-wrap: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.product-tabs .nav-tabs::-webkit-scrollbar { display: none; }
.product-tabs .nav-item { flex: 0 0 auto; }
.product-tabs .nav-link { white-space: nowrap; font-size: 14px !important; }
}
/* (d) Dokunmatik cihazda "üzerine gelince" diye bir şey yok: galeri okları
görünmez kalıyordu. */
@media (hover: none) {
.product-single-swiper .swiper-button-next,
.product-single-swiper .swiper-button-prev { opacity: 1; }
}
/* (e) Telefonda kenar çubuğu içeriği ana içeriğin altına geçsin, kartlar
tam genişlik olsun. */
@media (max-width: 991px) {
.row .main-content { max-width: 100% !important; }
.product-sidebar.sidebar-fixed { max-width: 100% !important; flex: 1 1 100% !important; }
.product-sidebar .sidebar-content { width: 100% !important; }
}
/* (f) Telefonda sepete ekle satırı: miktar + düğme yan yana, kalp altına
düşmesin diye sıralama düzeltildi. */
@media (max-width: 575px) {
.product-sticky-content .product-form.container {
display: flex !important;
flex-wrap: nowrap !important;
align-items: stretch;
gap: 8px;
padding: 0 !important;
}
.product-sticky-content .product-qty-form { flex: 0 0 106px !important; margin: 0 !important; }
.product-sticky-content .product-qty-form .input-group { height: 44px; }
.product-sticky-content .btn-card {
flex: 1 1 auto !important;
min-width: 0 !important;
margin: 0 !important;
height: 44px;
padding-inline: 10px;
}
.product-sticky-content .btn-card span { white-space: nowrap; }
.product-sticky-content .btn-product-icon {
flex: 0 0 44px !important;
width: 44px !important;
height: 44px !important;
margin: 0 !important;
}
}
/* (g) Üst şerit duyurusunun kısa/uzun sürümü */
.welcome-msg .gy-promo-short { display: none; }
@media (max-width: 767px) {
.welcome-msg .gy-promo-long { display: none; }
.welcome-msg .gy-promo-short { display: inline; }
}
/* (g2) Duyuru metni tema tarafından BÜYÜK HARFe çevrilip harf aralığı
genişletiliyordu; kısa sürüm bile 256px'e sığmıyor, sonu kesiliyordu. */
@media (max-width: 767px) {
.header-top .header-left { justify-content: flex-start !important; }
.header-top .welcome-msg {
font-size: 10.5px !important;
letter-spacing: 0 !important;
text-transform: none !important;
margin: 0 auto 0 0 !important;
max-width: 100%;
}
}
/* (g3) ASIL SEBEP: tema bu duyuruyu bir kayan yazı (marquee) olarak
canlandırıyor (showMsgFirst / showMsg, 6-12 sn). Geniş ekranda sorun
değil; 390px'lik telefonda metin sürekli içeri-dışarı kayıp yarısı
kesik görünüyordu. Telefonda hareket kapatıldı, metin sabit duruyor. */
@media (max-width: 767px) {
.header-top .welcome-msg,
.header-top .welcome-msg > span {
animation: none !important;
transform: none !important;
}
}
/* -------------------------------------------------------------------------
20.8 ÜRÜN ADLARI KELİMENİN ORTASINDAN KESİLİYORDU
Tema `.product-name`e "white-space: nowrap" veriyor. Ben adı iki satıra
sığdırmak için bağlantıya satır kısıtı koymuştum ama dıştaki başlık hâlâ
tek satıra zorluyordu: "Jungle Pouch Kedi Maması Kıs" gibi, üç noktası
bile olmadan kesik adlar çıkıyordu.
------------------------------------------------------------------------- */
.product:not(.product-single) .product-name,
.products .product-name,
.product-wrap .product-name {
white-space: normal !important;
overflow: hidden !important;
text-overflow: clip !important;
word-break: break-word;
}
.product:not(.product-single) .product-name a,
.products .product-name a,
.product-wrap .product-name a {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
white-space: normal !important;
}
/* -------------------------------------------------------------------------
20.9 SEPET TABLOSU
Sütun genişlikleri belirsizdi: ürün adı sütunu tabloyu yutuyor, fiyat
"135,00 / TL" diye iki satıra kırılıyor, hücreler arasında gereksiz bir
dikey çizgi kalıyordu. Silme (×) düğmesi de görselin dışına taşıyordu.
------------------------------------------------------------------------- */
.shop-table.cart-table { width: 100%; table-layout: fixed; }
.shop-table.cart-table th,
.shop-table.cart-table td { border-left: 0 !important; border-right: 0 !important; }
/* Yüzde kullanılıyor: piksel verildiğinde artan genişlik hiçbir sütuna
dağıtılmayıp fiyat ile adet arasında 100px'lik bir boşluk bırakıyordu. */
.shop-table.cart-table .product-thumbnail { width: 12% !important; }
.shop-table.cart-table .product-name { width: 40% !important; text-align: left; }
.shop-table.cart-table .product-price { width: 15% !important; }
.shop-table.cart-table .product-quantity { width: 17% !important; }
.shop-table.cart-table .product-subtotal { width: 16% !important; }
.shop-table.cart-table thead th {
background: var(--g-surface-2) !important;
color: var(--g-muted-2) !important;
font-size: 11.5px !important;
font-weight: 800 !important;
text-transform: uppercase;
letter-spacing: .06em;
padding: 14px 10px !important;
}
.shop-table.cart-table thead th:first-child { border-radius: 12px 0 0 12px; }
.shop-table.cart-table thead th:last-child { border-radius: 0 12px 12px 0; }
.shop-table.cart-table td { padding: 16px 10px !important; vertical-align: middle !important; }
.shop-table.cart-table .product-price .amount,
.shop-table.cart-table .product-subtotal .amount { white-space: nowrap; }
.shop-table.cart-table .product-thumbnail .p-relative { position: relative; width: 72px; }
.shop-table.cart-table .product-thumbnail figure {
margin: 0; width: 72px; height: 72px;
border: 1px solid var(--g-line); border-radius: 10px;
overflow: hidden; background: #fff;
}
.shop-table.cart-table .product-thumbnail img {
width: 100% !important; height: 100% !important;
object-fit: contain !important; padding: 5px;
}
.shop-table.cart-table .btn-close.remove {
position: absolute !important;
top: -8px !important; right: -8px !important;
left: auto !important;
width: 22px; height: 22px; padding: 0;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: #fff !important;
border: 1px solid var(--g-line) !important;
box-shadow: var(--g-sh-sm);
font-size: 10px; line-height: 1;
color: var(--g-muted-2) !important;
}
.shop-table.cart-table .btn-close.remove:hover {
background: #fdecec !important; border-color: #f3c6c6 !important; color: #b42318 !important;
}
.shop-table.cart-table .product-name a {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; white-space: normal;
}
/* Sepet özetindeki indirim kodu kutusu tema yüzünden yalnızca alt çizgili
görünüyordu; diğer form alanlarıyla aynı görünüm verildi. */
.cart-summary #gyCouponInput,
.coupon.cart-summary .form-control {
border: 1.5px solid var(--g-line) !important;
border-radius: var(--g-r-sm) !important;
background: var(--g-surface) !important;
height: 44px !important;
padding: 0 14px !important;
}
.coupon.cart-summary .coupon-title { text-transform: none !important; font-size: 14px !important; }
/* 20.9.1 — TELEFONDA SEPET
Tablo telefonda alt alta dağılıyordu: her hücre ayrı bir satır, ortalanmış
yazılar, sıkışmış adet kutusu ve iki kez yazılan fiyat. Satırlar kart
düzenine çevrildi. */
@media (max-width: 767px) {
.shop-table.cart-table,
.shop-table.cart-table tbody { display: block; width: 100%; }
.shop-table.cart-table thead { display: none; }
.shop-table.cart-table tr {
display: grid;
grid-template-columns: 76px minmax(0, 1fr);
grid-template-areas:
"thumb name"
"thumb price"
"thumb qty";
align-items: start;
gap: 8px 14px;
padding: 14px;
margin-bottom: 12px;
border: 1px solid var(--g-line);
border-radius: var(--g-r);
background: var(--g-surface);
position: relative;
}
.shop-table.cart-table td,
.shop-table.cart-table td.text-center {
display: block;
border: 0 !important;
padding: 0 !important;
text-align: left !important;
width: auto !important;
}
.shop-table.cart-table td .amount { display: block; text-align: left; }
.shop-table.cart-table td.product-thumbnail { grid-area: thumb; }
.shop-table.cart-table td.product-name { grid-area: name; }
.shop-table.cart-table td.product-price { display: none !important; }
.shop-table.cart-table td.product-quantity { grid-area: qty; justify-self: start; width: 112px !important; }
.shop-table.cart-table td.product-subtotal { grid-area: price; }
.shop-table.cart-table .product-name a { font-size: 13.5px; line-height: 1.4; }
.shop-table.cart-table td.product-subtotal .amount { font-size: 16px !important; }
/* Adet kutusu kartın dışına taşıyordu (tema artı/eksi düğmelerini mutlak
konumlandırıyor ve kutunun kendi genişliği serbest kalıyordu). */
.shop-table.cart-table td.product-quantity .input-group {
width: 112px !important;
max-width: 112px !important;
height: 40px !important;
position: relative;
display: block !important;
}
.shop-table.cart-table td.product-quantity .quantity.form-control,
.shop-table.cart-table td.product-quantity input.quantity {
width: 112px !important;
height: 40px !important;
line-height: 38px !important;
text-align: center !important;
padding: 0 26px !important;
margin: 0 !important;
}
.shop-table.cart-table td.product-quantity .quantity-plus,
.shop-table.cart-table td.product-quantity .quantity-minus {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 24px !important; height: 24px !important;
margin: 0 !important;
}
.shop-table.cart-table td.product-quantity .quantity-minus { left: 6px !important; right: auto !important; }
.shop-table.cart-table td.product-quantity .quantity-plus { right: 6px !important; left: auto !important; }
.shop-table.cart-table td.product-thumbnail .btn-close.remove { top: -6px !important; right: -6px !important; }
.shop-table.cart-table .btn-close.remove { top: 8px !important; right: 8px !important; left: auto !important; }
.shop-table.cart-table .product-thumbnail .p-relative,
.shop-table.cart-table .product-thumbnail figure { width: 76px; height: 76px; }
}
/* =========================================================================
21) HESABIM (BİREYSEL MÜŞTERİ PANELİ) (23.09.2026)
-------------------------------------------------------------------------
Sayfanın kendi satır içi stilleri eski paletten kalmaydı (pembe kenarlık,
gri zemin) ve sitenin geri kalanıyla uyuşmuyordu. Hesap alanı buradan
yönetiliyor.
========================================================================= */
.gy-account .page-content { padding: 0 0 72px !important; }
.gy-account .breadcrumb-nav { margin-bottom: 0; }
/* ---- Başlık: kullanıcı kartı + sayısal özet ---- */
.gy-acc-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
background: var(--g-surface);
border: 1px solid var(--g-line);
border-radius: var(--g-r-lg, 20px);
padding: 24px 28px;
margin: 4px 0 28px;
box-shadow: var(--g-sh-sm);
}
.gy-acc-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.gy-acc-avatar {
flex: 0 0 56px; width: 56px; height: 56px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--g-primary-soft);
color: var(--g-primary-dark);
font-size: 22px; font-weight: 800; line-height: 1;
}
.gy-acc-head h1 {
font-size: 22px; font-weight: 800; letter-spacing: -0.025em;
margin: 0 0 4px; line-height: 1.25;
}
.gy-acc-head p { margin: 0; font-size: 13.5px; color: var(--g-muted-2); }
.gy-acc-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.gy-acc-stat {
min-width: 92px;
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 12px 16px;
border: 1px solid var(--g-line);
border-radius: var(--g-r);
background: var(--g-surface-2);
text-decoration: none;
transition: border-color var(--g-t), background-color var(--g-t), transform var(--g-t);
}
.gy-acc-stat:hover {
border-color: rgba(var(--g-primary-rgb), .45);
background: var(--g-primary-soft);
transform: translateY(-1px);
}
.gy-acc-stat-n { font-size: 20px; font-weight: 800; color: var(--g-ink); letter-spacing: -0.02em; }
.gy-acc-stat-l { font-size: 11.5px; font-weight: 700; color: var(--g-muted-2); letter-spacing: .04em; text-transform: uppercase; }
/* ---- Sol menü ---- */
.gy-account .dashboard-menu .nav-link {
display: flex; align-items: center; gap: 10px;
padding: 13px 16px !important;
border: 1px solid var(--g-line) !important;
border-radius: var(--g-r) !important;
background: var(--g-surface) !important;
color: var(--g-text) !important;
font-size: 14px; font-weight: 600;
text-transform: none; text-align: left;
margin-bottom: 8px !important;
transition: border-color var(--g-t), background-color var(--g-t), color var(--g-t);
}
.gy-account .dashboard-menu .nav-link i { font-size: 16px; opacity: .75; margin: 0 !important; }
.gy-account .dashboard-menu .nav-link:hover {
border-color: rgba(var(--g-primary-rgb), .45) !important;
background: var(--g-primary-soft) !important;
color: var(--g-primary-dark) !important;
}
.gy-account .dashboard-menu .nav-link.active,
.gy-account .dashboard-menu ul .active {
background: var(--g-primary) !important;
border-color: var(--g-primary) !important;
color: #fff !important;
box-shadow: 0 6px 16px -10px rgba(var(--g-primary-rgb), .9);
}
.gy-account .dashboard-menu .nav-link.active i { opacity: 1; }
/* ---- İçerik kartları ---- */
.gy-account .dashboard-content { padding-left: 28px !important; }
.gy-account .card {
background: var(--g-surface);
border: 1px solid var(--g-line);
border-radius: var(--g-r-lg, 20px);
box-shadow: var(--g-sh-sm);
overflow: hidden;
}
.gy-account .card-header {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
margin: 0 !important;
padding: 18px 22px !important;
border-bottom: 1px solid var(--g-line-soft, #eef2f0) !important;
background: transparent !important;
}
.gy-account .card-header h3 {
font-size: 17px !important; font-weight: 800 !important;
letter-spacing: -0.02em; margin: 0 !important; width: auto !important; float: none !important;
}
.gy-account .card-body { padding: 22px !important; margin: 0 !important; }
.gy-account .btn-sm.gy-head-action { padding: 8px 14px; font-size: 12.5px; }
/* ---- Kontrol paneli: son sipariş şeridi ---- */
.gy-acc-last {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 16px 20px; margin-bottom: 20px;
border: 1px solid rgba(var(--g-primary-rgb), .28);
border-radius: var(--g-r);
background: var(--g-primary-soft);
text-decoration: none; flex-wrap: wrap;
transition: border-color var(--g-t);
}
.gy-acc-last:hover { border-color: rgba(var(--g-primary-rgb), .6); }
.gy-acc-last-l { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.gy-acc-last-k { font-size: 12.5px; font-weight: 700; color: var(--g-primary-dark); }
.gy-acc-last-l b { font-size: 15px; color: var(--g-ink); }
.gy-acc-last-d { font-size: 12.5px; color: var(--g-muted-2); }
.gy-acc-last-r { display: flex; align-items: center; gap: 12px; }
.gy-acc-last-p { font-size: 15px; font-weight: 800; color: var(--g-ink); }
.gy-acc-last-r i { color: var(--g-primary-dark); }
/* ---- Kontrol paneli: kısayol kutuları ---- */
.gy-acc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 14px;
}
.gy-acc-tile {
display: flex; flex-direction: column; gap: 4px;
padding: 20px;
border: 1px solid var(--g-line);
border-radius: var(--g-r);
background: var(--g-surface);
text-decoration: none;
transition: border-color var(--g-t), transform var(--g-t), box-shadow var(--g-t);
}
.gy-acc-tile:hover {
border-color: rgba(var(--g-primary-rgb), .45);
transform: translateY(-2px);
box-shadow: var(--g-sh);
}
.gy-acc-tile-ico {
width: 40px; height: 40px; margin-bottom: 8px;
display: flex; align-items: center; justify-content: center;
border-radius: 12px;
background: var(--g-primary-soft);
color: var(--g-primary-dark);
font-size: 18px;
}
.gy-acc-tile-t { font-size: 14.5px; font-weight: 700; color: var(--g-ink); }
.gy-acc-tile-s { font-size: 12.5px; color: var(--g-muted-2); }
/* ---- Sipariş satırı ---- */
.gy-order-row {
display: flex; align-items: center; gap: 16px;
padding: 14px 16px;
border: 1px solid var(--g-line);
border-radius: var(--g-r);
background: var(--g-surface);
text-decoration: none;
margin-bottom: 10px;
transition: border-color var(--g-t), box-shadow var(--g-t);
}
.gy-order-row:hover { border-color: rgba(var(--g-primary-rgb), .45); box-shadow: var(--g-sh-sm); }
.gy-order-thumb {
flex: 0 0 52px; width: 52px; height: 52px;
border: 1px solid var(--g-line); border-radius: 10px;
overflow: hidden; background: #fff;
display: flex; align-items: center; justify-content: center;
}
.gy-order-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.gy-order-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gy-order-code { font-size: 14.5px; font-weight: 700; color: var(--g-ink); }
.gy-order-meta { font-size: 12.5px; color: var(--g-muted-2); }
.gy-order-meta .gy-dot { margin: 0 5px; opacity: .6; }
.gy-order-status { flex: 0 0 auto; }
.gy-order-total { flex: 0 0 auto; font-size: 15px; font-weight: 800; color: var(--g-ink); white-space: nowrap; }
.gy-order-go { flex: 0 0 auto; color: var(--g-muted-2); font-size: 18px; }
.gy-order-row:hover .gy-order-go { color: var(--g-primary-deep); }
/* ---- Durum rozetleri (site geneli) ---- */
.gy-badge {
display: inline-flex; align-items: center;
padding: 5px 11px; border-radius: 999px;
font-size: 11.5px; font-weight: 800; letter-spacing: .01em;
white-space: nowrap; border: 1px solid transparent;
}
.gy-badge-ok { background: var(--g-primary-soft); color: var(--g-primary-dark); border-color: rgba(var(--g-primary-rgb), .28); }
.gy-badge-info { background: #e8f1fd; color: #1c4f8f; border-color: #cfe0f6; }
.gy-badge-warn { background: #fff5e3; color: #8a5a00; border-color: #f5e0b8; }
.gy-badge-muted { background: #f0f3f2; color: #5c6e67; border-color: #e2e8e5; }
.gy-badge-bad { background: #fdecec; color: #b42318; border-color: #f3c6c6; }
/* ---- Boş durum ---- */
.gy-empty {
text-align: center;
padding: 48px 24px;
max-width: 430px;
margin: 0 auto;
}
.gy-empty-ico {
width: 66px; height: 66px; margin: 0 auto 18px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--g-primary-soft);
color: var(--g-primary-deep);
}
.gy-empty-ico svg { width: 30px; height: 30px; }
.gy-empty h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; }
.gy-empty p { font-size: 13.5px; color: var(--g-muted-2); line-height: 1.6; margin: 0 0 22px; }
.gy-empty .btn { padding-inline: 26px; }
/* ---- Hesap formları ---- */
.gy-account label {
display: block;
font-size: 12.5px; font-weight: 700; color: var(--g-muted-2);
margin-bottom: 7px; letter-spacing: .01em;
}
.gy-account .accountInfoText,
.gy-account .form-control {
height: 46px !important;
border: 1.5px solid var(--g-line) !important;
border-radius: var(--g-r-sm) !important;
background: var(--g-surface) !important;
font-size: 14px !important;
color: var(--g-text) !important;
padding: 0 14px !important;
}
.gy-account textarea.form-control { height: auto !important; padding: 12px 14px !important; }
.gy-account .form-control:focus {
border-color: var(--g-primary) !important;
box-shadow: 0 0 0 3px rgba(var(--g-primary-rgb), .12) !important;
}
@media (max-width: 991px) {
.gy-account .dashboard-content { padding-left: 0 !important; margin-top: 22px; }
.gy-acc-head { padding: 20px; }
.gy-acc-stats { width: 100%; }
.gy-acc-stat { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 575px) {
.gy-acc-head h1 { font-size: 19px; }
.gy-acc-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.gy-acc-tile { padding: 16px; }
.gy-order-row { flex-wrap: wrap; gap: 10px 12px; }
.gy-order-main { flex: 1 1 60%; }
.gy-order-status { order: 4; }
.gy-order-total { order: 3; margin-left: auto; }
.gy-order-go { display: none; }
}
/* 21.1 — tema `.tab-content`e beyaz zemin veriyor: hesap alanında kartların
arkasında gereksiz bir beyaz blok oluşuyordu. Ayrıca sol menünün son
öğesi ("Çıkış Yap") diğerlerinden 30px geniş çıkıyordu. */
.gy-account .tab-content.account.dashboard-content {
background: transparent !important;
padding: 0 0 0 28px !important;
}
.gy-account .tab-content > .tab-pane { padding: 0 !important; }
.gy-account .dashboard-menu .nav { display: block; }
.gy-account .dashboard-menu .nav-item {
display: block;
width: 100% !important;
margin: 0 !important;
}
.gy-account .dashboard-menu .nav-item .nav-link { width: 100%; }
@media (max-width: 991px) {
.gy-account .tab-content.account.dashboard-content { padding: 0 !important; }
}
/* -------------------------------------------------------------------------
21.2 SİPARİŞ DETAYI
------------------------------------------------------------------------- */
.gy-order-detail + .invoice .container { padding-top: 0; }
.gy-od-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 20px; flex-wrap: wrap;
padding: 4px 0 22px;
border-bottom: 1px solid var(--g-line);
margin-bottom: 24px;
}
.gy-od-kicker {
display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
text-transform: uppercase; color: var(--g-muted-2); margin-bottom: 4px;
}
.gy-od-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 6px; }
.gy-od-meta { font-size: 13.5px; color: var(--g-muted-2); margin: 0; }
.gy-od-meta .gy-dot { margin: 0 6px; opacity: .6; }
.gy-od-head-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gy-od-head-r .btn-sm { padding: 9px 16px; font-size: 12.5px; }
.gy-od-cargo {
display: flex; align-items: center; gap: 14px;
padding: 14px 18px; margin-bottom: 24px;
border: 1px solid rgba(var(--g-primary-rgb), .28);
border-radius: var(--g-r);
background: var(--g-primary-soft);
}
.gy-od-cargo-ico {
width: 38px; height: 38px; flex: 0 0 38px;
display: flex; align-items: center; justify-content: center;
border-radius: 10px; background: #fff; color: var(--g-primary-deep);
}
.gy-od-cargo-ico svg { width: 20px; height: 20px; }
.gy-od-cargo-k { display: block; font-size: 12px; font-weight: 700; color: var(--g-primary-dark); }
.gy-od-cargo b { font-size: 15px; letter-spacing: .04em; color: var(--g-ink); }
/* Fatura/özet tablosu */
.invoice .invoice-table thead th,
.invoice .invoice-table thead {
background: var(--g-surface-2) !important;
color: var(--g-muted-2) !important;
font-size: 11.5px !important;
font-weight: 800 !important;
text-transform: uppercase; letter-spacing: .06em;
border: 0 !important;
padding: 14px 12px !important;
}
.invoice .invoice-table td {
border-color: var(--g-line-soft, #eef2f0) !important;
padding: 16px 12px !important;
vertical-align: middle !important;
font-size: 13.5px;
}
.invoice .invoice-table img {
width: 46px !important; height: 46px !important;
object-fit: contain; background: #fff;
border: 1px solid var(--g-line); border-radius: 10px; padding: 3px;
}
.invoice .invoice-center { border: 0 !important; }
.invoice .invoice-inner {
background: var(--g-surface);
border: 1px solid var(--g-line);
border-radius: var(--g-r-lg);
box-shadow: var(--g-sh-sm);
overflow: hidden;
padding: 0 !important;
}
.invoice .invoice-info { border: 0 !important; background: transparent !important; padding: 0 !important; }
.invoice .invoice-bottom {
margin-top: 0 !important;
padding: 26px 22px !important;
border-top: 1px solid var(--g-line-soft, #eef2f0);
background: var(--g-surface-2);
}
.invoice .invoice-bottom h4,
.invoice .invoice-bottom h3 { font-size: 13px !important; font-weight: 800 !important; letter-spacing: .04em; text-transform: uppercase; color: var(--g-muted-2) !important; margin-bottom: 12px !important; }
.invoice .invoice-bottom p { font-size: 13.5px; line-height: 1.75; color: var(--g-text); }
.invoice .invoice-bottom .text-brand { color: var(--g-ink) !important; font-size: 24px !important; text-transform: none !important; letter-spacing: -0.02em !important; }
.invoice .pb-80 { padding-bottom: 26px !important; }
@media (max-width: 575px) {
.gy-od-head h1 { font-size: 21px; }
.gy-od-head-r { width: 100%; }
}
.invoice .invoice-table tr.gy-grand td {
border-top: 1.5px solid var(--g-line) !important;
background: var(--g-surface-2);
font-size: 16px !important;
color: var(--g-ink) !important;
padding-top: 18px !important; padding-bottom: 18px !important;
}
/* -------------------------------------------------------------------------
21.3 İADE / DEĞİŞİM TALEBİ
NOT: sınıf adı `gy-choice`; `gy-opt` adı kategori sayfasındaki filtre
seçeneklerine ait, karışmasın.
Sayfa gri kutulardan, yarım görsellerden ve yüzen (float) etiketlerden
oluşuyordu; her satır farklı genişlikteydi.
------------------------------------------------------------------------- */
.gy-sec-title {
font-size: 15px; font-weight: 800; letter-spacing: -0.01em;
color: var(--g-ink); margin: 0 0 14px;
}
.gy-pick {
display: flex; align-items: center; gap: 14px;
padding: 14px 16px; margin-bottom: 10px;
border: 1.5px solid var(--g-line);
border-radius: var(--g-r);
background: var(--g-surface);
cursor: pointer;
transition: border-color var(--g-t), background-color var(--g-t);
}
.gy-pick:hover { border-color: rgba(var(--g-primary-rgb), .45); }
.gy-pick:has(input:checked) { border-color: var(--g-primary); background: var(--g-primary-soft); }
.gy-pick-box { flex: 0 0 auto; display: flex; }
.gy-pick-box input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--g-primary); cursor: pointer; }
.gy-pick-thumb {
flex: 0 0 52px; width: 52px; height: 52px;
border: 1px solid var(--g-line); border-radius: 10px;
background: #fff; overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.gy-pick-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.gy-pick-main { flex: 1 1 auto; min-width: 0; }
.gy-pick-main h6 { font-size: 14px; font-weight: 600; margin: 0; line-height: 1.45; color: var(--g-ink); }
.gy-pick-main small { color: var(--g-muted-2); font-weight: 400; }
.gy-pick-price { flex: 0 0 auto; font-size: 15px; font-weight: 800; white-space: nowrap; color: var(--g-ink); }
.gy-choice {
display: flex; align-items: center; gap: 11px;
width: 100%;
padding: 14px 16px; margin: 0 0 10px;
border: 1.5px solid var(--g-line);
border-radius: var(--g-r);
background: var(--g-surface);
cursor: pointer;
font-size: 14px; color: var(--g-text);
transition: border-color var(--g-t), background-color var(--g-t);
}
.gy-choice:hover { border-color: rgba(var(--g-primary-rgb), .45); }
.gy-choice:has(input:checked) { border-color: var(--g-primary); background: var(--g-primary-soft); }
.gy-choice input[type="radio"] {
flex: 0 0 auto; width: 18px; height: 18px; margin: 0;
accent-color: var(--g-primary); cursor: pointer;
}
.gy-choice > span:first-of-type { flex: 1 1 auto; }
.gy-choice-tag {
flex: 0 0 auto;
font-size: 11.5px; font-weight: 800;
padding: 4px 10px; border-radius: 999px;
background: var(--g-primary-soft); color: var(--g-primary-dark);
}
.gy-submit { padding-inline: 34px; }
#showing_13 { width: 100%; margin-top: 6px; }
#showing_13 label { display: block; font-size: 12.5px; font-weight: 700; color: var(--g-muted-2); margin-bottom: 7px; }
/* 21.3.1 — iade sayfasındaki kart iç boşluğu yoktu; başlıklar kartın
kenarına yapışıp kırpılıyordu. */
.invoice-5 .invoice-info > .invoice-center,
.invoice-5 .invoice-info { padding: 0 !important; }
.invoice-5 .invoice-inner > .invoice-info > .row,
.gy-return-body { padding: 22px !important; }
.gy-return-body .gy-sec-title:not(:first-child) { margin-top: 26px; }
/* Nedenler ızgarası: geniş ekranda iki sütun */
.gy-reason-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 767px) { .gy-reason-grid { grid-template-columns: 1fr; } }
.gy-return-actions { margin-top: 22px; display: flex; justify-content: flex-start; }
.gy-return-actions .btn { padding-inline: 34px; height: 48px; }
/* 21.2.1 — ürün hücresindeki görsel ve ad float ile dizilmişti; hizalama
kayıyor ve uzun adlar taşıyordu. */
.invoice .item-desc-1 { display: flex; align-items: center; gap: 14px; }
.invoice .item-desc-1 img { float: none !important; flex: 0 0 46px; }
.invoice .item-desc-1 > span { float: none !important; margin: 0 !important; padding: 0 !important; font-size: 13.5px !important; line-height: 1.45; }
.gy-form-submit { padding-inline: 32px; height: 48px; margin-top: 4px; }
/* =========================================================================
22) GİRİŞ / KAYIT SAYFASI (23.09.2026)
========================================================================= */
.gy-auth { padding: 40px 0 80px; }
.gy-auth-wrap {
display: grid;
grid-template-columns: 0.85fr 1fr;
gap: 0;
max-width: 1000px;
margin: 0 auto;
background: var(--g-surface);
border: 1px solid var(--g-line);
border-radius: 24px;
box-shadow: 0 30px 60px -40px rgba(13,23,19,.4);
overflow: hidden;
}
/* Sol taraf: marka paneli */
.gy-auth-aside {
background: linear-gradient(160deg, var(--g-primary-deep) 0%, var(--g-primary-dark) 100%);
color: #fff;
padding: 44px 38px;
display: flex; align-items: center;
position: relative;
overflow: hidden;
}
.gy-auth-aside::after {
content: ""; position: absolute; right: -80px; bottom: -110px;
width: 260px; height: 260px; border-radius: 50%;
background: rgba(255,255,255,.06);
}
.gy-auth-aside-in { position: relative; z-index: 1; }
.gy-auth-logo {
display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.04em;
margin-bottom: 26px; opacity: .95;
}
.gy-auth-aside h2 {
font-size: 30px; font-weight: 800; line-height: 1.2;
letter-spacing: -0.035em; color: #fff; margin: 0 0 26px;
}
.gy-auth-list { list-style: none; margin: 0; padding: 0; }
.gy-auth-list li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 14px; line-height: 1.5;
color: rgba(255,255,255,.88);
margin-bottom: 13px;
}
.gy-auth-list li span {
flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px;
border-radius: 50%; background: rgba(255,255,255,.16);
position: relative;
}
.gy-auth-list li span::after {
content: ""; position: absolute; left: 5px; top: 7px;
width: 7px; height: 3.5px;
border-left: 1.8px solid #fff; border-bottom: 1.8px solid #fff;
transform: rotate(-45deg);
}
/* Sağ taraf: form */
.gy-auth-card { padding: 40px 44px 44px; }
.gy-auth-tabs .nav-tabs {
border-bottom: 1px solid var(--g-line) !important;
margin-bottom: 26px !important;
justify-content: flex-start !important;
gap: 26px;
}
.gy-auth-tabs .nav-tabs .nav-item { margin: 0 !important; }
.gy-auth-tabs .nav-link {
padding: 0 0 13px !important;
font-size: 14px !important; font-weight: 700 !important;
text-transform: none !important;
color: var(--g-muted-2) !important;
border: 0 !important;
position: relative;
}
.gy-auth-tabs .nav-link.active { color: var(--g-ink) !important; }
.gy-auth-tabs .nav-link.active::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
height: 2px; background: var(--g-primary); border-radius: 2px;
}
.gy-auth-title { font-size: 23px; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 6px; }
.gy-auth-sub { font-size: 13.5px; color: var(--g-muted-2); margin: 0 0 24px; }
.gy-auth .form-group { margin-bottom: 16px; }
.gy-auth label {
display: block; font-size: 12.5px; font-weight: 700;
color: var(--g-muted-2); margin-bottom: 7px;
}
.gy-auth .form-control {
height: 48px !important;
border: 1.5px solid var(--g-line) !important;
border-radius: var(--g-r-sm) !important;
background: var(--g-surface) !important;
font-size: 14px !important;
padding: 0 15px !important;
width: 100%;
}
.gy-auth .form-control:focus {
border-color: var(--g-primary) !important;
box-shadow: 0 0 0 3px rgba(var(--g-primary-rgb), .12) !important;
}
.gy-auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.gy-auth-grid .gy-span2 { grid-column: 1 / -1; }
.gy-auth-check {
display: flex; align-items: flex-start; gap: 10px;
font-size: 13px !important; font-weight: 500 !important;
color: var(--g-text-2) !important;
margin: 6px 0 22px !important;
cursor: pointer;
}
.gy-auth-check input { margin: 1px 0 0; accent-color: var(--g-primary); width: 17px; height: 17px; }
.gy-auth-check a { color: var(--g-primary-deep); font-weight: 700; }
.gy-auth-btn { width: 100%; height: 50px; font-size: 15px; margin-top: 6px; }
.gy-auth-alt { font-size: 13.5px; color: var(--g-muted-2); text-align: center; margin: 18px 0 0; }
.gy-auth-switch { color: var(--g-primary-deep); font-weight: 700; }
@media (max-width: 860px) {
.gy-auth-wrap { grid-template-columns: 1fr; max-width: 520px; }
.gy-auth-aside { display: none; }
.gy-auth-card { padding: 32px 26px 36px; }
}
@media (max-width: 480px) {
.gy-auth { padding: 20px 0 56px; }
.gy-auth-grid { grid-template-columns: 1fr; }
.gy-auth-card { padding: 26px 20px 30px; }
.gy-auth-title { font-size: 20px; }
}
/* 22.1 — tema tüm düğmeleri BÜYÜK HARFe çeviriyor; giriş sayfasında
metinler tasarlandığı gibi kalsın. */
.gy-auth-btn, .gy-auth .btn { text-transform: none !important; letter-spacing: -0.01em; }
/* -------------------------------------------------------------------------
23) ANA SAYFA KAHRAMAN ALANI (SLAYT) (23.09.2026)
Slayt tam genişlikteydi: sayfanın 1280px'lik ızgarasıyla hizasızdı ve
1400x475'lik görsel geniş ekranlarda büyütüldüğü için bulanıklaşıyordu.
------------------------------------------------------------------------- */
.gy-hero { padding: 18px 0 8px; }
.gy-hero .swiper-container {
border-radius: var(--g-r-lg);
overflow: hidden;
background: var(--g-surface-2);
box-shadow: var(--g-sh-sm);
}
.gy-hero .swiper-slide {
background: var(--g-surface-2) !important;
min-height: 0 !important;
}
.gy-hero .swiper-slide img {
display: block;
width: 100%; height: auto;
border-radius: 0;
}
.gy-hero .swiper-pagination { bottom: 14px !important; }
.gy-hero .swiper-button-next,
.gy-hero .swiper-button-prev {
width: 42px; height: 42px; border-radius: 50%;
background: rgba(255,255,255,.92) !important;
border: 0 !important;
color: var(--g-ink) !important;
box-shadow: var(--g-sh-sm);
opacity: 0; transition: opacity var(--g-t), background-color var(--g-t);
}
.gy-hero:hover .swiper-button-next,
.gy-hero:hover .swiper-button-prev { opacity: 1; }
.gy-hero .swiper-button-next:hover,
.gy-hero .swiper-button-prev:hover {
background: var(--g-primary) !important;
color: #fff !important;
}
@media (hover: none) {
.gy-hero .swiper-button-next,
.gy-hero .swiper-button-prev { opacity: 1; }
}
@media (max-width: 767px) {
.gy-hero { padding: 10px 0 4px; }
.gy-hero .swiper-container { border-radius: var(--g-r); }
}
/* 23.1 — noktalar açık renkli görsellerin üstünde kayboluyordu; koyu bir
hap zemin üzerine alındı. */
.gy-hero .swiper-pagination {
display: inline-flex; align-items: center; gap: 6px;
left: 50%; transform: translateX(-50%);
width: auto !important;
padding: 7px 12px;
border-radius: 999px;
background: rgba(13,23,19,.38);
backdrop-filter: blur(6px);
}
.gy-hero .swiper-pagination .swiper-pagination-bullet {
margin: 0 !important;
background-color: rgba(255,255,255,.55) !important;
border-color: transparent !important;
}
.gy-hero .swiper-pagination .swiper-pagination-bullet-active {
background-color: #fff !important;
border-color: #fff !important;
width: 20px !important;
}
/* -------------------------------------------------------------------------
24) İLETİŞİM SAYFASI (23.09.2026)
------------------------------------------------------------------------- */
.gy-contact { padding-top: 34px !important; }
.gy-contact .content-title-section { margin-bottom: 34px !important; }
.gy-contact .title { font-size: 28px; letter-spacing: -0.03em; }
.gy-contact .content-title-section p { color: var(--g-muted-2); font-size: 14.5px; line-height: 1.7; }
.gy-contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 16px;
}
.gy-contact-card {
display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
padding: 24px;
border: 1px solid var(--g-line);
border-radius: var(--g-r);
background: var(--g-surface);
text-decoration: none;
transition: border-color var(--g-t), transform var(--g-t), box-shadow var(--g-t);
}
a.gy-contact-card:hover {
border-color: rgba(var(--g-primary-rgb), .45);
transform: translateY(-2px);
box-shadow: var(--g-sh);
}
.gy-contact-ico {
width: 44px; height: 44px; margin-bottom: 10px;
display: flex; align-items: center; justify-content: center;
border-radius: 13px;
background: var(--g-primary-soft);
color: var(--g-primary-deep);
font-size: 20px;
}
.gy-contact-t { font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--g-muted-2); }
.gy-contact-v { font-size: 14.5px; font-weight: 600; color: var(--g-ink); line-height: 1.55; }
.gy-contact .divider { border-color: var(--g-line); }
/* -------------------------------------------------------------------------
25) ORTAK İÇ SAYFA BAŞLIĞI (23.09.2026)
------------------------------------------------------------------------- */
.gy-page-head {
padding: 4px 0 20px;
border-bottom: 1px solid var(--g-line);
margin-bottom: 28px;
}
.gy-page-head-split {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 20px; flex-wrap: wrap;
}
.gy-page-head h1 {
font-size: 28px; font-weight: 800; letter-spacing: -0.035em;
margin: 0; line-height: 1.2; color: var(--g-ink);
}
.gy-page-head p {
font-size: 14px; color: var(--g-muted-2);
margin: 8px 0 0; line-height: 1.6; max-width: 640px;
}
@media (max-width: 575px) {
.gy-page-head { padding-bottom: 16px; margin-bottom: 22px; }
.gy-page-head h1 { font-size: 22px; }
}
/* -------------------------------------------------------------------------
26) BLOG KARTLARI (23.09.2026)
Başlık ve kategori doğrudan fotoğrafın üstüne basılıyordu; açık renkli
görsellerde beyaz yazı hiç okunmuyordu.
------------------------------------------------------------------------- */
.post.post-mask {
border-radius: var(--g-r) !important;
overflow: hidden;
position: relative;
background: var(--g-ink);
margin-bottom: 24px;
}
.post.post-mask .post-media { margin: 0; border-radius: 0 !important; }
.post.post-mask .post-media img {
width: 100%; height: 230px; object-fit: cover; display: block;
transition: transform 600ms cubic-bezier(.2,.7,.3,1);
}
.post.post-mask:hover .post-media img { transform: scale(1.06); }
.post.post-mask::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to top, rgba(6,14,11,.86) 0%, rgba(6,14,11,.42) 42%, rgba(6,14,11,0) 74%);
}
.post.post-mask .post-details {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
padding: 20px 20px 18px;
}
.post.post-mask .post-cats a {
display: inline-block;
font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
color: #fff !important;
background: rgba(255,255,255,.18);
border: 1px solid rgba(255,255,255,.28);
padding: 4px 10px; border-radius: 999px;
margin-bottom: 10px;
backdrop-filter: blur(4px);
}
.post.post-mask .post-title {
font-size: 16px !important; font-weight: 700 !important;
line-height: 1.4 !important; margin: 0 !important;
letter-spacing: -0.015em;
}
.post.post-mask .post-title a { color: #fff !important; }
.post.post-mask .post-title a:hover { color: #fff !important; text-decoration: underline; }
.post.post-mask .post-meta { margin-top: 10px; }
.post.post-mask .post-meta .post-author {
font-size: 12.5px; font-weight: 700;
color: rgba(255,255,255,.85) !important;
display: inline-flex; align-items: center; gap: 5px;
}
.post.post-mask .post-meta .post-author::after { content: "→"; font-size: 13px; }
.post.post-mask .post-meta .post-author:hover { color: #fff !important; }
@media (max-width: 575px) {
.post.post-mask .post-media img { height: 200px; }
}
/* 26.1 — başlıklar 1-2 satır arasında değiştiği için kartların alt hizası
kayıyordu; iki satıra sabitlendi. */
.post.post-mask .post-title a {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.post.post-mask .post-title { min-height: 2.8em; }
/* -------------------------------------------------------------------------
27) METİN İÇERİĞİ (sözleşmeler, makaleler, ürün açıklaması)
Yönetim panelinden gelen HTML'de başlık boyutları sayfa başlığıyla
yarışıyor, listeler ve tablolar biçimsiz kalıyordu.
------------------------------------------------------------------------- */
.post-content,
.gy-rte,
#product-tab-description .col-12 {
font-size: 14.5px;
line-height: 1.8;
color: var(--g-text);
max-width: 78ch;
}
.post-content h1, .gy-rte h1, #product-tab-description h1 { font-size: 22px; }
.post-content h2, .gy-rte h2, #product-tab-description h2 { font-size: 19px; }
.post-content h3, .gy-rte h3, #product-tab-description h3 { font-size: 17px; }
.post-content h4, .post-content h5, .post-content h6,
.gy-rte h4, .gy-rte h5, .gy-rte h6 { font-size: 15px; }
.post-content h1, .post-content h2, .post-content h3,
.post-content h4, .post-content h5, .post-content h6,
.gy-rte h1, .gy-rte h2, .gy-rte h3, .gy-rte h4, .gy-rte h5, .gy-rte h6,
#product-tab-description h1, #product-tab-description h2, #product-tab-description h3 {
font-weight: 800;
letter-spacing: -0.02em;
color: var(--g-ink);
margin: 30px 0 12px;
line-height: 1.35;
}
.post-content > :first-child, .gy-rte > :first-child { margin-top: 0 !important; }
.post-content p, .gy-rte p { margin: 0 0 16px; }
.post-content ul, .post-content ol,
.gy-rte ul, .gy-rte ol { margin: 0 0 18px; padding-left: 20px; }
.post-content li, .gy-rte li { margin-bottom: 8px; padding-left: 4px; }
.post-content ul, .gy-rte ul { list-style: none; padding-left: 4px; }
.post-content ul > li, .gy-rte ul > li { position: relative; padding-left: 20px; }
.post-content ul > li::before, .gy-rte ul > li::before {
content: ""; position: absolute; left: 3px; top: .62em;
width: 6px; height: 6px; border-radius: 50%;
background: var(--g-primary);
}
.post-content a, .gy-rte a { color: var(--g-primary-deep); font-weight: 600; text-decoration: underline; }
.post-content strong, .post-content b, .gy-rte strong { color: var(--g-ink); font-weight: 700; }
.post-content img, .gy-rte img { max-width: 100%; height: auto; border-radius: var(--g-r-sm); margin: 10px 0 20px; }
.post-content table, .gy-rte table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 13.5px; }
.post-content th, .post-content td, .gy-rte th, .gy-rte td {
border: 1px solid var(--g-line); padding: 10px 12px; text-align: left;
}
.post-content th, .gy-rte th { background: var(--g-surface-2); font-weight: 700; }
.post-content blockquote, .gy-rte blockquote {
margin: 0 0 20px; padding: 16px 20px;
border-left: 3px solid var(--g-primary);
background: var(--g-primary-soft);
border-radius: 0 var(--g-r-sm) var(--g-r-sm) 0;
font-size: 14.5px; color: var(--g-text);
}
.post-content hr, .gy-rte hr { border: 0; border-top: 1px solid var(--g-line); margin: 28px 0; }
/* =========================================================================
28) ÜRÜN DETAYI — İNCE İŞÇİLİK (23.09.2026)
========================================================================= */
/* Başlık: büyük harfli uzun adlar iki satıra taşınca aralık çok açılıyordu */
.product-single .product-title {
font-size: 22px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
letter-spacing: -0.02em !important;
margin: 0 0 14px !important;
color: var(--g-ink) !important;
}
/* Künye */
.gy-pd-meta {
display: flex; flex-wrap: wrap; gap: 6px 28px;
margin: 0 0 16px; padding: 0;
}
.gy-pd-meta > div { display: flex; align-items: baseline; gap: 7px; }
.gy-pd-meta dt {
font-size: 12px; font-weight: 700; letter-spacing: .03em;
text-transform: uppercase; color: var(--g-muted-2); margin: 0;
}
.gy-pd-meta dd { font-size: 13.5px; font-weight: 600; color: var(--g-text); margin: 0; }
.gy-pd-meta dd a { color: var(--g-primary-deep); }
.product-single .product-divider { border-color: var(--g-line); margin: 18px 0; }
/* Fiyat */
.product-single .product-price {
font-size: 30px !important;
font-weight: 800 !important;
letter-spacing: -0.035em !important;
color: var(--g-ink) !important;
margin: 0 0 6px !important;
}
.product-single .product-price ins { color: var(--g-ink) !important; }
.product-single .product-price del { font-size: 17px !important; }
/* Özellik listesi */
.product-single .product-short-desc { margin: 14px 0 18px; }
.product-single .list-type-check li {
font-size: 13.5px; line-height: 1.6; color: var(--g-text-2);
margin-bottom: 7px; padding-left: 24px; position: relative;
}
.product-single .list-type-check li::before {
content: ""; position: absolute; left: 2px; top: .34em;
width: 15px; height: 15px; border-radius: 50%;
background: var(--g-primary-soft);
}
.product-single .list-type-check li::after {
content: ""; position: absolute; left: 6px; top: .62em;
width: 6px; height: 3px;
border-left: 1.6px solid var(--g-primary-deep);
border-bottom: 1.6px solid var(--g-primary-deep);
transform: rotate(-45deg);
}
.product-single .list-type-check li b { color: var(--g-ink); font-weight: 700; }
/* Güven satırı */
.gy-pd-trust {
list-style: none; margin: 18px 0 0; padding: 16px 0 0;
border-top: 1px solid var(--g-line-soft, #eef2f0);
display: flex; flex-direction: column; gap: 10px;
}
.gy-pd-trust li {
display: flex; align-items: center; gap: 10px;
font-size: 13px; color: var(--g-muted-2);
}
.gy-pd-trust li b { color: var(--g-ink); font-weight: 700; }
.gy-pd-trust svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--g-primary-deep); }
.gy-pd-note { font-size: 11.5px; color: #8b9a94; margin: 14px 0 0; line-height: 1.55; }
/* Sekmeler */
.product-tabs .nav-tabs {
border-bottom: 1px solid var(--g-line) !important;
gap: 30px; margin-bottom: 0 !important;
}
.product-tabs .nav-tabs .nav-item { margin: 0 !important; }
.product-tabs .nav-link {
padding: 0 0 14px !important;
font-size: 15px !important; font-weight: 700 !important;
color: var(--g-muted-2) !important;
text-transform: none !important;
border: 0 !important;
}
.product-tabs .nav-link.active { color: var(--g-ink) !important; }
.product-tabs .tab-content {
border: 0 !important;
background: transparent !important;
padding: 26px 0 0 !important;
}
.product-tabs .tab-pane { padding: 0 !important; }
/* Ana ürün bloğu ve sekmeler arasındaki ritim */
.product-single { margin-bottom: 8px !important; }
.related-product-section { margin-top: 44px !important; }
.related-product-section .title-link-wrapper { margin-bottom: 20px !important; }
/* Kenar çubuğu kaydırma okları başlığın üstüne binmişti */
.sidebar .widget-products .swiper-button-next,
.sidebar .widget-products .swiper-button-prev { display: none !important; }
/* 28.1 — tema `.product-short-desc`i yüzdürüyor (float); güven satırı yanına
yapışıp özellik listesinin üstüne biniyordu. */
.product-single .product-short-desc,
.gy-pd-trust,
.gy-pd-note,
.product-single .product-price,
.gy-pd-meta { float: none !important; width: 100% !important; clear: both; }
.gy-pd-trust { display: flex !important; }
/* 28.2 — `.product-bm-wrapper` esnek (flex) bir kap; içindeki
ayraçlar
genişliği 0'a düşüp hiç görünmüyordu. */
.product-bm-wrapper { flex-wrap: wrap; }
.product-bm-wrapper > .product-divider {
flex: 0 0 100%; width: 100% !important;
border: 0; border-top: 1px solid var(--g-line);
margin: 16px 0 !important;
}
/* -------------------------------------------------------------------------
29) SAYFALAMA (23.09.2026)
------------------------------------------------------------------------- */
.gy-pagination {
display: flex; align-items: center; justify-content: center;
gap: 6px; flex-wrap: wrap;
margin: 36px 0 8px;
}
.gy-pg {
min-width: 40px; height: 40px; padding: 0 12px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--g-line);
border-radius: 10px;
background: var(--g-surface);
color: var(--g-text) !important;
font-size: 14px; font-weight: 700;
text-decoration: none;
transition: border-color var(--g-t), background-color var(--g-t), color var(--g-t);
}
.gy-pg:hover {
border-color: rgba(var(--g-primary-rgb), .5);
background: var(--g-primary-soft);
color: var(--g-primary-dark) !important;
}
.gy-pg-cur {
background: var(--g-primary) !important;
border-color: var(--g-primary) !important;
color: #fff !important;
cursor: default;
}
.gy-pg-off { opacity: .4; cursor: default; pointer-events: none; }
.gy-pg-gap { color: var(--g-muted-2); padding: 0 4px; font-weight: 700; }
.gy-pg-info { color: var(--g-muted-2); font-weight: 500; }
/* -------------------------------------------------------------------------
30) ÜRÜN KARTI — SON RÖTUŞLAR (23.09.2026)
------------------------------------------------------------------------- */
/* Hızlı sepet düğmesi HER ZAMAN görünür kalıyor: bir alışveriş sitesinde
"sepete ekle"yi fareyle üzerine gelmeye saklamak satışı zorlaştırır ve
dokunmatik cihazda zaten hover diye bir şey yoktur. Bunun yerine düğme
sakinleştirildi, üzerine gelince öne çıkıyor. */
.product:not(.product-single) .product-action-horizontal {
transition: transform 220ms cubic-bezier(.2,.7,.3,1), box-shadow var(--g-t);
}
.product:not(.product-single) .btn-product-icon {
box-shadow: 0 6px 16px -8px rgba(13,23,19,.5);
}
.product:not(.product-single):hover .product-action-horizontal {
transform: translateY(-2px) !important;
}
/* Stoğu bitmiş üründe sepete ekleme düğmesi gösterilmemeli. */
.product:has(.no-stock) .product-action-horizontal,
.product:has(.badge.no-stock) .product-action-horizontal { display: none !important; }
/* "Tükendi" rozeti marka diline uyarlandı (satır içi kırmızı kutu idi). */
.product .badge.no-stock {
background: rgba(13,23,19,.78) !important;
color: #fff !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: .03em;
padding: 5px 11px !important;
border-radius: 999px !important;
backdrop-filter: blur(4px);
}
/* Değerlendirme satırı: hiç yorum yokken görsel gürültü yapıyordu. */
.product:not(.product-single) .ratings-container { margin: 2px 0 6px !important; }
.product:not(.product-single) .rating-reviews { font-size: 11px !important; color: #93a39d !important; }
/* Kart iç boşluk ritmi */
.product:not(.product-single) .product-details { padding: 0 14px 16px !important; }
.product:not(.product-single) .product-cat { margin-bottom: 2px !important; }
/* 30.1 — düğme her koşulda görünür olsun (tema bazı kırılımlarda gizliyordu). */
.product:not(.product-single) .product-action-horizontal { opacity: 1 !important; }
/* 29.1 — telefonda sıralama kutusu ve ürün sayısı iki ayrı satıra düşüp
aralarında büyük boşluk bırakıyordu. */
@media (max-width: 767px) {
.toolbox.sticky-toolbox { flex-wrap: wrap; gap: 10px; padding: 0 0 14px !important; }
.toolbox .toolbox-left { flex: 1 1 auto; min-width: 0; }
.toolbox .toolbox-item.toolbox-sort { width: 100%; }
.toolbox .toolbox-item.toolbox-sort label { display: none; }
.toolbox select { width: 100% !important; max-width: none !important; }
.toolbox .total-count, .toolbox-right { font-size: 12.5px; color: var(--g-muted-2); }
.toolbox .toolbox-layout { display: none; }
}
/* -------------------------------------------------------------------------
31) ÖDEME HATASI EKRANI (23.09.2026)
------------------------------------------------------------------------- */
.gy-payerr { max-width: 520px; margin: 70px auto 96px; text-align: center; }
.gy-payerr-ico {
width: 74px; height: 74px; margin: 0 auto 22px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%; background: #fff5e3; color: #8a5a00;
}
.gy-payerr-ico svg { width: 34px; height: 34px; }
.gy-payerr h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 12px; }
.gy-payerr p { font-size: 14.5px; line-height: 1.7; color: var(--g-muted-2); margin: 0 0 26px; }
.gy-payerr-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.gy-payerr-help { font-size: 13px; margin: 26px 0 0 !important; }
.gy-payerr-help a { color: var(--g-primary-deep); font-weight: 700; }
/* 18.4.1 — adım göstergesinde "tamamlandı" ve "şu an buradasınız" ayrımı
(23.09.2026: üç adım da aynı görünüyordu). */
.breadcrumb.shop-breadcrumb li.done {
background: var(--g-surface) !important;
border-color: var(--g-line) !important;
color: var(--g-primary-deep) !important;
}
.breadcrumb.shop-breadcrumb li.done a { color: var(--g-primary-deep) !important; }
.breadcrumb.shop-breadcrumb li.done::before {
content: "✓";
margin-right: 6px;
font-weight: 800;
color: var(--g-primary);
}
.breadcrumb.shop-breadcrumb li.active {
background: var(--g-primary) !important;
border-color: var(--g-primary) !important;
color: #fff !important;
box-shadow: 0 8px 18px -12px rgba(var(--g-primary-rgb), .9);
}
.breadcrumb.shop-breadcrumb li.active a { color: #fff !important; }
.breadcrumb.shop-breadcrumb li:not(.active):not(.done) { opacity: .72; }