/*
Theme Name: ÇiçekEvi
Theme URI: https://cicekci.test
Author: ÇiçekEvi
Author URI: https://cicekci.test
Description: Çiçekçi dükkanı için çiçeksepeti.com görünümünde özel WooCommerce teması.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cicekevi
Tags: e-commerce, woocommerce
*/
/* =========================================================
ÖLÇÜ EŞLEŞTİRİLMİŞ YEDEK FONT (EMNİYET AĞI)
Poppins artık TEMADAN sunulup preload edildiği için normalde swap hiç
yaşanmaz (bkz. cicekevi_font_preload). Bu tanım yalnız font dosyaları
herhangi bir sebeple gelmezse devreye girer.
Poppins yedeklerden geniş olduğu için ölçü eşleştirmesi olmadan geçiş
anında header yeniden akıyordu (ölçüldü: arama 509→473, Hesabım
211→227, Sepetim 128→134 px; toplam ~59 px).
Çözüm: yedek font, Poppins'in ölçülerine ayarlanmış bir @font-face ile
yerel Arial'dan türetilir. size-adjust genişlik farkını (Poppins/Arial
= 1.066; gerçek DOM ölçümü) kapatır;
ascent/descent/line-gap Poppins'in metriklerine
(1050/350/100, unitsPerEm 1000) eşitlenir — size-adjust ölçeklemesi
sonrası doğru çıksın diye orana bölünmüş değerler yazılır.
Yerel Arial bulunmayan sistemde bu tanım devre dışı kalır ve yığındaki
sonraki font kullanılır — davranış eskisi gibi olur, kırılma yok.
========================================================= */
@font-face {
font-family: "Poppins Fallback";
src: local("Arial");
size-adjust: 106.6%;
ascent-override: 98.5%;
descent-override: 32.83%;
line-gap-override: 9.38%;
}
:root {
/* Site genelinde tek ortak içerik genişliği — buradan değiştirilir. */
--ce-container-width: 1500px;
--ce-container-pad: 18px;
--ce-green: #12a150;
--ce-green-dark: #0d7d3e;
--ce-green-light: #e7f6ee;
/* Header üst şeridi ve "Tüm Kategoriler" butonu. Bu üç değer YALNIZ
yedektir: çalışma anında ÇiçekEvi > Genel > Marka Rengi'nden
türetilip ezilir (cicekevi_brand_color_css). */
--ce-green-deep: #0f6135;
--ce-green-chip: #2f8f57;
--ce-text: #2d2d2d;
--ce-muted: #757575;
--ce-border: #e5e5e5;
--ce-bg: #ffffff;
--ce-bg-soft: #f7f7f7;
--ce-star: #f4af11;
--ce-danger: #e0234e;
--ce-radius: 8px;
--ce-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
/* "Poppins Fallback": ölçüsü Poppins'e eşitlenmiş yerel yedek (yukarıda) —
font yüklenirken metin genişlikleri değişmez, düzen zıplamaz. */
--ce-font: "Poppins", "Poppins Fallback", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* ---------- Reset / base ---------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* DİKEY KAYDIRMA ÇUBUĞU YERİ BAŞTAN AYRILIR.
Sayfa ilk boyandığında gövde henüz kısa olabiliyor; çubuk yokken görüntü
alanı 1400px, içerik gelip sayfa uzayınca çubuk çıkıyor ve alan 1385px'e
düşüyordu. Bu 15px'lik daralma header'ın SAĞA yaslı her öğesini bir anda
kaydırıyor, arama kutusunu daraltıyordu (kare kare ölçüldü: sepet kartı
1248→1233, arama 488→473). Gutter baştan ayrılınca genişlik ilk kareden
itibaren nihai değerinde olur, kayma olmaz.
Üstü kaplayan (overlay) çubuk kullanan cihazlarda gutter 0'dır — mobil
görünüm etkilenmez. */
html {
scrollbar-gutter: stable;
}
/* Mobil dokunma vurgusu: dokununca çıkan mavi/gri flash tüm sitede kapalı
(öğelerin kendi hover/aktif/seçili stilleri etkilenmez) */
* {
-webkit-tap-highlight-color: transparent;
}
/* Dokunma/fare odağında mavi outline görünmesin; KLAVYE ile gezinen
kullanıcı için :focus-visible ince yeşil odak göstergesi kalır
(erişilebilirlik korunur) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
outline: none;
}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
outline: 2px solid var(--ce-green);
outline-offset: 2px;
}
body {
margin: 0;
font-family: var(--ce-font);
font-size: 14.5px;
line-height: 1.6;
color: var(--ce-text);
background: var(--ce-bg);
}
/* Tüm form öğeleri ve başlıklar site fontunu kullanır */
input,
select,
textarea,
button {
font-family: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--ce-font);
font-weight: 700;
}
img {
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
a:hover {
color: var(--ce-green);
}
button {
font-family: inherit;
cursor: pointer;
}
.ce-container {
max-width: var(--ce-container-width);
margin: 0 auto;
padding: 0 var(--ce-container-pad);
}
[hidden] {
display: none !important;
}
/* ============================================================
MOBİL BOŞLUK STANDARDI (≤768px): tek değer --ce-gap yönetir.
Yan boşluk, bölümler arası dikey boşluk ve öğeler arası yatay
boşluk hep bu değerden türer. Değiştirmek için sadece --ce-gap.
(Kategori daireleri aralığı bilinçli olarak hariç.)
============================================================ */
@media (max-width: 768px) {
:root {
--ce-gap: 10px;
--ce-container-pad: var(--ce-gap);
}
/* Yan boşluk: tüm sayfalardaki ortak konteynır */
.ce-container {
padding-left: var(--ce-container-pad) !important;
padding-right: var(--ce-container-pad) !important;
}
/* Öğeler arası YATAY boşluklar */
.ce-bannergrid {
gap: var(--ce-gap) !important;
}
.ce-shelf__track {
--ce-card-gap: var(--ce-gap);
}
.ce-product {
gap: var(--ce-gap);
}
/* WooCommerce arşiv/kategori kartları: 2 sütun, 10px aralık */
.woocommerce ul.products,
.woocommerce-page ul.products {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: var(--ce-gap) !important;
margin: 0 0 var(--ce-gap) !important;
}
/* WooCommerce clearfix pseudo'ları grid hücresi işgal etmesin */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
display: none !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: auto !important;
margin: 0 !important;
float: none !important;
}
/* Bölümlerin DİKEY (üst/alt) boşlukları */
.ce-main {
padding-top: var(--ce-gap);
padding-bottom: calc(var(--ce-gap) * 3);
}
.ce-main--home .elementor-section {
padding-top: var(--ce-gap) !important;
padding-bottom: var(--ce-gap) !important;
}
.ce-footer {
margin-top: var(--ce-gap);
}
.ce-product-extra {
margin-top: calc(var(--ce-gap) * 2);
}
.ce-related {
margin-top: calc(var(--ce-gap) * 2);
}
}
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
word-wrap: normal !important;
}
/* ---------- Üst bar (açık yeşil) ---------- */
.ce-topbar {
background: #ddf2e6;
font-size: 13px;
}
/* Üç bölgeli, ortası SABİT merkezli düzen: sol yazı / orta indirim / sağ
linkler. 1fr-auto-1fr grid'inde yan sütunlar ne kadar genişlerse
genişlesin orta öğe her zaman şeridin gerçek ortasında kalır. */
.ce-topbar__inner {
max-width: var(--ce-container-width);
margin: 0 auto;
padding: 0 var(--ce-container-pad);
min-height: 60px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 16px;
}
/* Sütunlar açıkça atanır: sol öğe yokken bile orta merkezden şaşmaz */
.ce-topbar__script {
grid-column: 1;
justify-self: start;
max-width: 100%;
}
.ce-topbar__promo {
grid-column: 2;
}
.ce-topbar__links {
grid-column: 3;
justify-self: end;
}
/* Sol sekmeler */
.ce-topbar__tabs {
display: flex;
align-items: stretch;
gap: 8px;
align-self: flex-end;
}
.ce-tab {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
padding: 6px 16px;
border-radius: 8px 8px 0 0;
line-height: 1.2;
}
.ce-tab--active {
background: #fff;
}
.ce-tab__name {
color: var(--ce-green);
font-weight: 800;
font-size: 15px;
}
.ce-tab__sub {
color: var(--ce-muted);
font-size: 10px;
white-space: nowrap;
}
.ce-tab--gift {
background: #ffedd9;
color: #f4813f;
font-weight: 800;
font-size: 14px;
border-radius: 8px;
margin: 7px 0;
padding: 6px 16px;
justify-content: center;
}
.ce-tab--gift:hover {
color: #e06a24;
}
/* Orta: indirim metni */
.ce-topbar__promo {
color: #1c5c38;
font-size: 14px;
font-weight: 600;
text-align: center;
white-space: nowrap;
}
.ce-topbar__promo strong {
font-weight: 800;
}
.ce-topbar__code {
display: inline-block;
background: #c2e6d2;
color: #14532d;
font-weight: 800;
font-size: 12.5px;
border-radius: 12px;
padding: 3px 10px;
margin-left: 8px;
}
/* Sağ linkler */
.ce-topbar__links {
display: flex;
align-items: center;
gap: 22px;
white-space: nowrap;
}
.ce-topbar__links a {
color: #33413a;
font-size: 13px;
}
.ce-topbar__links a:hover {
color: var(--ce-green);
}
/* Sosyal ikonlar: marka yeşili, hover'da koyulaşır; İletişim ile aralarında
grubun 22px'lik dış boşluğu var (ikonlar arası 12px) */
.ce-topbar__social {
display: flex;
align-items: center;
gap: 12px;
}
.ce-topbar__social a {
display: flex;
align-items: center;
color: var(--ce-green);
transition: color 0.15s;
}
.ce-topbar__social a:hover {
color: var(--ce-green-dark);
}
.ce-topbar__social svg {
width: 16px;
height: 16px;
fill: currentColor;
display: block;
}
/* ---------- Main header ---------- */
.ce-header {
background: #fff;
border-bottom: 1px solid var(--ce-border);
}
.ce-header__inner {
display: flex;
align-items: center;
gap: 24px;
padding: 14px var(--ce-container-pad);
max-width: var(--ce-container-width);
margin: 0 auto;
}
.ce-logo {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 8px;
font-size: 26px;
font-weight: 800;
color: var(--ce-green);
line-height: 1;
}
.ce-logo:hover {
color: var(--ce-green-dark);
}
.ce-logo svg {
width: 30px;
height: 30px;
fill: var(--ce-green);
}
.ce-logo .custom-logo {
max-height: 44px;
width: auto;
}
/* Arama: geniş, hafif yuvarlak köşeli, sağda yeşil kare buton */
.ce-search {
flex: 1;
min-width: 0;
max-width: 640px;
margin: 0 auto;
}
.ce-search form {
display: flex;
position: relative;
}
.ce-search input[type="search"] {
width: 100%;
border: 1px solid #cfcfcf;
border-radius: 8px;
padding: 12px 60px 12px 16px;
font-size: 14px;
outline: none;
color: var(--ce-text);
}
.ce-search input[type="search"]:focus {
border-color: var(--ce-green);
}
.ce-search button {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 50px;
border: 0;
border-radius: 0 8px 8px 0;
background: var(--ce-green);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.ce-search button:hover {
background: var(--ce-green-dark);
}
.ce-search button svg {
width: 20px;
height: 20px;
fill: #fff;
}
/* Sağ aksiyonlar: ikon + yazı yan yana, sonda yeşil sepet butonu */
.ce-actions {
display: flex;
align-items: center;
gap: 24px;
flex-shrink: 0;
}
.ce-action {
display: flex;
align-items: center;
gap: 7px;
font-size: 14px;
font-weight: 500;
color: var(--ce-text);
}
.ce-action svg {
width: 22px;
height: 22px;
fill: none;
stroke: var(--ce-text);
stroke-width: 1.7;
flex-shrink: 0;
}
.ce-action__caret {
width: 14px !important;
height: 14px !important;
margin-left: -2px;
}
.ce-action:hover {
color: var(--ce-green);
}
.ce-action:hover svg {
stroke: var(--ce-green);
}
.ce-cart-btn {
position: relative;
width: 48px;
height: 48px;
background: var(--ce-green);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
}
.ce-cart-btn:hover {
background: var(--ce-green-dark);
}
.ce-cart-btn svg {
width: 24px;
height: 24px;
fill: none;
stroke: #fff;
stroke-width: 1.8;
}
/* Adet rozeti — TEK tanım (masaüstü + mobil aynı). Çanta ikonunun SAĞ ÜST
dış köşesine oturur; çapa ikon sarmalayıcısıdır (.ce-cart-btn__ico,
position: relative — aşağıda, medya sorgusu DIŞINDA), buton değil.
box-sizing: border-box ZORUNLU: content-box + border ile kutu, verilen
height/min-width'in ÜSTÜNE çerçeve ve dolgu ekleyip şişiyordu (26px ikonun
üstünde 34x24'lük rozet → ikon gövdesinin ortasını kapatıyordu). Ayırıcı
beyaz halka artık border yerine box-shadow: kutu ölçüsünü DEĞİŞTİRMEZ,
dolayısıyla konum hesabı bozulmaz.
min-width = height → tek hane ve 0'da tam yuvarlak; çift hane (12) dolgu
kadar genişleyip hap biçimini alır, rakam her hâlde ortalı kalır.
Konum ve ölçü DEĞİŞKENDEN gelir: masaüstü değerleri burada, mobil
ayarı (≤900px) tek yerden ezer — kural gövdesi kopyalanmaz. */
.ce-cart-btn {
--ce-badge-size: 18px;
--ce-badge-top: -8px;
--ce-badge-right: -8px;
}
.ce-cart-btn .cart-count {
position: absolute;
top: var(--ce-badge-top);
right: var(--ce-badge-right);
box-sizing: border-box;
min-width: var(--ce-badge-size);
height: var(--ce-badge-size);
padding: 0 5px;
background: var(--ce-sale, #e0234e);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1;
border: 0;
border-radius: 999px;
box-shadow: 0 0 0 2px #fff;
display: flex;
align-items: center;
justify-content: center;
}
/* Rozetin çapası: ikon sarmalayıcı. Mobilde de geçerli olsun diye medya
sorgusunun dışında — aksi hâlde rozet 48px'lik butona göre konumlanıp
ikonun üstüne kayıyordu. */
.ce-cart-btn__ico {
position: relative;
display: flex;
}
/* ---------- Category nav ---------- */
.ce-nav {
/* Menü ritmi TEK KAYNAK: ikon kutusu ve ikon-metin arası boşluk yalnız
bu iki değişkenden gelir. Sığdırma kademeleri (is-smallico) ve dar
ekran ayarları değeri EZER; hiçbir kuralda sabit piksel yazılmaz. */
--ce-nav-ico-size: 19px;
--ce-nav-ico-gap: 7px;
background: #fff;
border-bottom: 1px solid var(--ce-border);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}
/* Üst şerit UL'i (yalnızca doğrudan çocuk — sub-menu UL'leri bu kuralları
ALMAZ). overflow: visible şart: açılır panel şeridin dışına taşar. */
.ce-nav > ul {
list-style: none;
margin: 0 auto;
padding: 0 var(--ce-container-pad);
max-width: var(--ce-container-width);
display: flex;
justify-content: center;
gap: 0;
overflow: visible;
}
.ce-nav li {
flex-shrink: 0;
display: flex;
align-items: center;
}
/* Menü öğesi ikonu (Görünüm > Menüler > öğe > İkon).
SABİT KARE KUTU: hangi ikon seçilirse seçilsin öğe aynı genişlikte
yer kaplar — dar bir SVG (saat) ile geniş bir SVG (yüzde) metni farklı
itmez. SVG kutuyu tamamen doldurur, tüm ikonlar 24x24 viewBox normunda.
İKON-METİN BOŞLUĞU BURADA DEĞİL: aralığı bağlantının kendi `gap`ı verir
(aşağıda). İkonda ayrıca margin olsaydı, alt menüsü olan öğelerde
gap + margin üst üste binip boşluk iki katına çıkardı — kayma buydu.
Ölçü medya sorgusuna bırakılmaz: 901px altındaki dar masaüstü/tablet
penceresinde SVG varsayılan 300x150 boyutuna düşerdi. */
.ce-nav__ico {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--ce-nav-ico-size);
height: var(--ce-nav-ico-size);
}
.ce-nav__ico svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Ayraç çizgiler yalnız üst şeritte */
.ce-nav > ul > li + li::before {
content: "";
width: 1px;
height: 16px;
background: #ececec;
}
.ce-nav a {
display: block;
padding: 11px 18px;
font-size: 14.5px;
font-weight: 500;
color: var(--ce-text);
white-space: nowrap;
}
/* Üst şerit bağlantısı: ikonlu da ikonsuz da AYNI kutu ve aynı ritim.
Dolgu tüm öğelerde eşittir (yukarıdaki .ce-nav a) — ikon eklemek öğenin
DIŞ boşluğunu değiştirmez, yalnız içeride tek bir gap açar. Alt menüsü
olan öğelerde ok da aynı gap'i kullanır (tek değer, tek yer). */
.ce-nav > ul > li > a,
.ce-nav > .ce-nav-sale--pinned > a {
display: flex;
align-items: center;
gap: var(--ce-nav-ico-gap);
}
.ce-nav a:hover,
.ce-nav .current-menu-item > a {
/* Alt nav vurgusu da birincil aileden (buton hover'ıyla tutarlı). */
color: var(--ce-primary, #12a150);
}
/* ---------- Açılır alt menü (masaüstü; mobilde .ce-nav zaten gizli) ---------- */
.ce-nav li.menu-item-has-children {
position: relative;
}
.ce-nav .sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 500;
min-width: 230px;
margin: 0;
padding: 8px 0;
list-style: none;
background: #fff;
border: 1px solid var(--ce-border);
border-radius: 0 0 10px 10px;
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.1);
}
/* Hover VE tıklamayla (is-open) açılır */
.ce-nav li:hover > .sub-menu,
.ce-nav li:focus-within > .sub-menu {
display: block;
}
.ce-nav .sub-menu li {
display: block;
position: relative;
}
.ce-nav .sub-menu li::before {
display: none;
}
.ce-nav .sub-menu a {
display: block;
padding: 9px 18px;
font-size: 13.5px;
color: var(--ce-text);
}
.ce-nav .sub-menu a:hover {
color: var(--ce-green);
background: #f2faf6;
}
/* Torun seviyesi (ileride): sağa doğru açılır */
.ce-nav .sub-menu .sub-menu {
top: -9px;
left: 100%;
border-radius: 10px;
}
/* ---------- Kategori / ürün arşivi sayfası ---------- */
.ce-archive .woocommerce-breadcrumb {
font-size: 13px;
color: var(--ce-muted);
margin: 0 0 14px;
}
.ce-archive .woocommerce-breadcrumb a {
color: var(--ce-muted);
}
.ce-archive .woocommerce-breadcrumb a:hover {
color: var(--ce-green);
}
.ce-archive__head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px 16px;
margin-bottom: 6px;
}
.ce-archive__title {
font-size: 24px;
font-weight: 800;
color: var(--ce-text);
margin: 0;
}
.ce-archive .woocommerce-ordering {
margin: 0;
}
.ce-archive .woocommerce-ordering select {
border: 1px solid var(--ce-border);
border-radius: 8px;
padding: 9px 12px;
font-family: inherit;
font-size: 13.5px;
color: var(--ce-text);
background: #fff;
outline: none;
cursor: pointer;
}
.ce-archive .woocommerce-ordering select:focus {
border-color: var(--ce-green);
}
.ce-archive__desc {
font-size: 14px;
color: var(--ce-muted);
line-height: 1.6;
margin: 0 0 6px;
}
/* --- Arşiv üst bölgesi: konum çubuğu + güven rozetleri --- */
.ce-arctop {
display: flex;
/* Konum paneli ile rozet paneli birbirine göre dikeyde ortalı */
align-items: center;
gap: 14px;
margin: 10px 0 18px;
}
.ce-arctop__loc {
flex: 1;
min-width: 0;
display: flex;
/* Bayrak etiketi + konum çubuğu panelin içinde dikeyde ortalı */
align-items: center;
gap: 0;
background: #fbf7f0;
border: 1px solid #f3e8d8;
border-radius: 12px;
padding: 12px;
}
/* "BURADAN BAŞLAYIN" bayrak etiketi (sağa ok biçimli) */
.ce-arctop__flag {
flex-shrink: 0;
display: flex;
align-items: center;
background: var(--ce-green);
color: #fff;
font-size: 12px;
font-weight: 800;
line-height: 1.25;
padding: 8px 20px 8px 12px;
max-width: 110px;
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
border-radius: 8px 0 0 8px;
margin-right: 8px;
}
.ce-arctop__locwidget {
flex: 1;
min-width: 0;
justify-content: center;
}
/* Adres seçiliyken .ce-locwrap içi boşalır (kutu/panel/sheet gizli) ama
sütun flex'in 12px gap'i ölü alan bırakıp yeşil çubuğu aşağı itiyordu.
Boş sarmalayıcı akıştan çıkarılır. Yalnız masaüstü: mobilde çubuk gizli,
görünen öğe .ce-locwrap içindeki sheet düğmesidir. */
@media (min-width: 769px) {
.ce-arctop__locwidget:has(> .ce-locbar:not([hidden])) > .ce-locwrap {
display: none;
}
}
/* Güven rozetleri kutusu (krem zemin) */
.ce-arctop__badges {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 22px;
background: #fbf7f0;
border: 1px solid #f3e8d8;
border-radius: 12px;
padding: 12px 22px;
}
.ce-arctop__badge {
display: flex;
align-items: center;
gap: 9px;
font-size: 12.5px;
font-weight: 600;
color: var(--ce-text);
line-height: 1.3;
max-width: 150px;
}
.ce-arctop__badge-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
}
.ce-arctop__badge-icon svg {
width: 20px;
height: 20px;
stroke: #e8833a;
stroke-width: 1.7;
fill: none;
}
/* Teslimat bölgesi uyarı şeridi: konum kartının DIŞINDA, üst bölüm ile
filtre satırı arasında. Boşken hiç yer kaplamaz. */
.ce-arctop__notice:empty {
display: none;
}
.ce-arctop__notice {
margin: 0 0 16px;
}
/* Kutu kendi üst boşluğunu şeritten alır (kart içindeyken 10px'ti). */
.ce-arctop__notice .ce-validate-msg,
.ce-arctop__notice .ce-zonefee {
margin-top: 0;
}
.ce-arctop__cats {
margin: 0 0 14px;
}
/* --- Filtre çubuğu --- */
.ce-filterbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin: 0 0 30px;
}
.ce-filterbar__chips {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
}
.ce-filterbar__chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: #fff;
border: 1px solid var(--ce-border);
border-radius: 999px;
padding: 9px 14px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
color: var(--ce-text);
cursor: pointer;
white-space: nowrap;
transition: border-color 0.15s, color 0.15s;
}
.ce-filterbar__chip:hover {
border-color: var(--ce-green);
color: var(--ce-green);
}
.ce-filterbar__chip svg {
width: 14px;
height: 14px;
stroke: currentColor;
stroke-width: 1.8;
fill: none;
flex-shrink: 0;
}
.ce-filterbar__chip--accent {
color: var(--ce-green);
border-color: #cdebdb;
}
@media (max-width: 900px) {
/* Rozetler dar ekranda gizlenir; konum tam genişlik */
.ce-arctop__badges {
display: none;
}
}
@media (max-width: 768px) {
.ce-arctop {
margin: 6px 0 12px;
}
.ce-arctop__loc {
padding: 8px;
}
.ce-arctop__flag {
font-size: 10.5px;
padding: 6px 16px 6px 10px;
max-width: 92px;
}
/* Filtre çubuğu: yatay kaydırılabilir tek satır */
.ce-filterbar {
flex-wrap: wrap;
}
.ce-filterbar__chips {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
max-width: 100%;
padding-bottom: 2px;
}
.ce-filterbar__chips::-webkit-scrollbar {
display: none;
}
}
/* --- İşlevsel filtre çubuğu: dropdown, seçili çipler, çekmece --- */
.ce-flt {
position: relative;
}
.ce-flt__btn.is-active,
.ce-flt-flag.is-active {
border-color: var(--ce-green);
color: var(--ce-green);
background: #eefaf3;
}
.ce-flt__badge {
min-width: 18px;
height: 18px;
border-radius: 999px;
background: var(--ce-green);
color: #fff;
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 5px;
}
.ce-flt__panel {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 60;
min-width: 230px;
max-height: 320px;
overflow: auto;
background: #fff;
border: 1px solid var(--ce-border);
border-radius: 12px;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.13);
padding: 8px;
display: none;
}
.ce-flt.is-open .ce-flt__panel {
display: block;
}
/* Fiyat filtresi: En az / En fazla + Uygula (çubuk paneli, çekmece ve mobil
panelde aynı bileşen) */
.ce-flt__panel--price {
min-width: 268px;
overflow: visible;
}
.ce-fltprice {
padding: 4px 2px 2px;
}
.ce-fltprice__row {
display: flex;
align-items: center;
gap: 8px;
}
.ce-fltprice__input {
flex: 1 1 0;
min-width: 0;
width: 100%;
box-sizing: border-box;
border: 1px solid #dcdfe3;
border-radius: 9px;
padding: 10px 11px;
font: 400 13.5px/1.3 var(--ce-font);
color: var(--ce-text);
background: #fff;
-moz-appearance: textfield;
}
.ce-fltprice__input::-webkit-outer-spin-button,
.ce-fltprice__input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.ce-fltprice__input::placeholder {
color: #9aa0a6;
}
.ce-fltprice__input:focus {
outline: none;
border-color: var(--ce-green);
}
.ce-fltprice__sep {
flex: 0 0 auto;
color: var(--ce-muted);
font-size: 14px;
}
.ce-fltprice__foot {
display: flex;
justify-content: flex-end;
margin-top: 12px;
}
.ce-fltprice__apply {
border: 0;
border-radius: 9px;
background: var(--ce-green);
color: #fff;
font: 600 13px/1.2 var(--ce-font);
padding: 10px 20px;
transition: background 0.15s ease;
}
.ce-fltprice__apply:hover {
background: var(--ce-green-dark);
}
/* Mobil panelde form gövde iç boşluğuyla hizalanır */
.ce-mfp__group--price .ce-fltprice {
padding: 14px;
}
.ce-mfp__search[hidden] {
display: none;
}
.ce-flt__opt {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 9px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
}
.ce-flt__opt:hover {
background: #f4faf6;
}
.ce-flt__opt input {
accent-color: var(--ce-green);
width: 15px;
height: 15px;
margin: 0;
flex-shrink: 0;
}
.ce-flt__opt-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.ce-flt__count {
margin-left: auto;
color: #9aa0a6;
font-size: 11px;
font-weight: 600;
}
/* Seçili filtre çipleri */
.ce-flt-selected {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: -16px 0 30px; /* çubuğun 30px alt boşluğunun içinde, banner'lardan önce */
}
.ce-flt-selected[hidden] {
display: none;
}
.ce-flt-selected__chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--ce-green);
color: #fff;
border-radius: 999px;
padding: 6px 12px;
font-size: 12px;
font-weight: 600;
}
.ce-flt-selected__chip:hover {
background: #0e8a45;
color: #fff;
}
.ce-flt-selected__chip svg {
width: 12px;
height: 12px;
stroke: currentColor;
stroke-width: 2;
fill: none;
}
.ce-flt-selected__clear {
font-size: 12px;
font-weight: 700;
color: var(--ce-green);
text-decoration: underline;
}
/* Sonuç bölgesi yüklenirken */
#ce-archive-results.is-loading {
opacity: 0.45;
pointer-events: none;
transition: opacity 0.15s;
}
/* Kategori/arşiv "Daha Fazla Göster": ortalanmış geniş buton — yeşil
çerçeveli, hover'da dolan (tema buton diliyle uyumlu); yüklenirken
ok yerine dönen halka. Numaralı sayfalama kullanılmaz. */
.ce-loadmore {
display: flex;
justify-content: center;
margin: 28px 0 10px;
}
.ce-loadmore__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 320px;
padding: 13px 34px;
font-size: 15px;
font-weight: 700;
color: var(--ce-green);
background: #fff;
border: 1.5px solid var(--ce-green);
border-radius: var(--ce-radius);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
cursor: pointer;
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.ce-loadmore__btn:hover:not(:disabled) {
background: var(--ce-green);
color: #fff;
box-shadow: 0 4px 14px rgba(18, 161, 80, 0.25);
}
.ce-loadmore__btn:disabled {
opacity: 0.7;
cursor: default;
}
.ce-loadmore__btn svg {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
fill: none;
}
.ce-loadmore__btn.is-loading svg {
display: none;
}
.ce-loadmore__btn.is-loading::before {
content: "";
width: 16px;
height: 16px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: ce-lm-spin 0.7s linear infinite;
}
@keyframes ce-lm-spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 768px) {
.ce-loadmore__btn {
width: 100%;
min-width: 0;
}
}
/* Tüm Filtreler çekmecesi */
.ce-flt-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 1200;
opacity: 0;
transition: opacity 0.25s;
}
.ce-flt-overlay.is-open {
opacity: 1;
}
/* Mobil filtre satırı: Filtrele / Sırala / Tasarlanabilir (masaüstünde gizli) */
.ce-fltmob {
display: none;
gap: 8px;
width: 100%;
}
.ce-fltmob__btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background: #fff;
border: 1px solid var(--ce-border);
border-radius: 10px;
padding: 10px 6px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
color: var(--ce-text);
cursor: pointer;
white-space: nowrap;
}
.ce-fltmob__btn svg {
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 1.8;
fill: none;
flex-shrink: 0;
}
.ce-fltmob__btn.is-active {
border-color: var(--ce-green);
color: var(--ce-green);
background: #eefaf3;
}
/* Sırala alt paneli (bottom sheet) */
.ce-sortsheet {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1201;
background: #fff;
border-radius: 16px 16px 0 0;
box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
max-height: 80vh;
transform: translateY(100%);
transition: transform 0.28s ease;
}
.ce-sortsheet.is-open {
transform: translateY(0);
}
.ce-sortsheet__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 18px;
border-bottom: 1px solid var(--ce-border);
font-size: 15px;
}
.ce-sortsheet__close {
background: none;
border: 0;
padding: 6px;
cursor: pointer;
line-height: 0;
}
.ce-sortsheet__close svg {
width: 18px;
height: 18px;
stroke: var(--ce-text);
stroke-width: 2;
fill: none;
}
.ce-sortsheet__body {
flex: 1;
overflow: auto;
padding: 4px 12px;
}
.ce-sortsheet__opt {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 6px;
font-size: 14px;
font-weight: 500;
border-bottom: 1px solid #f3f3f3;
cursor: pointer;
}
.ce-sortsheet__opt:last-child {
border-bottom: 0;
}
.ce-sortsheet__opt input {
accent-color: var(--ce-green);
width: 18px;
height: 18px;
margin: 0;
flex-shrink: 0;
}
.ce-sortsheet__foot {
padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
border-top: 1px solid var(--ce-border);
}
.ce-sortsheet__apply {
width: 100%;
text-align: center;
}
/* Mobil çok ekranlı "Filtrele" paneli */
/* "Tüm Filtreler" paneli — tek bileşen, iki konum:
masaüstünde soldan kayan yan panel, mobilde (≤768px) alttan açılan tam
ekran sheet. İç düzen (iki ekranlı liste → seçenekler) ikisinde de aynı. */
.ce-mfp {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: min(400px, 100vw);
z-index: 1210;
background: #fff;
overflow: hidden;
transform: translateX(-100%);
transition: transform 0.28s ease;
box-shadow: 12px 0 34px rgba(0, 0, 0, 0.18);
}
.ce-mfp.is-open {
transform: translateX(0);
}
.ce-mfp__screen {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
background: #fff;
transition: transform 0.28s ease;
}
.ce-mfp__screen--sub {
transform: translateX(100%);
}
.ce-mfp.is-sub .ce-mfp__screen--main {
transform: translateX(-30%);
}
.ce-mfp.is-sub .ce-mfp__screen--sub {
transform: translateX(0);
}
.ce-mfp__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 14px 14px;
border-bottom: 1px solid var(--ce-border);
}
.ce-mfp__title {
font-size: 15px;
text-align: center;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ce-mfp__headbtn {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: 0;
padding: 0;
cursor: pointer;
line-height: 0;
flex-shrink: 0;
}
.ce-mfp__headbtn svg {
width: 19px;
height: 19px;
stroke: var(--ce-text);
stroke-width: 2;
fill: none;
}
.ce-mfp__body {
flex: 1;
overflow: auto;
padding: 10px 14px 16px;
}
/* Seçili filtreler bloğu */
.ce-mfp__selhead {
display: flex;
align-items: center;
justify-content: space-between;
margin: 4px 0 10px;
font-size: 14px;
}
.ce-mfp__clear {
background: none;
border: 0;
padding: 0;
font-family: inherit;
font-size: 13px;
font-weight: 700;
color: var(--ce-green);
text-decoration: underline;
cursor: pointer;
}
.ce-mfp__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding-bottom: 12px;
border-bottom: 1px solid #f1f1f1;
margin-bottom: 4px;
}
.ce-mfp__chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: #eefaf3;
border: 1px solid #cdebdb;
color: var(--ce-green);
border-radius: 999px;
padding: 6px 12px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.ce-mfp__chip svg {
width: 11px;
height: 11px;
stroke: currentColor;
stroke-width: 2.2;
fill: none;
}
/* Filtre satırları */
.ce-mfp__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
background: none;
border: 0;
border-bottom: 1px solid #f1f1f1;
padding: 15px 2px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
color: var(--ce-text);
cursor: pointer;
text-align: left;
}
.ce-mfp__row svg {
width: 16px;
height: 16px;
stroke: #9aa0a6;
stroke-width: 2;
fill: none;
flex-shrink: 0;
}
.ce-mfp__rowcount {
font-style: normal;
color: var(--ce-green);
}
/* Hızlı anahtarlar kutusu */
.ce-mfp__quick {
margin-top: 16px;
border: 1px solid var(--ce-border);
border-radius: 12px;
padding: 2px 14px;
}
.ce-mfp__switchrow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 13px 0;
cursor: pointer;
}
.ce-mfp__switchrow + .ce-mfp__switchrow {
border-top: 1px solid #f1f1f1;
}
.ce-mfp__switchlabel {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
min-width: 0;
}
.ce-mfp__switchlabel svg {
width: 17px;
height: 17px;
stroke: var(--ce-green);
stroke-width: 1.8;
fill: none;
flex-shrink: 0;
}
.ce-mfp__switchlabel .ce-mfp__info {
stroke: #b6bcc2;
width: 15px;
height: 15px;
}
.ce-mfp__switchinput {
position: absolute;
opacity: 0;
pointer-events: none;
}
.ce-mfp__switch {
width: 44px;
height: 24px;
border-radius: 999px;
background: #d9dde1;
position: relative;
transition: background 0.2s;
flex-shrink: 0;
}
.ce-mfp__switch::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
transition: transform 0.2s;
}
.ce-mfp__switchinput:checked ~ .ce-mfp__switch {
background: var(--ce-green);
}
.ce-mfp__switchinput:checked ~ .ce-mfp__switch::after {
transform: translateX(20px);
}
/* Alt buton */
.ce-mfp__foot {
padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
border-top: 1px solid var(--ce-border);
background: #fff;
}
.ce-mfp__mainbtn {
width: 100%;
text-align: center;
}
/* Ekran 2: arama + değer listesi */
.ce-mfp__search {
display: flex;
align-items: center;
gap: 8px;
margin: 10px 14px 0;
border: 1px solid var(--ce-border);
border-radius: 10px;
padding: 9px 12px;
background: #f7f8f9;
}
.ce-mfp__search svg {
width: 16px;
height: 16px;
stroke: #9aa0a6;
stroke-width: 2;
fill: none;
flex-shrink: 0;
}
.ce-mfp__search input {
border: 0;
background: none;
outline: none;
font-family: inherit;
font-size: 14px;
width: 100%;
min-width: 0;
}
.ce-mfp__opt {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 2px;
font-size: 14px;
font-weight: 500;
border-bottom: 1px solid #f3f3f3;
cursor: pointer;
}
.ce-mfp__opt input {
accent-color: var(--ce-green);
width: 18px;
height: 18px;
margin: 0;
flex-shrink: 0;
}
.ce-mfp__optname {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.ce-mfp__opt .ce-flt__count {
margin-left: auto;
}
@media (max-width: 768px) {
/* Seçili filtre çipleri mobilde sayfa akışında görünmez; yalnız
"Filtrele" panelinin içindeki "Seçili Filtreler" bölümünde listelenir. */
.ce-flt-selected {
display: none;
}
/* Mobilde masaüstü çipleri ve sıralama select'i yerine 3 buton */
.ce-filterbar .ce-filterbar__chips,
.ce-archive .woocommerce-ordering {
display: none;
}
.ce-fltmob {
display: flex;
}
/* Filtre paneli mobilde alttan açılan tam ekran sheet olur */
.ce-mfp {
top: 0;
right: 0;
width: auto;
box-shadow: none;
transform: translateY(100%);
}
.ce-mfp.is-open {
transform: translateY(0);
}
}
/* --- Kategoriye özel bannerlar (Kategori Düzenle ekranından) --- */
.ce-catbanners {
display: flex;
flex-direction: column;
gap: 16px;
margin: 16px 0 6px;
}
.ce-catbanners__row {
display: flex;
justify-content: center; /* eksik slotta dolu görseller ortalanır */
gap: 16px;
}
.ce-catbanners__item {
display: block;
min-width: 0;
border-radius: 12px;
overflow: hidden;
}
.ce-catbanners__img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 730 / 304; /* farklı boyutta yüklenen görsellerde satır yüksekliği sabit kalsın */
object-fit: cover;
transition: transform 0.25s; /* anasayfa banner grid'iyle (.ce-bannergrid) aynı hover zoom */
}
.ce-catbanners__item:hover .ce-catbanners__img {
transform: scale(1.03);
}
/* Tip bazlı genişlikler: ikili/üçlü eşit paylaşır; tekli ortada, makul geniş */
.ce-catbanners__row--2 .ce-catbanners__item {
flex: 0 1 calc((100% - 16px) / 2);
}
.ce-catbanners__row--3 .ce-catbanners__item {
flex: 0 1 calc((100% - 32px) / 3);
}
.ce-catbanners__row--1 .ce-catbanners__item {
flex: 0 1 740px;
max-width: 100%;
}
@media (max-width: 768px) {
.ce-catbanners {
gap: 10px;
margin: 12px 0 4px;
}
/* Çoklu satırlar mobilde alt alta, tam genişlik */
.ce-catbanners__row {
flex-direction: column;
gap: 10px;
}
.ce-catbanners__row .ce-catbanners__item {
flex: 1 1 auto;
width: 100%;
}
}
/* Ürün grid'i: anasayfa kartının aynısı, esnek sütunlar, sola dayalı.
WC clearfix'i (.woocommerce::before/::after) grid hücresi OLMASIN. */
.ce-archive__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 26px 18px;
align-items: start;
justify-content: start;
margin-top: 16px;
}
.ce-archive__grid::before,
.ce-archive__grid::after {
content: none;
display: none;
}
.ce-archive__grid .ce-card {
width: 100%;
flex: initial;
min-width: 0;
}
/* (Kartların altları @card .ce-card__actions{margin-top:auto} ile hizalanır) */
/* Boş durum */
.ce-archive__empty {
background: #fff;
border: 1px solid var(--ce-border);
border-radius: 12px;
padding: 48px 20px;
text-align: center;
margin-top: 16px;
}
.ce-archive__empty svg {
width: 40px;
height: 40px;
fill: #dcdcdc;
margin-bottom: 10px;
}
.ce-archive__empty-title {
font-size: 16px;
font-weight: 700;
color: var(--ce-text);
margin: 0 0 6px;
}
.ce-archive__empty-text {
font-size: 13.5px;
color: var(--ce-muted);
margin: 0 0 18px;
}
.ce-archive__empty-btn {
display: inline-block;
padding: 12px 28px;
}
/* Sayfalama */
.ce-archive .woocommerce-pagination {
margin-top: 28px;
text-align: center;
}
.ce-archive .woocommerce-pagination ul {
display: inline-flex;
gap: 6px;
list-style: none;
margin: 0;
padding: 0;
border: 0;
}
.ce-archive .woocommerce-pagination ul li {
border: 0;
margin: 0;
}
.ce-archive .woocommerce-pagination .page-numbers {
display: flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 10px;
border: 1px solid var(--ce-border);
border-radius: 8px;
background: #fff;
color: var(--ce-text);
font-weight: 600;
font-size: 14px;
}
.ce-archive .woocommerce-pagination .page-numbers.current {
background: var(--ce-green);
border-color: var(--ce-green);
color: #fff;
}
.ce-archive .woocommerce-pagination a.page-numbers:hover {
border-color: var(--ce-green);
color: var(--ce-green);
}
@media (max-width: 768px) {
.ce-archive__title {
font-size: 19px;
}
.ce-archive__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 10px;
}
}
/* ---------- Mega panel: kalabalık TEK SEVİYELİ alt menüler çok sütunlu ----------
JS, 13+ öğeli ve torunsuz panellere .ce-meganav verir; az öğeli menüler
(ör. Çiçek) tek kolon + flyout düzeninde kalır. */
.ce-nav .sub-menu.ce-meganav {
width: 700px;
max-width: calc(100vw - 40px);
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
column-gap: 12px;
padding: 10px 12px 14px;
/* Ekran boyunu aşmasın; sütunlar yetmezse SON ÇARE iç kaydırma */
max-height: min(65vh, 540px);
overflow-y: auto;
overscroll-behavior: contain;
}
.ce-nav li:hover > .sub-menu.ce-meganav,
.ce-nav li:focus-within > .sub-menu.ce-meganav {
display: grid;
}
/* Panel başı: üst kategorinin tüm ürünlerine giden bağlantı (tam satır) */
.ce-nav .ce-meganav__all {
grid-column: 1 / -1;
border-bottom: 1px solid var(--ce-border);
margin-bottom: 6px;
padding-bottom: 4px;
}
.ce-nav .ce-meganav__all a {
font-weight: 700;
color: var(--ce-green);
}
.ce-nav .ce-meganav__all a:hover {
color: var(--ce-green-dark);
}
/* ---------- Alt menüsü olan öğelerde chevron göstergesi ----------
WP, alt menüsü olan öğeye .menu-item-has-children verir — ok otomatik.
Ok CSS ile çizilir (SVG/emoji yok), currentColor ile metin rengini izler
(hover'da linkle birlikte yeşile döner). */
.ce-nav .menu-item-has-children > a {
display: flex;
align-items: center;
/* AYNI değişken: ikonlu öğede ikon-metin arası, alt menüsü olan öğede
ok boşluğu — ikisi tek kaynaktan gelir, üst üste binmez. */
gap: var(--ce-nav-ico-gap);
}
.ce-nav .menu-item-has-children > a::after {
content: "";
width: 7px;
height: 7px;
border-right: 1.8px solid currentColor;
border-bottom: 1.8px solid currentColor;
flex-shrink: 0;
opacity: 0.6;
/* Üst şerit: AŞAĞI bakan chevron */
transform: translateY(-2px) rotate(45deg);
transition: transform 0.15s;
}
/* Menü açıkken (hover ya da tıklama) ok yukarı döner */
.ce-nav > ul > li.menu-item-has-children:hover > a::after,
.ce-nav > ul > li.menu-item-has-children:focus-within > a::after {
transform: translateY(2px) rotate(225deg);
}
/* Panel içi: torunu olan öğede SAĞA bakan chevron, satırın sağ ucunda —
ikinci panelin sağa açılacağını gösterir. Torunu olmayanda ok yok. */
.ce-nav .sub-menu .menu-item-has-children > a {
justify-content: space-between;
}
.ce-nav .sub-menu .menu-item-has-children > a::after {
transform: rotate(-45deg);
margin-left: 12px;
}
.ce-nav .sub-menu .menu-item-has-children:hover > a::after,
.ce-nav .sub-menu .menu-item-has-children:focus-within > a::after {
transform: rotate(-45deg);
}
/* ---------- Content ---------- */
.ce-main {
min-height: 55vh;
padding: 24px 0 48px;
}
/* Elementor ile kurulan ana sayfa: header ile aynı genişlik/hizalama */
.ce-main--home {
padding-top: 0;
}
.ce-main--home .elementor-section-boxed > .elementor-container,
.ce-main--home .e-con {
max-width: var(--ce-container-width) !important;
padding-left: var(--ce-container-pad);
padding-right: var(--ce-container-pad);
}
/* Elementor'un varsayılan 10px sütun iç boşluğu içeriği header'dan dar gösteriyor — sıfırla. */
.ce-main--home .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
.ce-main--home .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated {
padding: 0;
}
/* Hero (front page) */
.ce-hero {
background: linear-gradient(120deg, var(--ce-green) 0%, var(--ce-green-dark) 100%);
color: #fff;
border-radius: var(--ce-radius);
padding: 56px 40px;
text-align: center;
margin-bottom: 40px;
}
.ce-hero h1 {
margin: 0 0 10px;
font-size: 34px;
}
.ce-hero p {
margin: 0 0 24px;
font-size: 17px;
opacity: 0.92;
}
.ce-hero .ce-btn {
background: #fff;
color: var(--ce-green);
}
.ce-hero .ce-btn:hover {
background: var(--ce-green-light);
color: var(--ce-green-dark);
}
.ce-section-title {
font-size: 24px;
font-weight: 700;
margin: 0 0 20px;
text-align: center;
}
/* Generic button */
.ce-btn {
display: inline-block;
background: var(--ce-green);
color: #fff;
font-weight: 700;
font-size: 15px;
border: 0;
border-radius: var(--ce-radius);
padding: 12px 28px;
transition: background 0.15s;
}
.ce-btn:hover {
background: var(--ce-green-dark);
color: #fff;
}
/* ---------- WooCommerce genel ---------- */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
background: var(--ce-green);
color: #fff;
border-radius: var(--ce-radius);
font-weight: 700;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
background: var(--ce-green-dark);
color: #fff;
}
.woocommerce span.onsale {
background: var(--ce-danger);
border-radius: 4px;
line-height: 1.6;
min-height: auto;
min-width: auto;
padding: 3px 10px;
}
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
color: var(--ce-star);
}
/* Arşiv/ilgili ürün kartları: görsel kart kenarına tam oturur, padding sadece yazıda */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
background: #fff;
border: 1px solid var(--ce-border);
border-radius: var(--ce-radius);
padding: 0 !important;
overflow: hidden;
position: relative;
transition: box-shadow 0.15s;
}
.woocommerce ul.products li.product:hover {
box-shadow: var(--ce-shadow);
}
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
width: 100% !important;
aspect-ratio: 280 / 308;
object-fit: cover;
margin: 0 !important;
border-radius: 0;
display: block;
}
/* Kart içerikleri sola hizalı; ad sabit yükseklik (fiyatlar aynı seviyede) */
.woocommerce ul.products li.product {
text-align: left;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 14px;
font-weight: 600;
padding: 0;
margin: 10px 12px 6px;
line-height: 1.4;
height: 40px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.woocommerce ul.products li.product .star-rating {
margin: 0 0 8px 12px;
}
.woocommerce ul.products li.product .price {
color: var(--ce-green);
font-weight: 700;
font-size: 16px;
padding: 0 12px;
display: block;
}
.woocommerce ul.products li.product .button {
margin: 8px 12px 12px;
}
.woocommerce ul.products li.product .onsale {
top: 8px;
left: 8px;
right: auto;
width: max-content;
margin: 0;
}
.woocommerce-message,
.woocommerce-info {
border-top-color: var(--ce-green);
}
.woocommerce-message::before,
.woocommerce-info::before {
color: var(--ce-green);
}
/* Boş sepetin üstündeki şerit: sert gri kutu yerine yumuşak yeşil karşılama */
.wc-empty-cart-message .cart-empty.woocommerce-info {
background: var(--ce-green-light);
border: 1px solid #cdebdb;
border-radius: 14px;
padding: 16px 20px 16px 52px;
color: var(--ce-green-dark);
font-size: 15px;
font-weight: 600;
line-height: 1.55;
}
.wc-empty-cart-message .cart-empty.woocommerce-info::before {
content: "\e021"; /* WooCommerce ikon fontu: sepet */
top: 50%;
left: 20px;
transform: translateY(-50%);
color: var(--ce-green);
font-size: 18px;
}
@media (max-width: 768px) {
.wc-empty-cart-message .cart-empty.woocommerce-info {
padding: 14px 16px 14px 46px;
font-size: 14px;
}
.wc-empty-cart-message .cart-empty.woocommerce-info::before {
left: 16px;
}
}
/* ---------- Ürün sayfası ---------- */
.ce-breadcrumb,
.woocommerce .woocommerce-breadcrumb {
font-size: 13px;
color: var(--ce-muted);
margin-bottom: 18px;
}
.ce-product {
display: grid;
grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
gap: 36px;
align-items: start;
}
/* Galeri */
.ce-gallery {
display: flex;
gap: 12px;
}
.ce-gallery__thumbs {
display: flex;
flex-direction: column;
gap: 10px;
width: 96px;
flex-shrink: 0;
}
/* Kutulu thumbnail: beyaz zemin + ince gri kenarlık + iç boşluk */
.ce-gallery__thumb {
width: 96px;
height: 96px;
border: 1px solid #dcdcdc;
border-radius: 8px;
padding: 6px;
background: #fff;
overflow: hidden;
line-height: 0;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
}
.ce-gallery__thumb img {
width: 100%;
height: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 5px;
}
.ce-gallery__thumb:hover {
border-color: #b5b5b5;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.ce-gallery__thumb.is-active {
border: 2px solid var(--ce-green);
padding: 5px;
}
.ce-gallery__thumb.is-active:hover {
border-color: var(--ce-green);
box-shadow: none;
}
.ce-gallery__main {
flex: 1;
min-width: 0;
border: 1px solid var(--ce-border);
border-radius: var(--ce-radius);
overflow: hidden;
line-height: 0;
position: relative;
background: #f2f2f2;
}
.ce-gallery__track {
display: flex;
overflow-x: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.ce-gallery__slide {
flex: 0 0 100%;
min-width: 100%;
scroll-snap-align: start;
line-height: 0;
}
.ce-gallery__slide img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}
/* Tıkla-zoom YALNIZ masaüstünde: görsel kendi karesi içinde büyür, taşmaz.
Mobil galeri (kaydırma + noktalar) bu kurallardan etkilenmez. */
@media (min-width: 769px) {
.ce-gallery__slide {
overflow: hidden;
}
.ce-gallery__slide img {
cursor: zoom-in;
}
.ce-gallery__slide.is-zoomed img {
cursor: zoom-out;
user-select: none;
-webkit-user-drag: none;
}
}
/* Mobil galeri öğeleri: masaüstünde gizli */
.ce-gallery__fav,
.ce-gallery__ratebadge,
.ce-gallery__dots {
display: none;
}
/* WooCommerce'in varsayılan float/genişlik kurallarını etkisizleştir */
.woocommerce div.product.ce-product div.summary,
.woocommerce-page div.product.ce-product div.summary,
.ce-product .summary {
float: none;
width: 100%;
min-width: 0;
margin: 0;
}
.woocommerce div.product.ce-product div.images,
.woocommerce-page div.product.ce-product div.images {
float: none;
width: 100%;
margin: 0;
}
/* Sağ sütun: bilgi paneli (referans: üstte çerçeveli başlık/fiyat kutusu) */
.ce-panel {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.ce-panel__head {
background: #fbfbfb;
border: 1px solid var(--ce-border);
border-radius: 10px;
padding: 24px 26px;
display: flex;
flex-direction: column;
gap: 22px;
}
.ce-summary .product_title {
font-size: 30px;
font-weight: 700;
margin: 0;
line-height: 1.3;
}
/* Fiyat satırı: solda indirim rozeti + fiyatlar, sağda puan */
.ce-panel__pricerow {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.ce-pricebox {
display: flex;
align-items: center;
gap: 14px;
}
.ce-pricebox__disc {
background: var(--ce-danger);
color: #fff;
font-size: 21px;
font-weight: 800;
border-radius: 8px;
padding: 13px 13px;
line-height: 1;
}
.ce-pricebox__col {
display: flex;
flex-direction: column;
gap: 2px;
}
.ce-pricebox__col del {
color: var(--ce-muted);
font-size: 17px;
font-weight: 600;
}
.ce-pricebox__now {
font-size: 36px;
font-weight: 800;
color: var(--ce-text);
line-height: 1.05;
}
.ce-pricebox__now em {
font-style: normal;
color: var(--ce-green);
font-size: 15px;
font-weight: 700;
}
.ce-ratebox {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
margin-left: auto;
}
.ce-ratebox .star-rating {
font-size: 18px;
margin: 0;
/* Yıldızlar tema rengiyle (altın); boş yıldızlar soluk kalır. */
color: var(--ce-star);
}
.ce-ratebox .star-rating::before {
color: #dcdfe3;
}
.ce-ratebox__link {
font-size: 14px;
color: var(--ce-muted);
text-decoration: underline;
}
.ce-ratebox__link:hover {
color: var(--ce-green);
}
/* Varyant seçenekleri (değişken ürün) */
.ce-variants {
display: flex;
flex-direction: column;
gap: 8px;
}
.ce-variant {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
background: #f4f4f4;
border: 1.5px solid transparent;
border-bottom: 1px solid #e7e7e7;
border-radius: 8px;
padding: 13px 16px;
text-align: left;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.ce-variant:hover {
border-color: #cfe8da;
}
.ce-variant.is-active {
border-color: var(--ce-green);
background: #f2faf6;
}
.ce-variant__radio {
width: 22px;
height: 22px;
flex-shrink: 0;
border-radius: 6px;
background: #fff;
border: 1.5px solid #cfcfcf;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, border-color 0.15s;
}
.ce-variant.is-active .ce-variant__radio {
background: var(--ce-green);
border-color: var(--ce-green);
}
.ce-variant.is-active .ce-variant__radio::after {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
}
.ce-variant__name {
flex: 1;
min-width: 0;
font-size: 14.5px;
font-weight: 500;
color: var(--ce-text);
line-height: 1.35;
}
.ce-variant__price {
flex-shrink: 0;
font-size: 18px;
font-weight: 800;
color: var(--ce-text);
white-space: nowrap;
}
/* WooCommerce varyasyon formunun görünen kısımları gizli (listemiz yönetiyor) */
.ce-buy__form .variations,
.ce-buy__form .single_variation_wrap .woocommerce-variation,
.ce-buy__form .reset_variations {
display: none !important;
}
.ce-buy__form .woocommerce-variation-add-to-cart .quantity {
display: none;
}
/* Konum + tarih/saat akışı */
.ce-delivery-widget {
display: flex;
flex-direction: column;
gap: 12px;
/* Uzun adres metni kabı genişletemesin (flex min-width:auto tuzağı) */
min-width: 0;
max-width: 100%;
}
/* ---------- Teslimat kesim geri sayımı (ürün sayfası) ----------
Aciliyet kartı: JS yalnız kesim penceresine girildiğinde DOM'a ekler,
pencere dışında öğe hiç bulunmaz. Amber ailesi — tema yeşiline bağlı DEĞİL. */
.ce-countdown {
--ce-countdown-bg: #fff8e6;
--ce-countdown-border: #f3ddb0;
--ce-countdown-fg: #7a4f05;
--ce-countdown-accent: #d98a00;
--ce-countdown-track: #f0e0bd;
--ce-countdown-muted: #98703a;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
background: var(--ce-countdown-bg);
border: 1px solid var(--ce-countdown-border);
border-radius: 12px;
/* Bilgi kartı: tıklanabilir değil */
cursor: default;
/* Boşluk .ce-panel'in gap'inden (16px) gelir; ayrıca margin YOK — banner
gizliyken (DOM'dan tamamen kaldırıldığı için) geride boşluk kalmaz. */
}
/* Yalnız YEDEK konumda (güven kartı kapalıyken, teslimat bölümünün altında):
orada panel gap'i olmadığı için kendi üst boşluğunu verir. */
.ce-countdown--inline {
margin-top: 12px;
}
.ce-countdown__icon {
flex-shrink: 0;
width: 22px;
height: 22px;
margin-top: 1px;
fill: none;
stroke: var(--ce-countdown-accent);
stroke-width: 1.8;
stroke-linecap: round;
}
.ce-countdown__body {
flex: 1 1 auto;
min-width: 0;
}
.ce-countdown__title {
display: block;
font-size: 14px;
font-weight: 700;
line-height: 1.35;
color: var(--ce-countdown-fg);
/* Uzun metin sarar, taşmaz */
overflow-wrap: anywhere;
}
.ce-countdown__bar {
height: 6px;
margin: 9px 0 7px;
border-radius: 99px;
background: var(--ce-countdown-track);
overflow: hidden;
}
.ce-countdown__fill {
display: block;
height: 100%;
width: 0;
border-radius: 99px;
background: var(--ce-countdown-accent);
transition: width 0.6s linear;
}
.ce-countdown__note {
margin: 0;
font-size: 12px;
line-height: 1.45;
color: var(--ce-countdown-muted);
overflow-wrap: anywhere;
}
@media (max-width: 768px) {
.ce-countdown {
gap: 10px;
padding: 11px 12px;
}
.ce-countdown__icon {
width: 20px;
height: 20px;
}
.ce-countdown__title {
font-size: 13.5px;
}
.ce-countdown__note {
font-size: 11.5px;
}
}
@media (prefers-reduced-motion: reduce) {
.ce-countdown__fill {
transition: none;
}
}
/* Ürün kartındaki "Hızlı Sipariş" ile gelindiğinde (?hizli=1): kaydırılan
sipariş alanı 2 saniyeliğine belirginleşir — kullanıcı nereye geldiğini görür. */
.ce-quick-hl {
animation: ce-quick-hl 2s ease-out 1;
border-radius: 12px;
}
@keyframes ce-quick-hl {
0%,
60% {
box-shadow: 0 0 0 3px rgba(46, 58, 89, 0.28);
}
100% {
box-shadow: 0 0 0 3px rgba(46, 58, 89, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.ce-quick-hl {
animation: none;
}
}
/* Konum seçici kutusu (boş durum: açık gri zemin + gri ikon/metin) */
.ce-locbox {
display: flex;
align-items: center;
gap: 10px;
background: #f5f5f5;
border: 1px solid var(--ce-border);
border-radius: 8px;
padding: 0 0 0 14px;
transition: border-color 0.15s;
}
.ce-locbox:hover,
.ce-locbox:focus-within {
border-color: var(--ce-green);
}
.ce-locbox svg {
width: 20px;
height: 20px;
fill: none;
stroke: var(--ce-muted);
stroke-width: 1.7;
flex-shrink: 0;
}
.ce-locbox__input {
flex: 1;
min-width: 0;
border: 0;
background: transparent;
padding: 17px 14px 17px 0;
font-size: 15px;
font-family: inherit;
color: var(--ce-text);
outline: none;
}
.ce-locbox__input::placeholder {
color: var(--ce-muted);
}
/* Kayıtlı adresler paneli (konum kutusunun hemen altında, tam genişlik) */
.ce-locwrap {
position: relative;
min-width: 0;
max-width: 100%;
}
.ce-locpanel {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 30;
background: #fff;
border: 1px solid var(--ce-border);
border-radius: 8px;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
overflow: hidden;
}
.ce-locpanel__head {
padding: 10px 14px;
font-size: 12.5px;
font-weight: 600;
color: var(--ce-muted);
background: #fafafa;
border-bottom: 1px solid #f0f0f0;
}
.ce-locpanel__item {
display: block;
width: 100%;
text-align: left;
background: #fff;
border: 0;
border-bottom: 1px solid #f5f5f5;
padding: 11px 14px;
cursor: pointer;
transition: background 0.12s;
}
.ce-locpanel__item:last-child {
border-bottom: 0;
}
.ce-locpanel__item strong {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--ce-text);
line-height: 1.35;
}
.ce-locpanel__item span {
display: block;
font-size: 12.5px;
color: var(--ce-muted);
line-height: 1.4;
}
.ce-locpanel__item:hover,
.ce-locpanel__item:focus {
background: #f2faf6;
outline: none;
}
.ce-locpanel__item:hover strong,
.ce-locpanel__item:focus strong {
color: var(--ce-green);
}
.ce-locpanel__empty {
padding: 14px;
font-size: 13px;
color: var(--ce-muted);
line-height: 1.5;
}
.ce-locpanel__add {
display: inline-block;
margin-top: 6px;
color: var(--ce-green);
font-weight: 700;
font-size: 13px;
}
.ce-locpanel__add:hover {
color: var(--ce-green-dark);
text-decoration: underline;
}
/* Google Places öneri listesi (tema uyumlu).
z-index sitedeki TÜM sabit katmanlardan (mobil Sipariş Ver çubuğu 999,
header vb.) büyük olmalı; yoksa alttaki önerilere dokunuş çubuğa gider. */
.pac-container {
z-index: 100000 !important;
pointer-events: auto;
touch-action: manipulation;
border: 1px solid var(--ce-border);
border-radius: 8px;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
font-family: var(--ce-font);
margin-top: 4px;
}
.pac-item {
padding: 9px 12px;
cursor: pointer;
font-size: 12.5px;
line-height: 1.4;
border-top: 1px solid #f5f5f5;
touch-action: manipulation;
}
.pac-item:first-child {
border-top: 0;
}
.pac-item:hover,
.pac-item-selected {
background: #f2faf6;
}
.pac-item-query {
font-size: 13.5px;
color: var(--ce-text);
}
/* Konum çubuğu (seçili durum - yeşil dolu) */
.ce-locbar {
display: flex;
align-items: center;
gap: 10px;
background: var(--ce-green);
color: #fff;
border-radius: 8px;
padding: 16px;
font-size: 15px;
font-weight: 600;
/* Uzun adres taşmasın: kap kendini aşamaz, metin ellipsis ile kesilir */
min-width: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.ce-locbar svg {
width: 20px;
height: 20px;
fill: none;
stroke: #fff;
stroke-width: 1.7;
flex-shrink: 0;
}
.ce-locbar__text {
display: block;
flex: 1 1 auto;
width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Mobil kısa gösterim (isim + ilçe/il) — masaüstünde gizli */
.ce-locbar__short {
display: none;
flex: 1 1 auto;
width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 768px) {
/* Mobilde uzun adres yerine yalnızca kısa bilgi gösterilir (kesme yok) */
.ce-locbar__text {
display: none;
}
.ce-locbar__short {
display: block;
}
}
.ce-locbar__clear {
width: 26px;
height: 26px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.22);
color: #fff;
font-size: 12px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s;
}
.ce-locbar__clear:hover {
background: rgba(255, 255, 255, 0.38);
}
/* Tarih seçici: 4 kutu */
.ce-datetime {
display: flex;
flex-direction: column;
gap: 10px;
}
.ce-dates {
display: grid;
/* minmax(0,1fr): uzun gün adları sütunu genişletemez — 4 kutu her zaman EŞİT */
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
/* Uygun saati kalmayan gün: soluk ve tıklanamaz */
.ce-date:disabled,
.ce-date.is-disabled {
opacity: 0.45;
cursor: default;
pointer-events: none;
}
/* "Bugün için teslimat saati kalmadı." notu */
.ce-today-full {
font-size: 12px;
color: var(--ce-muted);
line-height: 1.4;
margin: 0;
}
/* "Seçtiğiniz teslimat saati doldu" uyarısı */
.ce-slot-expired {
font-size: 12px;
color: var(--ce-danger);
font-weight: 600;
line-height: 1.4;
margin: 0;
}
.ce-date {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
min-width: 0;
/* Takvim kutusunun içeriği (ikon → seçilen tarih) değişince satır
yüksekliği zıplamasın diye taban yükseklik sabit. */
min-height: 86px;
background: #f1f1f1;
border: 1.5px solid transparent;
border-radius: 8px;
padding: 18px 6px;
line-height: 1.25;
color: var(--ce-text);
text-align: center;
transition: background 0.15s, color 0.15s;
}
/* Uzun gün adları (Pazartesi/Çarşamba…) dar kutuda taşmasın. */
.ce-date > strong,
.ce-date > span {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ce-date strong {
font-size: 16px;
font-weight: 700;
}
.ce-date span {
font-size: 13.5px;
color: var(--ce-muted);
}
.ce-date:hover {
border-color: var(--ce-green);
}
.ce-date.is-active {
background: var(--ce-green);
color: #fff;
}
.ce-date.is-active span,
.ce-date.is-active strong {
color: #fff;
}
.ce-date--cal svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
}
.ce-date__custom input {
width: 100%;
border: 1.5px solid var(--ce-green);
border-radius: 8px;
padding: 11px 12px;
font-size: 14px;
font-family: inherit;
color: var(--ce-text);
background: #fff;
}
/* Saat seçimi:
Masaüstü: tek yeşil "Saat Seçiniz ▾" açılır kutu — her zaman EN SOL sütunda sabit.
Mobil (≤768): açılır kutu gizli; saat aralıkları sola hizalı ayrı kutular. */
.ce-dates .ce-timebox {
position: relative;
grid-row: 2;
/* Seçili günün sütunu — JS --ce-times-col ile günceller */
grid-column: var(--ce-times-col, 1);
min-width: 0;
}
.ce-timebox__select {
width: 100%;
appearance: none;
-webkit-appearance: none;
border: 0;
border-radius: 8px;
background: var(--ce-green);
color: #fff;
font-size: 13px;
font-weight: 700;
font-family: inherit;
padding: 11px 30px 11px 12px;
cursor: pointer;
outline: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ce-timebox__select:hover,
.ce-timebox__select:focus {
background: var(--ce-green-dark);
}
.ce-timebox__select option {
background: #fff;
color: var(--ce-text);
}
.ce-timebox svg {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 15px;
height: 15px;
fill: none;
stroke: #fff;
stroke-width: 2;
pointer-events: none;
}
/* Masaüstünde ayrı saat kutuları gizli */
.ce-dates .ce-times {
display: none;
}
.ce-timeopt {
background: #f1f1f1;
border: 1.5px solid transparent;
border-radius: 8px;
padding: 10px 16px;
font-size: 13px;
font-weight: 600;
color: var(--ce-text);
white-space: nowrap;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ce-timeopt:hover {
border-color: var(--ce-green);
}
.ce-timeopt.is-active {
background: var(--ce-green);
color: #fff;
}
@media (max-width: 768px) {
/* Tarih çipleri satırı (1. satır) ile saat şeridi (2. satır) arasındaki
DİKEY boşluk mobilde 15px. Sütun aralığı 8px kalır; ölçü konteynerin
kendi row-gap'inden verilir, öğelerin padding'ine dokunulmaz.
Masaüstü etkilenmez: orada .ce-dates gap'i @media (min-width: 769px)
bloğundan (10px) geliyor. Hızlı Sipariş popup'ı ayrı sınıf kullandığı
için (.ce-qo__dates / .ce-qo__times) bu kuraldan etkilenmez. */
.ce-dates {
row-gap: 15px;
}
.ce-dates .ce-timebox {
display: none;
}
/* Saat şeridi: tek satır, yatay kaydırmalı (ok yok, scrollbar gizli) */
.ce-dates .ce-times {
display: flex;
grid-row: 2;
grid-column: 1 / -1;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 8px;
min-width: 0;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scrollbar-width: none;
cursor: grab;
/* Sonraki bölümle ara tam 30px: 18px + panel gap 12px */
margin-bottom: 18px;
}
.ce-dates .ce-times::-webkit-scrollbar {
display: none;
}
/* Mouse ile sürüklerken: imleç + snap kapalı (bırakınca hizalanır) */
.ce-dates .ce-times.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
scroll-behavior: auto;
}
.ce-dates .ce-times .ce-timeopt {
flex: 0 0 110px;
text-align: center;
scroll-snap-align: start;
}
}
/* Güven satırı */
.ce-trustrow {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 28px;
font-size: 14.5px;
font-weight: 600;
color: var(--ce-text);
}
.ce-trustrow span {
display: flex;
align-items: center;
gap: 7px;
}
.ce-trustrow svg {
width: 20px;
height: 20px;
fill: none;
stroke: var(--ce-green);
stroke-width: 1.7;
flex-shrink: 0;
}
/* Sipariş Ver + favori kutusu */
.ce-buy {
display: flex;
/* Form bloğu üstten başlar; favori bloğu aşağıda butonun 60px hattına
sabitlenir — form altına not eklense bile kalp kaymaz */
align-items: flex-start;
gap: 14px;
}
/* Ürün detayında adet seçici HİÇBİR üründe görünmez; miktar arka planda 1
olarak gönderilir (display:none input form gönderiminde yer alır) */
.ce-summary form.cart .quantity {
display: none !important;
}
.ce-buy__form {
flex: 1;
min-width: 0;
}
.ce-buy__form form.cart {
margin: 0;
display: flex;
}
/* Referans düzeninde adet seçici yok */
.ce-buy__form form.cart div.quantity {
display: none;
}
.ce-buy__form .single_add_to_cart_button,
.woocommerce .ce-buy__form button.single_add_to_cart_button,
.woocommerce .ce-buy__form button.single_add_to_cart_button.alt {
width: 100%;
height: 60px;
font-size: 20px;
font-weight: 700;
border-radius: 8px;
background: var(--ce-green) !important;
color: #fff !important;
line-height: 1;
padding: 0 24px;
}
.ce-buy__form .single_add_to_cart_button:hover,
.woocommerce .ce-buy__form button.single_add_to_cart_button:hover,
.woocommerce .ce-buy__form button.single_add_to_cart_button.alt:hover {
background: var(--ce-green-dark) !important;
}
.ce-favbox {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
/* Butonla (60px) aynı hat: dikey merkezler çakışır (üstten değil ortadan) */
align-self: flex-start;
height: 60px;
}
.ce-fav {
width: 60px;
height: 60px;
flex-shrink: 0;
border: 1.5px solid #f3b9c6;
border-radius: 8px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.15s;
}
.ce-fav svg {
width: 24px;
height: 24px;
fill: none;
stroke: var(--ce-danger, #e0234e);
stroke-width: 1.8;
transition: fill 0.15s;
}
.ce-fav:hover,
.ce-fav.is-active {
border-color: var(--ce-danger);
}
.ce-fav.is-active svg {
fill: var(--ce-danger);
}
.ce-favbox__text {
font-size: 13px;
color: var(--ce-muted);
line-height: 1.45;
}
/* Varyasyonlu ürün formu düzeni */
.ce-buy__form form.cart.variations_form {
display: block;
}
.ce-buy__form form.cart.variations_form .woocommerce-variation-add-to-cart {
display: flex;
gap: 10px;
align-items: stretch;
}
/* Ana bilgi kartı sarmalayıcısı: yalnız masaüstünde kart olur, mobilde yok sayılır. */
.ce-panel__main {
display: contents;
}
/* Bilgi kutuları */
.ce-notice {
display: flex;
align-items: flex-start;
gap: 10px;
border-radius: 8px;
padding: 14px 16px;
font-size: 14px;
line-height: 1.55;
}
.ce-notice svg {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-top: 2px;
fill: none;
stroke-width: 1.7;
}
.ce-notice p {
margin: 0;
}
.ce-notice--green {
background: var(--ce-green-light);
color: #1c5c38;
}
.ce-notice--green svg {
stroke: #1c5c38;
}
.ce-notice--green strong {
font-weight: 800;
}
.ce-notice--gray {
background: #fff;
border: 1px solid var(--ce-border);
color: var(--ce-muted);
}
.ce-notice--gray svg {
stroke: var(--ce-muted);
}
/* Sipariş Ver zorunlu alan uyarıları: ilgili alanın altında tam genişlik şerit */
/* Bölge ek teslimat ücreti bilgi notu (konum çubuğunun altında) */
.ce-zonefee {
width: 100%;
box-sizing: border-box;
background: #eefaf3;
border: 1px solid #cdebdb;
color: var(--ce-green-dark, #0d7d3e);
font-size: 13px;
font-weight: 600;
padding: 9px 12px;
border-radius: 8px;
margin-top: 8px;
}
.ce-validate-msg {
display: flex;
align-items: flex-start;
gap: 8px;
width: 100%;
box-sizing: border-box;
background: #fdecef;
border: 1px solid #f5c2cc;
color: var(--ce-danger);
font-size: 13px;
font-weight: 600;
line-height: 1.45;
padding: 11px 13px;
border-radius: 8px;
margin: 10px 0 0;
overflow-wrap: anywhere;
}
.ce-validate-msg::before {
content: "";
flex: 0 0 16px;
width: 16px;
height: 16px;
margin-top: 1px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e0234e'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 5h2v7h-2V7zm0 9h2v2h-2v-2z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Güvenlik ağı: bir grid/flex kapsayıcının içine düşerse de tam satır kaplasın. */
.ce-dates .ce-validate-msg,
.ce-datetime .ce-validate-msg {
grid-column: 1 / -1;
}
/* .ce-datetime flex column zaten 10px gap veriyor; çift boşluk olmasın. */
.ce-datetime .ce-validate-msg {
margin-top: 0;
}
.ce-invalid {
outline: 2px solid var(--ce-danger) !important;
outline-offset: 2px;
border-radius: 10px;
animation: ce-invalid-shake 0.35s ease;
}
@keyframes ce-invalid-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
50% { transform: translateX(4px); }
75% { transform: translateX(-2px); }
}
/* ============ Sepet sayfası (çiçeksepeti düzeni) ============ */
.woocommerce-cart .ce-main article > h2 {
display: none;
}
.ce-cart {
padding: 22px 0 40px;
}
.ce-cart__title {
font-size: 26px;
font-weight: 700;
color: var(--ce-text);
margin: 0 0 16px;
}
.ce-cart__count {
font-size: 16px;
font-weight: 500;
color: var(--ce-muted);
}
.ce-cart__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 24px;
align-items: start;
}
/* Sol: ürün listesi kartı */
.ce-cart__items {
background: #fff;
border: 1px solid var(--ce-border);
border-radius: 10px;
overflow: hidden;
}
.ce-cart__seller {
padding: 14px 18px;
font-size: 13px;
color: var(--ce-muted);
border-bottom: 1px solid var(--ce-border);
}
.ce-cart__seller strong {
color: var(--ce-text);
font-weight: 600;
}
.ce-cart__row {
position: relative;
display: grid;
grid-template-columns: 117px minmax(0, 1fr) auto;
gap: 16px;
align-items: center;
padding: 18px;
}
.ce-cart__row + .ce-cart__row {
border-top: 1px solid var(--ce-border);
}
/* Görsel hücresi sabit 117×130; cover ile doldurur, oran hiç bozulmaz. */
.ce-cart__thumb {
display: block;
width: 117px;
border-radius: 8px;
overflow: hidden;
align-self: start;
}
.ce-cart__thumb img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 117 / 130;
object-fit: cover;
}
.ce-cart__info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
min-width: 0;
}
.ce-cart__name {
font-size: 15px;
font-weight: 600;
color: var(--ce-text);
text-decoration: none;
padding-right: 28px;
}
.ce-cart__name:hover {
color: var(--ce-green);
}
.ce-cart__free {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 13px;
font-weight: 600;
color: #3ca735;
}
.ce-cart__delivery {
font-size: 13px;
color: var(--ce-muted);
}
.ce-cart__delivery strong {
color: var(--ce-text);
font-weight: 600;
}
.ce-cart__meta {
font-size: 12px;
color: var(--ce-muted);
}
.ce-cart__qty {
display: inline-flex;
align-items: center;
border: 1px solid var(--ce-border);
border-radius: 8px;
overflow: hidden;
margin-top: 4px;
}
.ce-cart__qtybtn {
width: 30px;
height: 30px;
border: 0;
background: #f7f7f7;
color: var(--ce-text);
font-size: 16px;
line-height: 1;
cursor: pointer;
}
.ce-cart__qtybtn:hover {
background: #eef7f1;
color: var(--ce-green);
}
.ce-cart__qty input {
width: 40px;
height: 30px;
border: 0;
text-align: center;
font-family: inherit;
font-size: 14px;
font-weight: 600;
color: var(--ce-text);
-moz-appearance: textfield;
appearance: textfield;
}
.ce-cart__qty input::-webkit-outer-spin-button,
.ce-cart__qty input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.ce-cart__price {
font-size: 18px;
font-weight: 700;
color: var(--ce-text);
white-space: nowrap;
align-self: center;
}
.ce-cart__remove {
position: absolute;
top: 14px;
right: 14px;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
line-height: 1;
color: #b0b0b0;
text-decoration: none;
border-radius: 50%;
}
.ce-cart__remove:hover {
color: var(--ce-danger);
background: #fdecef;
}
/* Sağ: sipariş özeti */
.ce-cart__side {
display: flex;
flex-direction: column;
gap: 14px;
position: sticky;
top: 16px;
}
.ce-cart__summary,
.ce-cart__couponbox {
background: #fff;
border: 1px solid var(--ce-border);
border-radius: 10px;
padding: 18px;
}
.ce-cart__summary-title {
font-size: 18px;
font-weight: 700;
color: var(--ce-text);
margin: 0 0 10px;
}
.ce-cart__total {
font-size: 26px;
font-weight: 700;
color: var(--ce-text);
margin-bottom: 14px;
}
.ce-cart__checkout {
display: block;
width: 100%;
text-align: center;
background: var(--ce-green);
color: #fff;
font-size: 15px;
font-weight: 600;
text-decoration: none;
padding: 13px 16px;
border-radius: 8px;
transition: background 0.15s ease;
box-sizing: border-box;
}
.ce-cart__checkout:hover {
background: var(--ce-green-dark, #0e8140);
color: #fff;
}
.ce-cart__lines {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--ce-border);
display: flex;
flex-direction: column;
gap: 8px;
}
.ce-cart__line {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 13px;
color: var(--ce-muted);
}
.ce-cart__line--coupon {
color: #3ca735;
font-weight: 600;
}
.ce-cart__coupon-remove {
color: var(--ce-danger);
text-decoration: none;
font-size: 14px;
margin-left: 4px;
}
/* Kupon kutusu */
.ce-cart__coupon-toggle {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 8px;
border: 0;
background: none;
padding: 0;
font-family: inherit;
font-size: 14px;
font-weight: 600;
color: var(--ce-text);
cursor: pointer;
}
.ce-cart__coupon-toggle svg {
transition: transform 0.15s ease;
}
.ce-cart__coupon-toggle[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.ce-cart__coupon-body {
display: flex;
gap: 8px;
margin-top: 12px;
}
.ce-cart__coupon-body[hidden] {
display: none;
}
.ce-cart__coupon-input {
flex: 1;
min-width: 0;
border: 1px solid var(--ce-border);
border-radius: 8px;
padding: 9px 12px;
font-family: inherit;
font-size: 13px;
}
.ce-cart__coupon-input:focus {
outline: none;
border-color: var(--ce-green);
}
.ce-cart__coupon-apply {
border: 0;
background: var(--ce-green);
color: #fff;
font-family: inherit;
font-size: 13px;
font-weight: 600;
padding: 9px 16px;
border-radius: 8px;
cursor: pointer;
}
/* Boş sepet */
.ce-cart__emptybox {
background: #fff;
border: 1px solid var(--ce-border);
border-radius: 10px;
padding: 48px 20px;
text-align: center;
color: var(--ce-muted);
}
.ce-cart__emptybox svg {
color: var(--ce-green);
margin-bottom: 10px;
}
.ce-cart__emptybox h1 {
font-size: 20px;
font-weight: 700;
color: var(--ce-text);
margin: 0 0 6px;
}
.ce-cart__emptybox p {
font-size: 14px;
margin: 0 0 18px;
}
.ce-cart__emptybox .ce-cart__checkout {
display: inline-block;
width: auto;
padding: 12px 34px;
}
@media (max-width: 768px) {
/* Güvence: mobilde hiçbir öğe sepet sayfasını yana kaydıramaz (html +
body; yalnız body'ye vermek iOS'ta layout viewport genişlemesini
durdurmaz) */
html:has(body.woocommerce-cart) {
overflow-x: hidden;
}
body.woocommerce-cart {
overflow-x: hidden;
overflow-x: clip;
}
.ce-cart {
padding: 14px 0 30px;
}
.ce-cart__title {
font-size: 20px;
}
.ce-cart__count {
font-size: 14px;
}
/* Özet mobilde alta iner. minmax(0,1fr): kolon min-width:auto ile
geniş içeriğin (ör. kupon satırı) doğal genişliğine açılamaz */
.ce-cart__grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--ce-gap, 10px);
}
.ce-cart__items,
.ce-cart__side {
min-width: 0;
}
.ce-cart__side {
position: static;
}
/* Kupon input'u ≥16px: mobil tarayıcının odakta otomatik zoom'unu
(yana kayma görüntüsünün kaynağı) tamamen engeller */
.ce-cart__coupon-input {
font-size: 16px;
}
/* 117:130 oranı korunur, orantılı küçülür */
.ce-cart__row {
grid-template-columns: 88px minmax(0, 1fr);
gap: 12px;
padding: 14px 12px;
}
.ce-cart__thumb {
width: 88px;
}
.ce-cart__price {
grid-column: 2;
justify-self: end;
font-size: 16px;
}
.ce-cart__seller {
padding: 12px;
}
}
/* ============ Mobil konum seçimi: bottom sheet (yalnızca ≤768px) ============ */
.ce-locsheet-btn,
.ce-locsheet {
display: none;
}
body.ce-sheet-open {
overflow: hidden;
}
@media (max-width: 768px) {
/* Masaüstü inline kutu/panel/yeşil çubuk mobilde gizlenir; düğme + sheet devrede */
.ce-locwrap .ce-locbox,
.ce-locwrap .ce-locpanel,
.ce-delivery-widget .ce-locbar {
display: none !important;
}
/* Sade düğme (boş durum): açık gri zemin, gri pin + gri metin + gri ok */
.ce-locsheet-btn {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
overflow: hidden;
background: #f5f5f5;
border: 1px solid var(--ce-border);
border-radius: 12px;
padding: 9px 12px;
font-family: inherit;
font-size: 14px;
color: var(--ce-muted);
text-align: left;
cursor: pointer;
}
.ce-locsheet-btn__pin {
width: 34px;
height: 34px;
flex: 0 0 auto;
border-radius: 50%;
background: #e8e8e8;
display: flex;
align-items: center;
justify-content: center;
}
.ce-locsheet-btn__pin svg {
width: 17px;
height: 17px;
stroke: var(--ce-muted);
stroke-width: 1.8;
fill: none;
}
.ce-locsheet-btn__label {
display: block;
flex: 1 1 auto;
width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ce-locsheet-btn__chev {
width: 16px;
height: 16px;
flex: 0 0 auto;
stroke: var(--ce-muted);
stroke-width: 2;
fill: none;
}
.ce-locsheet-btn__clear {
display: none;
width: 26px;
height: 26px;
flex: 0 0 auto;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--ce-muted);
font-size: 14px;
line-height: 1;
}
.ce-locsheet-btn__clear:active {
background: #f2f4f3;
}
/* Seçili durum: yeşil zemin, beyaz metin/pin, beyaz × */
.ce-locsheet-btn.is-selected {
background: var(--ce-green);
border-color: var(--ce-green);
color: #fff;
font-weight: 600;
}
.ce-locsheet-btn.is-selected .ce-locsheet-btn__pin {
background: rgba(255, 255, 255, 0.22);
}
.ce-locsheet-btn.is-selected .ce-locsheet-btn__pin svg {
stroke: #fff;
}
.ce-locsheet-btn.is-selected .ce-locsheet-btn__chev {
display: none;
}
.ce-locsheet-btn.is-selected .ce-locsheet-btn__clear {
display: flex;
color: #fff;
background: rgba(255, 255, 255, 0.22);
}
.ce-locsheet-btn.is-selected .ce-locsheet-btn__clear:active {
background: rgba(255, 255, 255, 0.38);
}
/* Tam ekran sheet: MOBİLDE görünür olması bu medya kuralından gelir.
Masaüstünde panel yalnız .is-forced ile açılır (quick-order.css). */
.ce-locsheet:not([hidden]) {
display: block;
position: fixed;
inset: 0;
z-index: 100002;
}
}
/* ============================================================
KONUM PANELİ İÇ STİLLERİ — MEDYA KURALININ DIŞINDA
Panel iki bağlamda açılır:
- mobil: bottom-sheet (≤768px)
- masaüstü: Hızlı Sipariş popup'ının ÜSTÜNDE ortalanmış kutu
(.ce-locsheet.is-forced — quick-order.css)
Bu kurallar ≤768px bloğunun içinde kaldığında masaüstünde panel
STİLSİZ/boş açılıyordu. Panel masaüstünde varsayılan olarak zaten
display:none olduğundan bu stiller orada bir şey render etmez.
============================================================ */
.ce-locsheet__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
}
.ce-locsheet__panel {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: #fff;
display: flex;
flex-direction: column;
animation: ce-sheet-up 0.25s ease;
}
@keyframes ce-sheet-up {
from { transform: translateY(24%); opacity: 0.6; }
to { transform: translateY(0); opacity: 1; }
}
.ce-locsheet__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px var(--ce-gap, 10px) 12px;
border-bottom: 1px solid var(--ce-border);
}
.ce-locsheet__head h3 {
font-size: 16px;
font-weight: 700;
color: var(--ce-text);
margin: 0;
}
.ce-locsheet__close {
border: 0;
background: none;
font-size: 18px;
line-height: 1;
color: var(--ce-muted);
padding: 6px;
cursor: pointer;
}
.ce-locsheet__body {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 12px var(--ce-gap, 10px) 24px;
}
.ce-locsheet__warn {
background: #fff4e5;
border: 1px solid #f8dcb2;
color: #b25e09;
font-size: 13px;
line-height: 1.45;
padding: 11px 12px;
border-radius: 8px;
margin-bottom: 12px;
}
.ce-locsheet__search {
display: flex;
align-items: center;
gap: 8px;
border: 1px solid var(--ce-green);
border-radius: 10px;
padding: 12px;
}
.ce-locsheet__search svg {
width: 18px;
height: 18px;
flex: 0 0 auto;
stroke: var(--ce-green);
stroke-width: 1.8;
fill: none;
}
.ce-locsheet__search input {
flex: 1;
min-width: 0;
border: 0;
outline: none;
font-family: inherit;
font-size: 14px;
color: var(--ce-text);
}
.ce-locsheet__hint {
font-size: 12px;
color: var(--ce-muted);
line-height: 1.5;
margin: 8px 0 14px;
}
.ce-locsheet__searchwrap {
position: relative;
}
/* Öneriler: Google tarzı, input'a bitişik dropdown */
.ce-locsheet__results {
display: none;
}
.ce-locsheet__searchwrap.is-open .ce-locsheet__search {
border-radius: 10px 10px 0 0;
}
.ce-locsheet__searchwrap.is-open .ce-locsheet__results {
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 5;
margin-top: -1px;
background: #fff;
border: 1px solid var(--ce-green);
border-top-color: var(--ce-border);
border-radius: 0 0 10px 10px;
box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.12 );
max-height: 55vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.ce-locsheet__result {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
width: 100%;
border: 0;
border-bottom: 1px solid var(--ce-border);
background: none;
padding: 12px;
font-family: inherit;
text-align: left;
cursor: pointer;
}
.ce-locsheet__result:last-child {
border-bottom: 0;
}
.ce-locsheet__result strong {
font-size: 14px;
font-weight: 600;
color: var(--ce-text);
}
.ce-locsheet__result span {
font-size: 12px;
color: var(--ce-muted);
}
.ce-locsheet__result:active {
background: #f2faf6;
}
.ce-locsheet__saved h4 {
font-size: 14px;
font-weight: 700;
color: var(--ce-text);
margin: 6px 0 8px;
}
.ce-locsheet__item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
width: 100%;
border: 1px solid var(--ce-border);
border-radius: 10px;
background: #fff;
padding: 12px;
margin-bottom: 8px;
font-family: inherit;
text-align: left;
cursor: pointer;
}
.ce-locsheet__item:active {
border-color: var(--ce-green);
background: #f2faf6;
}
.ce-locsheet__item strong {
font-size: 14px;
font-weight: 600;
color: var(--ce-text);
}
.ce-locsheet__item span {
font-size: 12px;
color: var(--ce-muted);
line-height: 1.4;
}
.ce-locsheet__empty {
font-size: 13px;
color: var(--ce-muted);
line-height: 1.5;
}
.ce-locsheet__empty a {
color: var(--ce-green);
font-weight: 600;
text-decoration: none;
}
/* ---------- Konum paneli iç stilleri SONU ---------- */
/* Mobil sabit alt satın alma çubuğu (yalnızca ≤768px) */
.ce-stickybuy {
display: none;
}
@media (max-width: 768px) {
/* Sayfadaki olası yatay taşmalar sabit çubuğu kaydırmasın */
html,
body {
overflow-x: clip;
}
/* Çubuğun yüksekliği TEK KAYNAK: çubuğun ÜSTÜNDE durması gereken yüzen
öğeler (Sipariş Asistanı butonu) bu değeri okur, kendi sabitini
yazmaz. 48px buton + 10+10 dolgu + 1px üst çizgi = 69px; güvenli
alan (safe-area) buna DAHİL DEĞİL, okuyan taraf ayrıca ekler. */
:root {
--ce-stickybuy-h: 69px;
}
.ce-stickybuy {
position: fixed;
left: 0;
right: auto;
bottom: 0;
width: 100vw;
max-width: 100%;
z-index: 999;
display: flex;
align-items: center;
gap: 12px;
background: #fff;
border-top: 1px solid var(--ce-border);
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}
.ce-stickybuy__price {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}
.ce-stickybuy__disc {
background: var(--ce-danger);
color: #fff;
font-size: 14px;
font-weight: 800;
border-radius: 6px;
padding: 8px 8px;
line-height: 1;
flex-shrink: 0;
}
.ce-stickybuy__col {
display: flex;
flex-direction: column;
line-height: 1.15;
min-width: 0;
}
.ce-stickybuy__col del {
font-size: 11.5px;
color: var(--ce-muted);
font-weight: 500;
}
/* Sepet çubuğu: fiyatın üstündeki küçük gri "Toplam" etiketi */
.ce-stickybuy__label {
font-size: 11px;
font-weight: 600;
color: var(--ce-muted);
line-height: 1.2;
}
.ce-stickybuy__now {
font-size: 18px;
font-weight: 800;
color: var(--ce-text);
white-space: nowrap;
}
.ce-stickybuy__now em {
display: block;
font-style: normal;
color: var(--ce-green);
font-size: 11px;
font-weight: 700;
}
/* Sepet çubuğu: fiyat ile "& Ücretsiz Teslimat" arasına ufak nefes payı */
.woocommerce-cart .ce-stickybuy__now em {
margin-top: 4px;
}
.ce-stickybuy__btn {
margin-left: auto;
flex-shrink: 0;
height: 48px;
display: flex;
align-items: center;
padding: 0 26px;
font-size: 16px;
border-radius: 8px;
white-space: nowrap;
}
/* İçerik sabit çubuğun altında kalmasın */
body.single-product {
padding-bottom: 96px;
}
/* --- Mobil ürün sayfası düzeni --- */
/* Yan boşluk standart 10px konteynırdan gelir (--ce-container-pad) */
body.single-product .ce-main {
padding-top: 8px;
}
body.single-product .woocommerce-breadcrumb {
padding: 0;
margin-bottom: 10px;
}
/* --- Breadcrumb: mobilde ferahlat (masaüstünde zaten flex + 8px gap var) ---
Kap flex olunca metin parçaları ve › ayraçları ayrı öğe olur; gap hem
ayraçların iki yanına yatay boşluk hem de alta kayan satırlar arasına
dikey boşluk verir. */
.woocommerce-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 6px;
line-height: 1.6;
}
/* Ayraç metinden bir ton açık: hiyerarşi daha okunur olur. */
.woocommerce-breadcrumb .ce-crumbsep {
color: #b7bcb9;
}
.ce-product-extra {
padding: 0;
}
.ce-product {
grid-template-columns: 1fr;
gap: 8px;
}
.ce-gallery {
flex-direction: column;
gap: 0;
}
.ce-gallery__thumbs {
display: none;
}
/* Görsel, 10px konteynır boşluğuyla tam genişlik */
.ce-gallery__main {
border: 0;
border-radius: 12px;
}
/* Elle kaydırmalı galeri */
.ce-gallery__track {
overflow-x: auto;
scrollbar-width: none;
}
.ce-gallery__track::-webkit-scrollbar {
display: none;
}
.ce-gallery__fav {
position: absolute;
top: 10px;
right: 10px;
width: 38px;
height: 38px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
cursor: pointer;
}
.ce-gallery__fav svg {
width: 19px;
height: 19px;
fill: none;
stroke: #9a9a9a;
stroke-width: 1.8;
transition: fill 0.15s, stroke 0.15s;
}
.ce-gallery__fav.is-active svg {
fill: var(--ce-danger);
stroke: var(--ce-danger);
}
.ce-gallery__ratebadge {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 1;
display: flex;
align-items: center;
gap: 4px;
background: #fff;
border-radius: 16px;
/* Dokunma alanı parmak için yeterli kalsın (yorumlara götürür) */
min-height: 34px;
padding: 6px 12px;
font-size: 12.5px;
font-weight: 700;
color: var(--ce-text);
line-height: 1;
text-decoration: none;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
}
.ce-gallery__ratebadge:hover,
.ce-gallery__ratebadge:active {
color: var(--ce-text);
}
.ce-gallery__ratecount {
font-weight: 600;
color: var(--ce-muted);
}
/* Rozetteki 5 yıldız: masaüstüyle aynı bileşen, küçük boyutta */
.ce-gallery__stars {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.ce-gallery__stars .star-rating {
font-size: 9px;
margin: 0;
color: var(--ce-star);
}
.ce-gallery__stars .star-rating::before {
color: #d6dad8;
}
.ce-gallery__star {
color: var(--ce-star);
font-size: 14px;
}
.ce-gallery__dots {
display: flex;
justify-content: center;
gap: 6px;
padding: 8px 0 0;
}
.ce-gallery__dot {
width: 7px;
height: 7px;
border-radius: 50%;
border: 0;
padding: 0;
background: #d7d7d7;
transition: background 0.15s, width 0.15s;
}
.ce-gallery__dot.is-active {
background: var(--ce-green);
width: 18px;
border-radius: 4px;
}
/* Panel: başlık sade, fiyat gizli (fiyat sabit alt çubukta) */
.ce-panel {
gap: 12px;
padding: 0;
}
.ce-panel__head {
background: none;
border: 0;
border-radius: 0;
padding: 0;
gap: 0;
}
.ce-panel__pricerow {
display: none;
}
.ce-summary .product_title {
font-size: 20px;
}
/* Sayfa içi Sipariş Ver + favori kutusu mobilde gizli (sabit çubukta var) */
.ce-buy {
display: none;
}
/* Gün kutuları: 4 eşit sütun, dikeyde dolgun (kareye yakın), yazı ortalı */
.ce-date {
padding: 22px 4px;
gap: 5px;
}
.ce-date strong {
font-size: 12.5px;
max-width: 100%;
overflow: hidden;
}
.ce-date span {
font-size: 11px;
}
.ce-timebox__select {
font-size: 12px;
padding: 10px 26px 10px 10px;
}
/* Uzun adres/mekan adı sayfayı yatayda kaydırmasın */
body {
overflow-x: hidden;
}
.ce-main {
max-width: 100%;
}
/* Güven satırı: küçük yazı + orantılı ikon, ikisi tek satırda yan yana */
.ce-trustrow {
font-size: 10px;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 14px;
/* Sonraki bölümle ara tam 30px: 18px + panel gap 12px */
margin-bottom: 18px;
}
.ce-trustrow span {
gap: 5px;
white-space: nowrap;
}
.ce-trustrow svg {
width: 14px;
height: 14px;
}
}
@media (max-width: 480px) {
/* Buton 46px'e düşüyor: 46 + 10 + 10 + 1 = 67px. */
:root {
--ce-stickybuy-h: 67px;
}
.ce-stickybuy {
gap: 8px;
padding-left: 10px;
padding-right: 10px;
}
.ce-stickybuy__now {
font-size: 16px;
}
.ce-stickybuy__btn {
padding: 0 16px;
font-size: 15px;
height: 46px;
}
}
/* ---------- Tasarlanabilir ürün ---------- */
.ce-designbadge {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
background: var(--ce-green);
color: #fff;
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.6px;
padding: 6px 10px;
border-radius: 6px;
line-height: 1.2;
}
/* Kart varyantı: sol ALT köşe — sol üstü artık ürün kodu (SKU) rozeti,
sağ üstü favori kalbi kullanıyor; üçü de çakışmaz.
z-index 0 (temel rozetteki 2 DEĞİL): "Sepete Eklendi" örtüsü (.ce-card__added,
z-index 1) aktifken bu rozet örtünün ALTINDA kalır ve görünmez. Örtünün
ÜSTÜNDE kalacak yalnız iki öğe var — SKU rozeti (2) ve favori kalbi (3).
0 hâlâ konumlandırılmış bir katman olduğu için rozet ürün görselinin üstünde
durur; örtü kapanınca (ürün sepetten çıkınca) normal yerinde görünür.
Tek kural, tüm kart kullanımları için: büyük/küçük dikey kart (.ce-card),
yatay kart (.ce-rowcard) ve arşiv kartları aynı sınıfı kullanır. */
.ce-designbadge--card {
top: auto;
bottom: 8px;
left: 8px;
z-index: 0;
font-size: 9px;
letter-spacing: 0.4px;
padding: 4px 7px;
border-radius: 5px;
}
/* Yatay kart (Benzer Ürünler listesi): daha da kompakt, SOL ÜST köşede.
bottom: auto ZORUNLU — bu rozet .ce-designbadge--card ile birlikte
kullanılıyor ve o varyant bottom: 8px veriyor. Sıfırlanmazsa öğe hem
top hem bottom'a bağlanıp DİKEY OLARAK GERİLİR ve görseli kaplar
(yatay kartta görsel kart yüksekliği kadar uzun olduğu için mobilde
kocaman yeşil blok olarak görünüyordu). */
.ce-designbadge--row {
top: 5px;
bottom: auto;
left: 5px;
font-size: 7.5px;
padding: 3px 5px;
}
/* Arşiv kartında "İndirim!" rozetiyle üst üste binmesin */
.woocommerce ul.products li.product:has(.ce-designbadge) .onsale {
top: 38px;
}
@media (max-width: 768px) {
.ce-designbadge--card {
font-size: 8px;
padding: 3px 6px;
}
}
.ce-design-go {
margin: 0;
}
.ce-designbtn {
width: 100%;
height: 60px;
font-size: 20px;
border-radius: 8px;
}
.ce-design-note {
margin: 8px 0 0;
font-size: 12.5px;
color: var(--ce-muted);
}
/* Kişiselleştirme adımı */
.ce-design {
max-width: 1100px;
margin: 0 auto;
}
.ce-design__title {
font-size: 24px;
font-weight: 800;
margin: 8px 0 20px;
}
.ce-design__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 24px;
align-items: start;
}
.ce-design__form {
background: #fff;
border: 1px solid var(--ce-border);
border-radius: 10px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 16px;
}
.ce-design__field {
margin: 0;
}
.ce-design__field label {
display: block;
font-weight: 600;
font-size: 14px;
margin-bottom: 6px;
color: var(--ce-text);
}
.ce-req {
color: var(--ce-danger);
}
.ce-design__field input,
.ce-design__field textarea {
width: 100%;
border: 1px solid #cfcfcf;
border-radius: 8px;
padding: 11px 12px;
font-family: inherit;
font-size: 14px;
color: var(--ce-text);
outline: none;
resize: vertical;
}
.ce-design__field input:focus,
.ce-design__field textarea:focus {
border-color: var(--ce-green);
}
.ce-design__hint {
display: block;
font-size: 12px;
color: var(--ce-muted);
margin-top: 4px;
}
/* Zorunlu alan / limit uyarısı: alanın ALTINDA, checkout alanlarıyla aynı dil. */
.ce-design__err {
display: block;
margin-top: 5px;
font-size: 12.5px;
line-height: 1.4;
color: var(--ce-danger, #e0234e);
}
.ce-design__err[hidden] {
display: none;
}
.ce-design__field.is-invalid input,
.ce-design__field.is-invalid textarea {
border-color: var(--ce-danger, #e0234e);
}
/* Sağ sütun: üstte Devam Et, altında "Ürün Bilgisi" başlığı + sade kart */
.ce-design__side {
display: flex;
flex-direction: column;
gap: 14px;
}
.ce-design__infotitle {
margin: 6px 0 0;
font-size: 17px;
font-weight: 800;
color: var(--ce-text);
text-align: left;
}
.ce-design__product {
background: #fff;
border: 1px solid var(--ce-border);
border-radius: 12px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
.ce-design__product img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 8px;
display: block;
margin: 0 auto;
}
.ce-design__product span {
font-size: 14px;
font-weight: 600;
color: var(--ce-text);
line-height: 1.4;
text-align: left;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ce-design__submit {
width: 100%;
height: 52px;
font-size: 17px;
border-radius: 8px;
}
@media (max-width: 768px) {
.ce-design__grid {
grid-template-columns: 1fr;
}
.ce-design__title {
font-size: 20px;
}
}
/* Sekmeler + ilgili ürünler */
.ce-product-extra {
margin-top: 48px;
}
.ce-related {
margin-top: 40px;
/* Bölüm ile sonrasında gelen içerik arası boşluk */
margin-bottom: 30px;
}
/* Benzer ürünler: masaüstünde dikey kart GRID'i, mobilde yatay liste */
.ce-related__mobile {
display: none;
}
.ce-cardgrid__title {
font-size: 22px;
font-weight: 800;
margin: 0 0 16px;
color: var(--ce-text);
}
.ce-cardgrid__items {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
}
@media (max-width: 768px) {
.ce-related__desktop {
display: none;
}
.ce-related__mobile {
display: block;
}
/* Benzer Seçenekler başlığı: 12px ve ortalı (yalnız mobil liste) */
.ce-related__mobile .ce-rowlist__title {
font-size: 12px;
text-align: center;
}
/* Yorumlar başlığı: mobilde 12px (hiza mevcut haliyle) */
.ce-product-extra .woocommerce-Reviews-title {
font-size: 12px;
}
}
/* SIRALAMA (masaüstü + mobil): Benzer Seçenekler, Ürün Açıklaması'nın HEMEN
arkasına gelir. Değerlendirme vb. paneller sekme sarmalayıcısının içinde
olduğundan hook ile araya girilemez; sarmalayıcı display:contents yapılıp
tüm bölümler tek flex bağlamında order ile dizilir. DOM sırası değişmez. */
.ce-product-extra {
display: flex;
flex-direction: column;
}
.ce-product-extra > .woocommerce-tabs {
display: contents;
}
.ce-product-extra .woocommerce-tabs ul.tabs {
order: 0;
}
/* Diğer paneller (değerlendirmeler, ek bilgiler) en sona */
.ce-product-extra .woocommerce-tabs .woocommerce-Tabs-panel {
order: 4;
}
.ce-product-extra .woocommerce-tabs .woocommerce-Tabs-panel--description {
order: 1;
}
.ce-product-extra .woocommerce-tabs .ce-desc-more {
order: 2;
}
.ce-product-extra > .ce-related {
order: 3;
}
/* ---------- Yorumlar bölümü: kart görünümlü form + yıldızlı puanlama ---------- */
#reviews #review_form_wrapper {
background: #fff;
border: 1px solid var(--ce-border);
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
padding: 24px;
margin-top: 16px;
}
#reviews .comment-reply-title {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--ce-text);
margin-bottom: 16px;
}
#reviews .comment-form label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--ce-text);
margin-bottom: 6px;
}
#reviews .comment-form p {
margin: 0 0 14px;
}
/* Rating select gizli ama DOM'da (name="rating" WooCommerce'a gider) */
#reviews .comment-form-rating .ce-rating-select {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* Yıldızlar: klasik altın sarısı, hover/seçimde dolar */
.ce-stars {
display: flex;
gap: 4px;
}
.ce-star {
border: 0;
background: none;
padding: 2px;
line-height: 0;
cursor: pointer;
}
.ce-star svg {
width: 28px;
height: 28px;
fill: none;
stroke: #c9c9c9;
stroke-width: 1.5;
transition: fill 0.12s, stroke 0.12s;
}
.ce-star.is-filled svg,
.ce-star.is-hover svg {
fill: #f5a623;
stroke: #f5a623;
}
/* Alanlar: tam genişlik, odakta marka yeşili çerçeve */
#reviews .comment-form textarea,
#reviews .comment-form input[type="text"],
#reviews .comment-form input[type="email"],
#reviews .comment-form input[type="url"] {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--ce-border);
border-radius: 8px;
padding: 11px 12px;
font-family: inherit;
font-size: 14px;
color: var(--ce-text);
background: #fff;
outline: none;
transition: border-color 0.15s;
}
#reviews .comment-form textarea {
min-height: 120px;
resize: vertical;
}
#reviews .comment-form textarea:focus,
#reviews .comment-form input[type="text"]:focus,
#reviews .comment-form input[type="email"]:focus,
#reviews .comment-form input[type="url"]:focus {
border-color: var(--ce-green);
}
/* Çerez onayı satırı: kutucuk + metin yan yana */
#reviews .comment-form-cookies-consent {
display: flex;
align-items: flex-start;
gap: 8px;
}
#reviews .comment-form-cookies-consent label {
display: inline;
font-weight: 400;
font-size: 12.5px;
color: var(--ce-muted);
margin: 0;
}
/* Gönder butonu: yeşil dolgu, sağa hizalı (mobilde tam genişlik) */
#reviews .form-submit {
display: flex;
justify-content: flex-end;
margin: 4px 0 0;
}
#reviews .comment-form .submit {
background: var(--ce-green);
color: #fff;
border: 0;
border-radius: 8px;
padding: 12px 30px;
font-family: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background 0.15s;
}
#reviews .comment-form .submit:hover {
background: var(--ce-green-dark);
}
/* Boş durum metni: sade ve gri */
#reviews .woocommerce-noreviews {
font-size: 13px;
color: var(--ce-muted);
margin: 0 0 6px;
}
/* Yorum listesi (çiçeksepeti düzeni): tüm liste tek kart, satırlar arası
ince ayraç. Solda yıldız + maskeli isim + şehir + tarih, sağda gri
zeminli yorum kutusu + Faydalı butonu. */
#reviews .commentlist {
list-style: none;
margin: 0 0 18px;
padding: 0;
background: #fff;
border: 1px solid var(--ce-border);
border-radius: 10px;
overflow: hidden;
}
#reviews .commentlist li.ce-review {
padding: 16px;
margin: 0;
border-bottom: 1px solid var(--ce-border);
}
#reviews .commentlist li.ce-review:last-child {
border-bottom: 0;
}
.ce-review__side {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
margin-bottom: 10px;
}
.ce-review__side .ce-stars--static .ce-star svg {
width: 18px;
height: 18px;
}
.ce-review__side .ce-stars--static .ce-star:not(.is-filled) svg {
stroke: #d9d9d9;
}
.ce-review__name {
font-size: 14px;
font-weight: 700;
color: var(--ce-text);
}
.ce-review__city {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--ce-muted);
}
.ce-review__date {
font-size: 12px;
color: var(--ce-muted);
}
.ce-review__text {
background: #f5f5f5;
border-radius: 10px;
padding: 20px;
font-size: 14px;
line-height: 1.65;
color: var(--ce-text);
}
.ce-review__text p {
margin: 0 0 8px;
}
.ce-review__text p:last-child {
margin-bottom: 0;
}
.ce-review__actions {
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
.ce-review__helpful {
display: inline-flex;
align-items: center;
gap: 6px;
background: #fff;
border: 1px solid var(--ce-border);
border-radius: 8px;
padding: 7px 14px;
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
color: var(--ce-muted);
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.ce-review__helpful:hover {
border-color: var(--ce-green);
color: var(--ce-green);
}
/* Beğenilmiş durum: yeşil vurgu + dolu başparmak */
.ce-review__helpful.is-liked {
border-color: var(--ce-green);
color: var(--ce-green);
background: #f2faf6;
}
.ce-review__helpful.is-liked svg {
fill: currentColor;
}
.ce-review__helpful:disabled {
opacity: 0.6;
cursor: default;
}
/* Mobil-özel yorum öğeleri masaüstünde hiç görünmez */
.ce-review__mtop,
.ce-review__mbottom,
.ce-review__more,
.ce-review__text--short {
display: none;
}
.ce-review__helpful svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
flex-shrink: 0;
}
/* Masaüstü: sol dar sütun (~180px) + sağ geniş sütun YAN YANA.
WooCommerce çekirdek CSS'i (.woocommerce #reviews #comments ol.commentlist li)
iki id ile daha özgül olduğundan seçiciler aynı güçte yazıldı; hücreler
grid-column/row ile açıkça sabitlendi — içerik yanlış hücreye düşemez. */
@media (min-width: 769px) {
/* Dış kart: içeriğe nefes payı + diğer bölümlerle rahat dikey boşluk */
#reviews .commentlist {
padding: 30px;
margin: 24px 0;
}
.woocommerce #reviews #comments ol.commentlist li.ce-review,
#reviews .commentlist li.ce-review {
display: grid;
grid-template-columns: 180px 1fr;
grid-auto-flow: row;
gap: 24px;
align-items: start;
position: relative;
/* Yan boşluğu dış kart verir; tam-genişlik alt çizgi masaüstünde kapalı */
padding: 20px 0;
border-bottom: 0;
width: 100%;
box-sizing: border-box;
}
#reviews .commentlist li.ce-review:first-child {
padding-top: 0;
}
#reviews .commentlist li.ce-review:last-child {
padding-bottom: 0;
}
/* Ayırıcı: yalnız yorumların ARASINDA — kenarlara değmeyen, uçları
yumuşayan ince çizgi + ortada minik romb vurgusu */
.woocommerce #reviews #comments ol.commentlist li.ce-review + li.ce-review::before,
#reviews .commentlist li.ce-review + li.ce-review::before {
content: "";
position: absolute;
top: 0;
left: 24px;
right: 24px;
height: 1px;
background: linear-gradient(to right, transparent, var(--ce-border) 15%, var(--ce-border) 85%, transparent);
}
.woocommerce #reviews #comments ol.commentlist li.ce-review + li.ce-review::after,
#reviews .commentlist li.ce-review + li.ce-review::after {
content: "";
position: absolute;
top: -2px;
left: 50%;
width: 5px;
height: 5px;
background: var(--ce-border);
transform: translateX(-50%) rotate(45deg);
}
.woocommerce #reviews #comments ol.commentlist li.ce-review > .ce-review__side,
#reviews .commentlist li.ce-review > .ce-review__side {
grid-column: 1;
grid-row: 1;
margin: 0;
}
.woocommerce #reviews #comments ol.commentlist li.ce-review > .ce-review__main,
#reviews .commentlist li.ce-review > .ce-review__main {
grid-column: 2;
grid-row: 1;
min-width: 0;
width: auto;
margin: 0;
}
/* Faydalı butonu: metin kutusunun altında, sağa yaslı */
.ce-review__actions {
justify-content: flex-end;
}
.ce-review__helpful {
margin-left: auto;
}
}
@media (max-width: 768px) {
#reviews #review_form_wrapper {
padding: 16px;
}
#reviews .comment-form .submit {
width: 100%;
}
/* --- Mobil yorum listesi (çiçeksepeti düzeni): tek sütun, kartlı --- */
.woocommerce #reviews #comments ol.commentlist,
#reviews .commentlist {
border: 0;
border-radius: 0;
overflow: visible;
margin: 0 0 14px;
}
/* Her yorum KENDİ KARTINDA: açık gri zemin, yuvarlak köşe; ayrım
çizgiyle değil kartlar arası boşlukla (referanstaki gibi).
Seçici, WooCommerce çekirdeğinin iki ID'li kuralıyla
(.woocommerce #reviews #comments ol.commentlist li { background:0 0;
padding:0; margin:0 0 20px }) AYNI zinciri kullanır — özgüllük eşit,
tema CSS'i sonra yüklendiği için kazanır. */
.woocommerce #reviews #comments ol.commentlist li.ce-review,
#reviews .commentlist li.ce-review {
position: relative;
background: #f7f7f7;
border-radius: 10px;
padding: 16px;
margin: 0 0 12px;
border: 0;
}
.woocommerce #reviews #comments ol.commentlist li.ce-review:last-child,
#reviews .commentlist li.ce-review:last-child {
margin-bottom: 0;
}
/* Masaüstü blokları mobilde gizli */
#reviews .commentlist .ce-review__side,
#reviews .commentlist .ce-review__actions {
display: none;
}
/* Üst satır: yıldız solda, tarih sağda — aynı satırda dikey ortalı */
.ce-review__mtop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.ce-review__mtop .ce-stars {
gap: 3px;
align-items: center;
}
.ce-review__mtop .ce-stars--static .ce-star {
padding: 0;
display: flex;
align-items: center;
}
.ce-review__mtop .ce-stars--static .ce-star svg {
width: 19px;
height: 19px;
display: block;
}
/* Referanstaki gibi: boş yıldızlar kontur değil, DOLU açık gri */
.ce-review__mtop .ce-stars--static .ce-star:not(.is-filled) svg {
fill: #d9d9d9;
stroke: #d9d9d9;
}
.ce-review__mtop .ce-review__date {
font-size: 12.5px;
color: #8b8b8b;
white-space: nowrap;
line-height: 1;
}
/* Metin: düz blok (gri kutu yok), referanstaki orta gri ton;
uzun yorumda 3 satır + "Devamını Oku" */
.ce-review__text {
background: none;
border-radius: 0;
padding: 0;
font-size: 14px;
line-height: 1.5;
color: #5f5f5f;
}
/* Kapalı hal: kısa sürüm (280 kr, kelime sonunda "…") görünür, tam gizli;
"Devamını Oku" ile yer değiştirirler */
#reviews .commentlist li.ce-review--clamp:not(.is-open) .ce-review__text--full {
display: none;
}
#reviews .commentlist li.ce-review--clamp:not(.is-open) .ce-review__text--short {
display: block;
}
#reviews .commentlist li.ce-review--clamp .ce-review__more {
display: inline-block;
background: none;
border: 0;
padding: 0;
margin-top: 6px;
color: var(--ce-green);
font-family: inherit;
font-size: 14px;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
/* Alt satır: üstünde kart İÇİ ince ayırıcı (metinle arası 12px, isimle
arası 12px); solda ikon + isim | bölge, sağda Faydalı — TEK satır */
.ce-review__mbottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #e8e8e8;
font-size: 12.5px;
color: #9b9b9b;
letter-spacing: 0.02em;
}
.ce-review__muserwrap {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.ce-review__usericon {
width: 15px;
height: 15px;
fill: #b3b3b3;
stroke: #b3b3b3;
stroke-width: 1;
flex-shrink: 0;
}
.ce-review__muser {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Sade Faydalı: zeminsiz/çerçevesiz, gri başparmak + gri sayı */
.ce-review__helpful--m {
background: none;
border: 0;
border-radius: 0;
padding: 4px 4px;
gap: 5px;
font-size: 12.5px;
color: #9b9b9b;
min-height: 32px;
align-items: center;
}
.ce-review__helpful--m:not(.is-liked) svg {
width: 15px;
height: 15px;
fill: #b3b3b3;
stroke: #b3b3b3;
stroke-width: 1;
}
/* Beğenilmiş: yalnız ikon dolgusu yeşilleşir — kutu/zemin yok */
.ce-review__helpful--m.is-liked {
background: none;
border: 0;
color: var(--ce-green);
}
.ce-review__helpful--m.is-liked svg {
width: 15px;
height: 15px;
fill: currentColor;
stroke: currentColor;
stroke-width: 1;
}
}
/* ---------- Sipariş detayı: ürün başına değerlendirme ---------- */
.ce-orev {
margin-top: 28px;
}
.ce-orev__title {
font-size: 18px;
font-weight: 800;
color: var(--ce-text);
margin: 0 0 14px;
}
.ce-orev__item {
background: #fff;
border: 1px solid var(--ce-border);
border-radius: 10px;
padding: 16px;
margin-bottom: 12px;
}
.ce-orev__prod {
/* inline-flex: link yalnız görsel + ad genişliğinde — satırın geri kalan
boşluğu tıklanabilir değildir (blok flex tüm satırı kaplıyordu) */
display: inline-flex;
max-width: 100%;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--ce-text);
font-size: 14px;
font-weight: 600;
margin-bottom: 12px;
}
.ce-orev__prod img {
width: 56px;
height: 56px;
object-fit: cover;
border-radius: 8px;
flex-shrink: 0;
}
.ce-orev__form {
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.ce-orev__form .ce-stars {
margin: 0;
}
.ce-orev__form textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--ce-border);
border-radius: 8px;
padding: 11px 12px;
font-family: inherit;
font-size: 14px;
color: var(--ce-text);
min-height: 80px;
resize: vertical;
outline: none;
transition: border-color 0.15s;
}
.ce-orev__form textarea:focus {
border-color: var(--ce-green);
}
.ce-orev__msg {
margin: 0;
font-size: 12.5px;
font-weight: 600;
color: var(--ce-danger);
}
.ce-orev__submit {
background: var(--ce-green);
color: #fff;
border: 0;
border-radius: 8px;
padding: 11px 26px;
font-family: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background 0.15s;
}
.ce-orev__submit:hover {
background: var(--ce-green-dark);
}
.ce-orev__submit:disabled {
opacity: 0.6;
cursor: default;
}
/* Daha önce değerlendirilmiş ürün: statik yıldız + kendi yorumu */
.ce-stars--static .ce-star {
cursor: default;
padding: 0;
}
.ce-stars--static .ce-star svg {
width: 20px;
height: 20px;
}
.ce-orev__donetext {
margin: 6px 0 2px;
font-size: 13.5px;
font-weight: 600;
color: var(--ce-text);
}
.ce-orev__quote {
margin: 0;
font-size: 13px;
color: var(--ce-muted);
}
/* Sipariş listesindeki "Değerlendir" rozeti yeşil olsun */
.woocommerce-MyAccount-content .button.ce-review {
background: var(--ce-green);
color: #fff;
}
@media (max-width: 768px) {
.ce-orev__item {
padding: 14px;
}
.ce-orev__submit {
width: 100%;
}
}
/* Benzer Seçenekler başlığı: SADECE masaüstünde 21px ve ortalı */
@media (min-width: 769px) {
.ce-related__desktop .ce-cardgrid__title {
font-size: 21px;
text-align: center;
}
/* Yorumlar başlığı: masaüstünde 21px ve ortalı */
.ce-product-extra .woocommerce-Reviews-title {
font-size: 21px;
text-align: center;
}
}
/* ---------- Yatay ürün kartı listesi (Benzer Ürünler) ---------- */
.ce-rowlist__title {
font-size: 22px;
font-weight: 800;
margin: 0 0 14px;
color: var(--ce-text);
}
.ce-rowlist__items {
display: flex;
flex-direction: column;
gap: 10px;
}
.ce-rowcard {
display: flex;
align-items: stretch;
gap: 14px;
min-height: 118px;
background: #fff;
border: 1px solid var(--ce-border);
border-radius: 10px;
padding: 0;
overflow: hidden;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
color: var(--ce-text);
transition: box-shadow 0.15s;
}
.ce-rowcard:hover {
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.1);
color: var(--ce-text);
}
/* Görsel: kartın sol tarafını üstten alta TAM kaplar (kenarlara yapışık) */
.ce-rowcard__img {
position: relative;
width: 38%;
min-width: 118px;
max-width: 190px;
align-self: stretch;
flex-shrink: 0;
border-radius: 0;
overflow: hidden;
line-height: 0;
background: var(--ce-bg-soft);
}
.ce-rowcard__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
margin: 0;
}
.ce-rowcard__fav {
position: absolute;
top: 5px;
right: 5px;
width: 26px;
height: 26px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
cursor: pointer;
}
.ce-rowcard__fav svg {
width: 13px;
height: 13px;
fill: none;
stroke: #9a9a9a;
stroke-width: 1.8;
transition: fill 0.15s, stroke 0.15s;
}
.ce-rowcard__fav.is-active svg {
fill: var(--ce-danger);
stroke: var(--ce-danger);
}
/* İç boşluk sadece sağ bilgi bölümünde */
.ce-rowcard__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 7px;
padding: 12px 14px 12px 0;
}
.ce-rowcard__title {
font-size: 14px;
font-weight: 600;
color: var(--ce-text);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ce-rowcard__ship {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 700;
color: var(--ce-green);
line-height: 1.2;
}
.ce-rowcard__ship svg {
width: 15px;
height: 15px;
fill: none;
stroke: var(--ce-green);
stroke-width: 1.7;
flex-shrink: 0;
}
.ce-rowcard__rating {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--ce-muted);
min-height: 16px;
}
.ce-rowcard__rating .star-rating {
font-size: 12px;
margin: 0;
}
.ce-rowcard__rating em {
font-style: normal;
}
.ce-rowcard__pricerow {
display: flex;
align-items: center;
gap: 8px;
line-height: 1.2;
}
.ce-rowcard__disc {
background: var(--ce-danger);
color: #fff;
font-size: 12px;
font-weight: 800;
border-radius: 4px;
padding: 3px 6px;
line-height: 1;
}
.ce-rowcard__pricerow del {
font-size: 12.5px;
font-weight: 500;
color: var(--ce-muted);
}
.ce-rowcard__price {
font-size: 17px;
font-weight: 800;
color: var(--ce-text);
}
.woocommerce div.product .woocommerce-tabs ul.tabs,
.ce-product-extra .woocommerce-tabs ul.tabs {
list-style: none;
display: flex;
padding: 0;
margin: 0 0 20px;
border-bottom: 2px solid var(--ce-border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.ce-product-extra .woocommerce-tabs ul.tabs::before {
display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.ce-product-extra .woocommerce-tabs ul.tabs li {
list-style: none;
background: none;
border: 0;
border-radius: 0;
margin: 0;
padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.ce-product-extra .woocommerce-tabs ul.tabs li::before,
.ce-product-extra .woocommerce-tabs ul.tabs li::after {
display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.ce-product-extra .woocommerce-tabs ul.tabs li a {
display: block;
padding: 10px 18px;
font-weight: 700;
color: var(--ce-muted);
border-bottom: 3px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.ce-product-extra .woocommerce-tabs ul.tabs li.active a {
color: var(--ce-green);
border-bottom-color: var(--ce-green);
}
.woocommerce .related.products > h2,
.woocommerce .up-sells > h2 {
font-size: 22px;
margin-bottom: 18px;
}
/* ---------- Hesabım (My Account) ---------- */
/* Izgara, nav+içeriğin GERÇEK ebeveynine uygulanır (aradaki sarmalayıcı ne olursa olsun) */
.woocommerce-account .ce-main *:has(> .woocommerce-MyAccount-navigation) {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 24px;
align-items: start;
}
.woocommerce-account .ce-main .woocommerce-notices-wrapper {
grid-column: 1 / -1;
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
float: none !important;
width: auto !important;
}
/* Yerleşimi açıkça sabitle: nav sol sütun, içerik sağ sütun */
.woocommerce-account .woocommerce-MyAccount-navigation {
grid-column: 1;
grid-row: 1;
}
.woocommerce-account .woocommerce-MyAccount-content {
grid-column: 2;
grid-row: 1;
}
/* Sol menü */
.woocommerce-MyAccount-navigation {
background: #fff;
border: 1px solid var(--ce-border);
border-radius: 12px;
overflow: hidden;
}
.woocommerce-MyAccount-navigation ul {
list-style: none;
margin: 0;
padding: 8px;
}
.woocommerce-MyAccount-navigation li {
margin: 2px 0;
}
.woocommerce-MyAccount-navigation li a {
display: flex;
align-items: center;
gap: 11px;
padding: 11px 12px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: var(--ce-text);
transition: background 0.12s, color 0.12s;
}
.woocommerce-MyAccount-navigation li a::before {
content: "";
width: 19px;
height: 19px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: var(--icon) no-repeat center / contain;
mask: var(--icon) no-repeat center / contain;
}
.woocommerce-MyAccount-navigation li a:hover {
background: #f5f5f5;
}
.woocommerce-MyAccount-navigation li.is-active a {
background: var(--ce-green-light);
color: var(--ce-green-dark);
font-weight: 700;
}
.woocommerce-MyAccount-navigation-link--dashboard a { --icon: url('data:image/svg+xml;utf8,'); }
.woocommerce-MyAccount-navigation-link--orders a { --icon: url('data:image/svg+xml;utf8,'); }
.woocommerce-MyAccount-navigation-link--indirimlerim a { --icon: url('data:image/svg+xml;utf8,'); }
.woocommerce-MyAccount-navigation-link--adreslerim a { --icon: url('data:image/svg+xml;utf8,'); }
.woocommerce-MyAccount-navigation-link--favorilerim a { --icon: url('data:image/svg+xml;utf8,'); }
.woocommerce-MyAccount-navigation-link--edit-account a { --icon: url('data:image/svg+xml;utf8,'); }
.woocommerce-MyAccount-navigation-link--customer-logout a { --icon: url('data:image/svg+xml;utf8,'); }
/* Masaüstü sol nav (çiçeksepeti referansı): çerçevesiz beyaz zemin,
seyrek dizilmiş tam genişlik yuvarlak pill satırlar. Varsayılan gri
ikon + koyu etiket; hover'da aktiften daha soft açık yeşil dolgu ve
yeşil ikon; aktifte açık yeşil dolgu + yeşil semibold etiket.
Mobil çip şeridi (≤900px) yukarıdaki taban stillerle aynen kalır. */
@media (min-width: 901px) {
.woocommerce-MyAccount-navigation {
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
}
.woocommerce-MyAccount-navigation ul {
padding: 0;
}
.woocommerce-MyAccount-navigation li {
margin: 8px 0;
}
.woocommerce-MyAccount-navigation li a {
padding: 15px 18px;
border-radius: 999px;
transition: background 0.18s, color 0.18s;
}
.woocommerce-MyAccount-navigation li a::before {
background-color: var(--ce-muted);
transition: background-color 0.18s;
}
.woocommerce-MyAccount-navigation li a:hover {
background: rgba(18, 161, 80, 0.07);
}
.woocommerce-MyAccount-navigation li a:hover::before {
background-color: var(--ce-green);
}
.woocommerce-MyAccount-navigation li.is-active a {
background: var(--ce-green-light);
color: var(--ce-green);
font-weight: 600;
}
.woocommerce-MyAccount-navigation li.is-active a::before {
background-color: var(--ce-green);
}
/* Çıkış: yıkıcı/ayrı bir aksiyon olduğu için yeşil değil, aynı
yumuşaklıkta kırmızı — açık zemin + koyu metin/ikon dengesi
diğer öğelerdeki aktif yeşille birebir aynı orandadır.
Aktif durumda da yeşile dönmez. Yalnız masaüstü sol nav
(mobil çip şeridi bu media query'nin dışında, etkilenmez). */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout.is-active a {
background: #fdeaec;
color: #d64550;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a::before,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout.is-active a::before {
background-color: #d64550;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
background: #f8dcdf;
color: #c0392b;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover::before {
background-color: #c0392b;
}
}
/* Sağ içerik */
.woocommerce-MyAccount-content {
background: #fff;
border: 1px solid var(--ce-border);
border-radius: 12px;
padding: 26px;
min-height: 320px;
}
.woocommerce-MyAccount-content > p:first-of-type {
margin-top: 0;
}
/* Siparişlerim bileşenleri (ce-ord__*) hariç: onların link renkleri kendi
stillerinden gelir — aksi halde dolu yeşil "Detay" butonunda yazı da
yeşile boyanıp görünmez oluyordu. */
/* Kupon kartındaki "Sipariş Ver" hariç: bu genel kural yüksek özgüllüklü
olduğu için hover'da yazıyı yeşile zorluyor ve yeşil zeminde metin
kayboluyordu; buton kendi renklerini kullanır. */
.woocommerce-MyAccount-content a:not(.ce-btn):not(.button):not([class*="ce-ord__"]):not(.ce-cpn__order) {
color: var(--ce-green);
font-weight: 600;
}
.woocommerce-MyAccount-content table.shop_table {
border: 1px solid var(--ce-border);
border-radius: 10px;
border-collapse: separate;
border-spacing: 0;
width: 100%;
}
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
padding: 12px 14px;
border-bottom: 1px solid #f0f0f0;
text-align: left;
}
/* (Eski pano özet kartı stilleri kaldırıldı — pano ce-dash-* kullanır.) */
/* İndirimlerim kupon kartı */
/* =========================================================
İNDİRİMLERİM (Kuponlarım) — sarı kampanya şeridi, 3 sekme,
bilet görünümlü kupon kartları. Veri WooCommerce kuponlarından
gelir (salt görüntüleme).
========================================================= */
/* Sarı kampanya şeridi */
.ce-cpn__promo {
display: flex;
align-items: center;
gap: 18px;
background: #ffc72c;
border-radius: 12px;
padding: 16px 22px;
margin-bottom: 20px;
}
.ce-cpn__promo-icon {
flex-shrink: 0;
width: 64px;
height: 48px;
display: block;
}
.ce-cpn__promo-icon svg {
width: 100%;
height: 100%;
fill: #fff;
stroke: #e0a800;
stroke-width: 1.5;
stroke-linejoin: round;
}
.ce-cpn__promo p {
margin: 0;
font-size: 16px;
font-weight: 600;
color: var(--ce-text);
line-height: 1.45;
}
.ce-cpn__promo a {
color: var(--ce-text);
font-weight: 700;
text-decoration: underline;
}
/* Sekmeler */
.ce-cpn__tabs {
display: flex;
gap: 26px;
border-bottom: 1px solid var(--ce-border);
margin-bottom: 20px;
overflow-x: auto;
scrollbar-width: none;
}
.ce-cpn__tabs::-webkit-scrollbar {
display: none;
}
.ce-cpn__tab {
background: none;
border: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
padding: 10px 2px;
font-family: inherit;
font-size: 14.5px;
font-weight: 600;
color: var(--ce-muted);
white-space: nowrap;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
.ce-cpn__tab:hover {
color: var(--ce-text);
}
.ce-cpn__tab.is-active {
color: var(--ce-green);
border-bottom-color: var(--ce-green);
}
.ce-cpn__sectitle {
margin: 0 0 16px;
font-size: 18px;
font-weight: 800;
color: var(--ce-text);
}
.ce-cpn__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
/* Bilet kartı: üst/alt yarım, aradaki kesikli çizgide yarım daire çentikler
(çentik rengi sayfa zemini = beyaz) */
.ce-cpn__card {
position: relative;
background: #fdf3d9;
border: 1px solid #f3dca2;
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.ce-cpn__top {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 14px 14px 16px;
/* Artan yükseklik üst bölüme gider → tutar satırı ve tarih şeridi
yan yana kartlarda aynı hizada kalır. */
flex: 1 1 auto;
}
.ce-cpn__shop {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 8px;
background: #fff;
border: 1px solid #f0dcae;
display: flex;
align-items: center;
justify-content: center;
}
.ce-cpn__shop svg {
width: 18px;
height: 18px;
fill: none;
stroke: var(--ce-text);
stroke-width: 1.6;
stroke-linejoin: round;
}
.ce-cpn__info {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.ce-cpn__name {
font-size: 14.5px;
font-weight: 700;
color: var(--ce-text);
overflow-wrap: anywhere;
}
.ce-cpn__scope {
font-size: 13px;
color: #6f6550;
}
.ce-cpn__min {
font-size: 12.5px;
color: #8a7c5e;
}
/* Kesikli ayraç + çentikler */
.ce-cpn__mid {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
padding: 14px;
border-top: 1px dashed #d9c188;
}
.ce-cpn__mid::before,
.ce-cpn__mid::after {
content: "";
position: absolute;
top: -9px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--ce-bg);
border: 1px solid #f3dca2;
}
.ce-cpn__mid::before {
left: -9px;
}
.ce-cpn__mid::after {
right: -9px;
}
.ce-cpn__amount {
font-size: 17px;
font-weight: 800;
color: var(--ce-text);
}
.ce-cpn__actions {
display: flex;
align-items: center;
gap: 8px;
}
/* Kupon kodu + kopyala */
.ce-cpn__copy {
display: inline-flex;
align-items: center;
gap: 5px;
max-width: 150px;
background: #fff;
border: 1px dashed #cbb47e;
border-radius: 6px;
padding: 5px 8px;
font-family: inherit;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.3px;
color: #7a6a45;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.ce-cpn__copy:hover {
border-color: var(--ce-green);
color: var(--ce-green-dark);
}
.ce-cpn__copy svg {
width: 13px;
height: 13px;
flex-shrink: 0;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linejoin: round;
}
.ce-cpn__copytext {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ce-cpn__copy.is-copied {
border-color: var(--ce-green);
color: var(--ce-green-dark);
border-style: solid;
}
.ce-cpn__order {
flex-shrink: 0;
border: 1px solid var(--ce-green);
border-radius: 6px;
padding: 7px 14px;
font-size: 13px;
font-weight: 700;
color: var(--ce-green);
background: #fff;
transition: background 0.15s, color 0.15s;
}
/* Hover: dolu yeşil zemin + BEYAZ yazı (metin zemine karışmasın) */
.ce-cpn__order:hover,
.ce-cpn__order:focus-visible {
background: var(--ce-green);
color: #fff;
}
/* Alt gri şerit: tarih + (i) */
.ce-cpn__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 14px;
background: #f2f2f2;
border-top: 1px solid #e6e6e6;
font-size: 12.5px;
color: var(--ce-muted);
}
.ce-cpn__tipwrap {
position: relative;
flex-shrink: 0;
}
.ce-cpn__infobtn {
width: 20px;
height: 20px;
border-radius: 50%;
border: 0;
background: #cfcfcf;
color: #fff;
font-family: inherit;
font-size: 12px;
font-weight: 700;
line-height: 20px;
padding: 0;
cursor: pointer;
transition: background 0.15s;
}
.ce-cpn__infobtn:hover,
.ce-cpn__infobtn[aria-expanded="true"] {
background: var(--ce-green);
}
.ce-cpn__tip {
position: absolute;
right: 0;
bottom: 28px;
z-index: 5;
width: 240px;
display: flex;
flex-direction: column;
gap: 5px;
background: #fff;
border: 1px solid var(--ce-border);
border-radius: 8px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
padding: 10px 12px;
font-size: 12px;
line-height: 1.5;
color: var(--ce-text);
text-align: left;
}
/* Kullanılmış / süresi dolmuş kartlar soluk */
.ce-cpn__card--used,
.ce-cpn__card--expired {
opacity: 0.72;
}
/* Boş durum */
.ce-cpn__empty {
text-align: center;
padding: 40px 20px;
color: var(--ce-muted);
}
.ce-cpn__empty svg {
width: 46px;
height: 46px;
fill: none;
stroke: #d8d8d8;
stroke-width: 1.4;
stroke-linejoin: round;
margin-bottom: 10px;
}
.ce-cpn__empty p {
margin: 0;
font-size: 14.5px;
}
@media (max-width: 1100px) {
.ce-cpn__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
/* Kartlar tam genişlik alt alta */
.ce-cpn__grid {
grid-template-columns: 1fr;
}
.ce-cpn__promo {
gap: 12px;
padding: 14px 16px;
}
.ce-cpn__promo-icon {
width: 46px;
height: 34px;
}
.ce-cpn__promo p {
font-size: 14px;
}
.ce-cpn__tabs {
gap: 18px;
}
.ce-cpn__order {
padding: 9px 16px;
}
/* Tam genişlik kartta kod kısaltmaya gerek yok */
.ce-cpn__copy {
max-width: none;
}
.ce-cpn__tip {
width: min(260px, calc(100vw - 60px));
}
}
/* Adreslerim */
.ce-addr__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.ce-addr__lead {
margin: 0;
font-size: 13.5px;
color: var(--ce-muted);
max-width: 480px;
}
.ce-addr__new {
flex-shrink: 0;
padding: 10px 18px;
font-size: 14px;
}
.ce-addr__empty {
background: #fafafa;
border: 1px dashed #d5d5d5;
border-radius: 10px;
padding: 22px;
text-align: center;
color: var(--ce-muted);
font-size: 14px;
}
.ce-addr__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.ce-addr__card {
border: 1px solid var(--ce-border);
border-radius: 12px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 6px;
background: #fff;
}
.ce-addr__card.is-default {
border-color: var(--ce-green);
box-shadow: 0 0 0 1px var(--ce-green);
}
.ce-addr__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.ce-addr__title {
font-size: 12px;
font-weight: 700;
color: var(--ce-muted);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.ce-addr__badge {
background: var(--ce-green);
color: #fff;
font-size: 11px;
font-weight: 700;
border-radius: 10px;
padding: 2px 9px;
}
.ce-addr__name {
font-size: 15px;
color: var(--ce-text);
}
.ce-addr__line {
font-size: 13px;
color: var(--ce-muted);
line-height: 1.45;
}
.ce-addr__note {
font-size: 12.5px;
color: var(--ce-muted);
font-style: italic;
}
.ce-addr__actions {
display: flex;
gap: 14px;
margin-top: 8px;
padding-top: 10px;
border-top: 1px solid #f0f0f0;
font-size: 13px;
}
.ce-addr__actions a {
font-weight: 700;
color: var(--ce-green);
}
.ce-addr__actions .ce-addr__delete {
color: var(--ce-danger);
}
/* Adres formu */
.ce-addr__formtitle {
margin: 0;
font-size: 18px;
font-weight: 800;
}
.ce-addr__back {
font-size: 13.5px;
font-weight: 600;
color: var(--ce-green);
}
.ce-addr__form p {
margin: 0 0 14px;
}
.ce-addr__form label {
display: block;
font-size: 13.5px;
font-weight: 600;
margin-bottom: 5px;
color: var(--ce-text);
}
.ce-addr__form input[type="text"],
.ce-addr__form input[type="tel"],
.ce-addr__form textarea {
width: 100%;
border: 1px solid #cfcfcf;
border-radius: 8px;
padding: 10px 12px;
font-family: inherit;
font-size: 14px;
outline: none;
}
.ce-addr__form input:focus,
.ce-addr__form textarea:focus {
border-color: var(--ce-green);
}
.ce-addr__row--2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.ce-addr__row--2 p {
margin: 0 0 14px;
}
.ce-addr__defaultrow label {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
cursor: pointer;
}
.ce-addr__save {
padding: 13px 28px;
font-size: 15px;
}
/* Ödeme sayfası adres seçici */
.ce-checkout-picker label {
font-weight: 700;
display: block;
margin-bottom: 6px;
}
.ce-checkout-picker select {
width: 100%;
border: 1.5px solid var(--ce-green);
border-radius: 8px;
padding: 10px 12px;
font-family: inherit;
}
/* Hesabım responsive */
@media (max-width: 900px) {
/* minmax(0,1fr): içerik kolonu min-width:auto ile geniş içeriğin
(ör. filtre çipleri) doğal genişliğine açılıp ekranı taşıramaz */
.woocommerce-account .ce-main *:has(> .woocommerce-MyAccount-navigation) {
grid-template-columns: minmax(0, 1fr);
}
.woocommerce-account .woocommerce-MyAccount-content {
min-width: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
grid-column: 1;
grid-row: 1;
}
.woocommerce-account .woocommerce-MyAccount-content {
grid-column: 1;
grid-row: 2;
}
/* Mobilde menü az yer kaplasın: yatay, tek satır, KENDİ İÇİNDE kaydırılan
çip şeridi (masaüstünde dikey sol menü aynen kalır) */
.woocommerce-MyAccount-navigation ul {
display: flex;
overflow-x: auto;
gap: 4px;
padding: 8px;
scrollbar-width: none;
}
.woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
display: none;
}
.woocommerce-MyAccount-navigation li {
flex-shrink: 0;
margin: 0;
}
.woocommerce-MyAccount-navigation li a {
white-space: nowrap;
padding: 9px 12px;
}
.ce-addr__grid {
grid-template-columns: 1fr;
}
.ce-addr__row--2 {
grid-template-columns: 1fr;
gap: 0;
}
}
/* ---------- Footer (çok sütunlu) ---------- */
.ce-footer {
background: var(--ce-bg-soft);
border-top: 1px solid var(--ce-border);
margin-top: 48px;
font-size: 14px;
}
.ce-footer__top {
padding: 40px 0 32px;
}
.ce-footer__grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.3fr 1.4fr;
gap: 36px;
}
.ce-footer__col h4 {
margin: 0 0 14px;
font-size: 14px;
font-weight: 800;
color: var(--ce-text);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.ce-footer__col ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.ce-footer__col ul a {
color: var(--ce-muted);
font-size: 13.5px;
transition: color 0.15s;
}
.ce-footer__col ul a:hover {
color: var(--ce-green);
}
/* Marka sütunu */
.ce-footer__logo {
display: inline-flex;
margin-bottom: 12px;
font-size: 24px;
}
.ce-footer__logo .custom-logo {
max-height: 40px;
width: auto;
}
.ce-footer__desc {
margin: 0 0 16px;
color: var(--ce-muted);
font-size: 13.5px;
line-height: 1.6;
max-width: 300px;
}
.ce-footer__social {
display: flex;
gap: 10px;
}
.ce-footer__social a {
width: 36px;
height: 36px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--ce-border);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, border-color 0.15s;
}
.ce-footer__social svg {
width: 17px;
height: 17px;
fill: var(--ce-muted);
transition: fill 0.15s;
}
.ce-footer__social a:hover {
background: var(--ce-green);
border-color: var(--ce-green);
}
.ce-footer__social a:hover svg {
fill: #fff;
}
/* İletişim sütunu */
.ce-footer__contact li {
display: flex;
align-items: flex-start;
gap: 9px;
color: var(--ce-muted);
font-size: 13.5px;
line-height: 1.5;
}
.ce-footer__contact svg {
width: 17px;
height: 17px;
flex-shrink: 0;
fill: none;
stroke: var(--ce-green);
stroke-width: 1.7;
margin-top: 1px;
}
/* Bülten */
.ce-footer__col--news p {
margin: 0 0 12px;
color: var(--ce-muted);
font-size: 13.5px;
line-height: 1.55;
}
.ce-footer__newsletter {
display: flex;
gap: 8px;
}
.ce-footer__newsletter input {
flex: 1;
min-width: 0;
border: 1px solid #cfcfcf;
border-radius: 8px;
padding: 10px 12px;
font-size: 13.5px;
font-family: inherit;
outline: none;
background: #fff;
}
.ce-footer__newsletter input:focus {
border-color: var(--ce-green);
}
.ce-footer__newsletter .ce-btn {
padding: 10px 18px;
font-size: 13.5px;
flex-shrink: 0;
}
/* Alt şerit */
.ce-footer__bottom {
border-top: 1px solid var(--ce-border);
padding: 16px 0;
font-size: 13px;
color: var(--ce-muted);
}
.ce-footer__bottomrow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.ce-footer__copy {
flex-shrink: 0;
}
.ce-footer__pay {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.ce-paybadge {
background: #fff;
border: 1px solid var(--ce-border);
border-radius: 6px;
padding: 5px 12px;
font-size: 11.5px;
font-weight: 700;
color: var(--ce-muted);
letter-spacing: 0.3px;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 30px;
}
.ce-paybadge--visa { color: #1a1f71; }
.ce-paybadge--mc { color: #eb001b; }
.ce-paybadge--troy { color: #0f6cbd; }
.ce-paybadge--amex { color: #2e77bb; }
/* Özelleştirici'den yüklenen rozet görselleri: yazılı rozetlerle aynı
yükseklikte, oranı korunur; şerit gerektiğinde alta sarar. */
.ce-paybadge--img {
padding: 4px 8px;
}
.ce-paybadge__img {
display: block;
height: 20px;
width: auto;
max-width: 92px;
object-fit: contain;
}
.ce-paybadge--taksit {
color: var(--ce-green-dark);
background: var(--ce-green-light);
border-color: var(--ce-green-light);
}
.ce-paybadge--ssl {
color: var(--ce-green-dark);
background: var(--ce-green-light);
border-color: var(--ce-green-light);
}
.ce-paybadge--ssl svg {
width: 15px;
height: 15px;
fill: none;
stroke: var(--ce-green-dark);
stroke-width: 1.8;
}
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.ce-product {
grid-template-columns: 1fr;
gap: 24px;
}
.ce-header__inner {
flex-wrap: wrap;
gap: 12px;
}
.ce-search {
order: 3;
flex-basis: 100%;
max-width: none;
}
.ce-actions {
margin-left: auto;
gap: 16px;
}
.ce-topbar__links {
display: none;
}
/* Mobil: grid yerine eski flex akışı (ce-tm-* görünürlük kuralları ve
"ikisi alt alta" modu bu akışa göre çalışır) */
.ce-topbar__inner {
display: flex;
justify-content: center;
}
.ce-footer__grid {
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.ce-footer__col--brand {
grid-column: 1 / -1;
}
}
@media (max-width: 600px) {
.ce-hero {
padding: 36px 20px;
}
.ce-hero h1 {
font-size: 25px;
}
/* ---- Mobil footer: tek sütun + her şey ortalanır ----
Masaüstü/tablet düzeni (sola hizalı, çok sütunlu) etkilenmez. */
.ce-footer__grid {
grid-template-columns: 1fr;
gap: 24px;
text-align: center;
}
/* Logo: inline-flex kutusu ortalanır */
.ce-footer__logo {
justify-content: center;
align-self: center;
}
.ce-footer__col--brand {
display: flex;
flex-direction: column;
align-items: center;
}
.ce-footer__desc {
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.ce-footer__social {
justify-content: center;
}
/* İletişim: ikon + metin ikilisi tek satırda ortalı blok gibi dursun */
.ce-footer__contact li {
justify-content: center;
align-items: center;
}
.ce-footer__contact svg {
margin-top: 0;
}
/* Bülten formu: input üstte tam genişlik, buton altında tam genişlik
(yan yana sıkışıp taşmasın; buton metni Özelleştirici'den uzatılsa da) */
.ce-footer__newsletter {
flex-direction: column;
gap: 10px;
}
.ce-footer__newsletter input,
.ce-footer__newsletter .ce-btn {
width: 100%;
}
.ce-footer__bottomrow {
flex-direction: column;
justify-content: center;
text-align: center;
}
.ce-footer__pay {
justify-content: center;
}
.ce-action span {
display: none;
}
.ce-topbar__tabs,
.ce-action__caret {
display: none;
}
.ce-topbar__promo {
white-space: normal;
font-size: 13px;
padding: 8px 0;
}
.ce-summary .product_title {
font-size: 20px;
}
.ce-pricebox__now {
font-size: 24px;
}
.ce-favbox__text {
display: none;
}
}
/* ---------- Mobil header (çiçeksepeti düzeni) ---------- */
/* Mobil-only öğeler masaüstünde yok */
.ce-mnav-toggle,
.ce-search-toggle,
.ce-topbar__close,
.ce-mnav {
display: none;
}
body.ce-mnav-open {
overflow: hidden;
}
@media (max-width: 768px) {
/* Üst şerit: ince tek satır, solda × (masaüstündeki 60px burada geçersiz) */
.ce-topbar__inner {
justify-content: center;
min-height: 0;
}
.ce-topbar__promo {
position: relative;
width: 100%;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
padding: 7px 26px;
}
.ce-topbar__close {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
border: 0;
background: none;
color: inherit;
font-size: 12px;
line-height: 1;
cursor: pointer;
padding: 0;
}
/* Ana bar: solda ☰, ortada logo, sağda büyüteç + sepet — hepsi aynı
yatay eksende dikey ortalı; kompakt yükseklik, eşit kenar boşluğu */
.ce-header__inner {
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 8px 12px;
min-height: 56px;
}
.ce-header {
border-bottom: 1px solid var(--ce-border);
}
.ce-mnav-toggle {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 44px;
height: 44px;
border: 0;
background: none;
cursor: pointer;
padding: 0;
flex-shrink: 0;
}
/* Ferah hamburger: ~24px genişlikte 3 eşit aralıklı ince çizgi,
koyu renk, yuvarlak uçlar. İki ikon üst üste durur; menü açılınca
☰ yumuşakça ×'e döner. */
.ce-mnav-toggle svg {
position: absolute;
left: 50%;
top: 50%;
width: 28px;
height: 28px;
stroke: #444;
stroke-width: 1.9;
stroke-linecap: round;
fill: none;
transform: translate(-50%, -50%);
transition: opacity 0.22s ease-out, transform 0.22s ease-out;
}
.ce-mnav-toggle .ce-mnav-toggle__x {
opacity: 0;
transform: translate(-50%, -50%) rotate(-90deg);
}
body.ce-mnav-open .ce-mnav-toggle .ce-mnav-toggle__bars {
opacity: 0;
transform: translate(-50%, -50%) rotate(90deg);
}
body.ce-mnav-open .ce-mnav-toggle .ce-mnav-toggle__x {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg);
}
/* Menü açıkken itilen header karartmanın üstünde kalsın: × net görünür
ve doğrudan tıklanabilir (toggle kapatır). Header'ın beyaz zemini ve
ayraç çizgisi bu durumda ŞEFFAF yapılır — × karanlık overlay üzerinde
kutu/çıkıntı olmadan durur. */
body.ce-mnav-open .ce-header {
position: relative;
z-index: 1300;
background: transparent;
border-bottom-color: transparent;
box-shadow: none;
}
/* × butonu: tamamen şeffaf zemin (dokunma alanı 44x44 padding'le korunur),
ikon beyaz — koyu overlay üzerinde net okunur */
body.ce-mnav-open .ce-mnav-toggle {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
body.ce-mnav-open .ce-mnav-toggle svg {
stroke: #fff;
}
.ce-logo {
flex: 1;
min-width: 0;
justify-content: center;
font-size: 20px;
}
.ce-logo svg {
width: 24px;
height: 24px;
}
.ce-logo .custom-logo {
max-height: 36px;
}
/* Arama kutusu gizli; büyüteçle açılır (tam satır) */
.ce-search {
display: none;
}
.ce-search.is-open {
display: block;
order: 4;
flex-basis: 100%;
max-width: none;
}
/* Favorilerim / Siparişlerim / Hesabım üst bardan kalkar (menüde);
büyüteç + sepet dikey ortalı, dengeli aralıklı */
.ce-actions {
margin-left: 0;
gap: 8px;
flex-shrink: 0;
display: flex;
align-items: center;
}
.ce-actions .ce-action {
display: none;
}
.ce-search-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 0;
background: none;
cursor: pointer;
padding: 0;
}
.ce-search-toggle svg {
width: 22px;
height: 22px;
fill: var(--ce-text);
}
.ce-cart-btn {
width: 42px;
height: 42px;
}
/* Yatay kategori menüsü mobilde gizli (yan menüye taşındı) */
.ce-nav {
display: none;
}
/* Yan menü: soldan açılan tam yükseklik panel */
.ce-mnav:not([hidden]) {
display: block;
position: fixed;
inset: 0;
z-index: 1200;
}
/* Overlay yumuşak fade ile gelir/gider */
.ce-mnav__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
transition: opacity 0.28s ease-out;
}
.ce-mnav.is-open .ce-mnav__overlay {
opacity: 1;
}
/* Push efekti: panel açılırken sayfa içeriği de birlikte sağa itilir */
body > *:not(.ce-mnav):not(#wpadminbar) {
transition: transform 0.28s ease-out;
}
body.ce-mnav-open > *:not(.ce-mnav):not(#wpadminbar) {
transform: translateX(min(80vw, 360px));
}
/* Panel soldan kayarak açılır, ters yönde kayarak kapanır */
.ce-mnav__panel {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 80%;
max-width: 360px;
background: #fff;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* Panel sonuna gelince kaydırma hareketi arkadaki sayfaya geçmesin */
overscroll-behavior: contain;
padding: 14px 14px 28px;
box-shadow: 2px 0 18px rgba(0, 0, 0, 0.18);
transform: translateX(-100%);
transition: transform 0.28s ease-out;
}
.ce-mnav.is-open .ce-mnav__panel {
transform: translateX(0);
}
/* 3'lü hızlı erişim kutuları */
.ce-mnav__quick {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-bottom: 18px;
}
.ce-mnav__qitem {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
border: 1px solid var(--ce-border);
border-radius: 10px;
padding: 12px 4px;
text-decoration: none;
color: var(--ce-text);
font-size: 11.5px;
font-weight: 600;
text-align: center;
}
.ce-mnav__qitem svg {
width: 22px;
height: 22px;
stroke: var(--ce-green);
stroke-width: 1.7;
fill: none;
}
.ce-mnav__title {
font-size: 14px;
font-weight: 700;
color: var(--ce-text);
margin: 0 0 10px;
}
/* 3 sütunlu görselli kategori grid'i */
.ce-mnav__cats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px 8px;
margin-bottom: 18px;
}
/* Kategori kartı: tatlı kare çerçeve — içinde kare görsel + ortalı ad */
.ce-mnav__cat {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-decoration: none;
color: var(--ce-text);
min-width: 0;
background: #fff;
border: 1px solid #ececec;
border-radius: 12px;
padding: 7px 7px 9px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.04);
}
.ce-mnav__cat:active {
border-color: #cde8d9;
}
.ce-mnav__catimg {
display: block;
width: 100%;
aspect-ratio: 1;
border-radius: 9px;
overflow: hidden;
background: #f5f5f5;
}
.ce-mnav__catimg img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ce-mnav__catname {
font-size: 11.5px;
font-weight: 600;
text-align: center;
line-height: 1.3;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Alt satırlar: Bize Ulaşın, Giriş/Çıkış */
.ce-mnav__row {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 2px;
border-top: 1px solid var(--ce-border);
text-decoration: none;
color: var(--ce-text);
font-size: 13.5px;
font-weight: 600;
}
.ce-mnav__row svg {
width: 20px;
height: 20px;
stroke: var(--ce-green);
stroke-width: 1.7;
fill: none;
flex-shrink: 0;
}
}
/* ---------- Anasayfa: "En Son Favoriye Eklediğiniz Ürünler" şeridi ----------
Ortak raf bileşeninin (ce-shelf) KOMPAKT hali: aynı kart, masaüstünde tam
8 kart/görünüm. Genişlik raf formülüyle esnek hesaplanır:
kart = (100% - 7×gap) / 8 — 8. kart taşmadan sığar, fazlası kaydırılır. */
.ce-favstrip .ce-shelf__track {
--ce-cards: 8;
--ce-card-gap: 10px;
}
/* Kart bileşeni burada da AYNEN kullanılır (ürün adı, puan, fiyat, butonlar
dahil). Dar karta göre küçülme widgets.css'teki @container kurallarından
gelir — burada ayrıca ölçü ezmeye gerek yok. */
@media (max-width: 768px) {
.ce-favstrip .ce-shelf__track {
/* Mobil: 2.4 kart görünür (kesirli değer kaydırılabilirliği belli eder) */
--ce-cards: 2.4;
--ce-card-gap: 10px;
}
}
/* ---------- Hesabım > Favorilerim: anasayfa kartlarıyla responsive grid ---------- */
/* WC çekirdek clearfix'i (.woocommerce-account .woocommerce::before/::after,
content:" " display:table) grid'de GERÇEK bir hücreye dönüşüp 1. kutuyu
işgal ediyordu — kartlar sağa kayıyordu. Aynı özgüllükle kapatılır.
(woocommerce sınıfı kalıyor: karttaki .star-rating stili ona bağlı.) */
.woocommerce-account .ce-favgrid::before,
.woocommerce-account .ce-favgrid::after,
.ce-favgrid::before,
.ce-favgrid::after {
content: none;
display: none;
}
.ce-favgrid {
display: grid;
/* Alana sığan kadar eşit sütun; SOL kenardan başlar, sağda düzensiz boşluk yok */
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
/* satır arası 24px, sütun arası 20px */
gap: 24px 20px;
align-items: start;
justify-content: start;
justify-items: stretch;
width: 100%;
margin: 0;
padding: 0;
text-align: left;
}
/* Kart bileşeni anasayfadakiyle AYNI — yalnız DIŞ ölçüsü grid hücresine uyar
(raftaki flex-basis ölçüsü burada geçersiz kılınır) */
.ce-favgrid .ce-card {
width: 100%;
flex: initial;
min-width: 0;
}
/* (Kartların altları .ce-card__actions{margin-top:auto} ile hizalanır) */
@media (max-width: 768px) {
.ce-favgrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 12px;
}
}
/* ---------- Sepetten çıkarma onay popup'ı ---------- */
.ce-rmodal:not([hidden]) {
position: fixed;
inset: 0;
z-index: 1400;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.ce-rmodal__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
}
.ce-rmodal__box {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
background: #fff;
border-radius: 14px;
padding: 30px 22px 22px;
width: 100%;
max-width: 340px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.ce-rmodal__close {
position: absolute;
top: 6px;
right: 6px;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 0;
background: none;
cursor: pointer;
padding: 0;
}
.ce-rmodal__close svg {
width: 17px;
height: 17px;
stroke: #8b8b8b;
stroke-width: 1.8;
stroke-linecap: round;
fill: none;
}
.ce-rmodal__icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: #f1f1f1;
}
.ce-rmodal__icon svg {
width: 26px;
height: 26px;
stroke: var(--ce-muted);
stroke-width: 1.6;
stroke-linecap: round;
fill: none;
}
.ce-rmodal__title {
margin: 0 0 4px;
font-size: 15px;
font-weight: 600;
color: var(--ce-text);
line-height: 1.5;
}
.ce-rmodal__fav,
.ce-rmodal__del {
width: 100%;
border-radius: 8px;
padding: 13px;
font-family: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.ce-rmodal__fav {
background: var(--ce-green);
color: #fff;
border: 0;
}
.ce-rmodal__fav:hover {
background: var(--ce-green-dark);
}
.ce-rmodal__del {
background: #fff;
color: var(--ce-text);
border: 1px solid var(--ce-border);
}
.ce-rmodal__del:hover {
border-color: #b5b5b5;
}
/* Sepet: adet kontrolü ("− 1 +") HİÇBİR görünümde yok (masaüstü + mobil).
Yalnızca görsel gizleme — display:none input yine form/AJAX ile gönderilir;
miktar 1 kalır, ara toplam doğru hesaplanır, ürün silme (×) çalışır. */
.ce-cart__qty {
display: none;
}
/* Sepet MOBİL: "Teslimat Adresi" ve tasarım alanı ("Ürüne Eklenecek Harf" vb.)
satırları yalnızca görsel olarak gizlenir — veri sepet öğesinde durur,
checkout/sipariş akışına aynen taşınır. Masaüstünde görünmeye devam eder. */
@media (max-width: 768px) {
.ce-cart__meta {
display: none;
}
/* Sipariş Özeti kartı mobilde gizli — yerine alta sabit satın alma çubuğu.
(Ara Toplam satırı da bu kartın içinde; veri hesaplanmaya devam eder.)
"İndirim Kodu Kullan" kutusu ayrı blok, sayfada kalır. */
.ce-cart__summary {
display: none;
}
/* Son içerik (İndirim Kodu) sabit çubuğun arkasında kalmasın */
.woocommerce-cart .ce-main {
padding-bottom: 92px;
}
}
/* ---------- Mobil: Ürün Açıklaması kısaltma + tam ekran panel ---------- */
/* Masaüstünde bu öğeler hiç görünmez; açıklama tam uzunlukta kalır */
.ce-desc-more,
.ce-descmodal {
display: none;
}
@media (max-width: 768px) {
/* Kapalı hal: PHP'de ~500 görünür karakterde kesilmiş sürüm gösterilir;
yükseklik kesimi yok, fade + buton aynı yerleşimde */
.woocommerce-Tabs-panel--description.ce-desc-collapsed {
position: relative;
}
.woocommerce-Tabs-panel--description.ce-desc-collapsed::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 70px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
pointer-events: none;
}
/* Tam genişlik, yeşil çerçeveli beyaz buton */
.ce-desc-more {
display: block;
width: 100%;
margin: 10px 0 0;
padding: 12px;
background: #fff;
border: 1.5px solid var(--ce-green);
border-radius: 10px;
color: var(--ce-green);
font-family: inherit;
font-size: 14px;
font-weight: 700;
text-align: center;
cursor: pointer;
}
.ce-desc-more[hidden] {
display: none;
}
/* Panel katmanı: header'ın altından başlar; header net görünmeye devam eder.
--ce-desc-top JS'te açılış anında header'ın alt kenarından ölçülür. */
.ce-descmodal:not([hidden]) {
display: block;
position: fixed;
inset: 0;
z-index: 1250;
}
/* Karartma: header'ın hemen altından ekranın dibine; sayfa ve sabit
Sipariş Ver çubuğu koyulaşmış halde görünür, tıklanınca panel kapanır */
.ce-descmodal__overlay {
position: absolute;
top: var(--ce-desc-top, 0px);
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.28s ease-out;
}
.ce-descmodal.is-open .ce-descmodal__overlay {
opacity: 1;
}
/* Beyaz panel: header + 14px boşluk altından başlar, üst köşeler yuvarlak,
alttan yukarı kayarak açılır; yükseklik boşluğa göre calc ile daralır */
.ce-descmodal__panel {
position: absolute;
left: 0;
right: 0;
top: calc(var(--ce-desc-top, 0px) + 14px);
height: calc(100dvh - var(--ce-desc-top, 0px) - 14px);
display: flex;
flex-direction: column;
background: #fff;
border-radius: 16px 16px 0 0;
overflow: hidden;
transform: translateY(100%);
transition: transform 0.28s ease-out;
}
.ce-descmodal.is-open .ce-descmodal__panel {
transform: translateY(0);
}
/* Sabit başlık şeridi: ortada başlık, sağda ×, altta ince ayraç */
.ce-descmodal__head {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 14px 52px;
background: #fff;
border-bottom: 1px solid var(--ce-border);
}
.ce-descmodal__head h3 {
margin: 0;
font-size: 15px;
font-weight: 700;
color: var(--ce-text);
}
.ce-descmodal__close {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 0;
background: transparent;
cursor: pointer;
padding: 0;
}
.ce-descmodal__close svg {
width: 22px;
height: 22px;
stroke: var(--ce-text);
stroke-width: 1.9;
stroke-linecap: round;
fill: none;
}
/* Kaydırılabilir içerik: tam açıklama HTML'i, biçim korunur */
.ce-descmodal__body {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding: 14px 16px 32px;
font-size: 14px;
line-height: 1.65;
color: var(--ce-text);
}
/* Panel başlığı zaten üst şeritte; kopyalanan içerikteki ilk başlığı gizle */
.ce-descmodal__body > h2:first-child {
display: none;
}
.ce-descmodal__body ul,
.ce-descmodal__body ol {
padding-left: 20px;
margin: 10px 0;
}
}
/* =========================================================
ÇOK ADIMLI CHECKOUT (ce-co-*): sade header + stepper +
adım kartları + sabit sipariş özeti. Yalnız checkout
sayfasında kullanılır (woocommerce/checkout-steps.php).
========================================================= */
.ce-co-body {
background: #fff;
font-family: var(--ce-font);
color: var(--ce-text);
}
/* --- Sade üst bar: yalnız logo, ortada --- */
.ce-co-header {
display: flex;
justify-content: center;
align-items: center;
padding: 16px var(--ce-container-pad);
border-bottom: 1px solid #f0f0f0;
}
.ce-co-header__logo img {
max-height: 52px;
width: auto;
display: block;
}
.ce-co-header__logo {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: var(--ce-green);
font-size: 26px;
font-weight: 700;
}
.ce-co-header__logo svg {
width: 34px;
height: 34px;
fill: var(--ce-green);
}
/* --- Sayfa düzeni --- */
.ce-co {
max-width: var(--ce-container-width);
margin: 0 auto;
padding: 22px var(--ce-container-pad) 60px;
}
/* Yalnız adım göstergesini taşır; gösterge kendi başına ortalanır (eskiden
sol "Geri Dön" linkini dengelemek için 1fr auto 1fr grid ve sağda görünmez
bir dolgu vardı — ikisi de kalktı). */
.ce-co__topbar {
display: flex;
justify-content: center;
align-items: flex-start;
margin-bottom: 26px;
}
/* --- Stepper --- */
.ce-co-stepper {
display: flex;
align-items: flex-start;
list-style: none;
margin: 0;
padding: 0;
}
.ce-co-stepper__step {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 108px;
text-align: center;
}
/* Noktalar arası çizgi */
.ce-co-stepper__step + .ce-co-stepper__step::before {
content: "";
position: absolute;
top: 9px;
right: calc(50% + 14px);
width: calc(100% - 28px);
height: 2px;
background: #e2e4e8;
border-radius: 2px;
}
.ce-co-stepper__step.is-done + .ce-co-stepper__step::before,
.ce-co-stepper__step.is-active::before {
background: var(--ce-green);
}
.ce-co-stepper__dot {
width: 19px;
height: 19px;
border-radius: 50%;
background: #d4d7dc;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 0 rgba(18, 161, 80, 0.15);
transition: background 0.2s, box-shadow 0.2s;
}
.ce-co-stepper__dot svg {
width: 11px;
height: 11px;
stroke: #fff;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0;
}
.ce-co-stepper__step.is-active .ce-co-stepper__dot {
background: var(--ce-green);
box-shadow: 0 0 0 4px rgba(18, 161, 80, 0.15);
}
.ce-co-stepper__step.is-done .ce-co-stepper__dot {
background: var(--ce-green);
}
.ce-co-stepper__step.is-done .ce-co-stepper__dot svg {
opacity: 1;
}
.ce-co-stepper__step.is-done {
cursor: pointer;
}
.ce-co-stepper__name {
font-size: 12.5px;
font-weight: 500;
line-height: 1.3;
color: #a5aab1;
max-width: 92px;
}
.ce-co-stepper__step.is-active .ce-co-stepper__name,
.ce-co-stepper__step.is-done .ce-co-stepper__name {
color: var(--ce-green);
font-weight: 600;
}
/* --- Ana ızgara: form + özet --- */
.ce-co__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 28px;
align-items: start;
}
.ce-co-card {
background: #fff;
border: 1px solid #ececec;
border-radius: 12px;
padding: 24px 26px;
}
.ce-co-card__title {
margin: 0 0 16px;
font-size: 16.5px;
font-weight: 600;
color: var(--ce-text);
}
/* --- Form alanları --- */
.ce-co-field {
margin-bottom: 14px;
}
.ce-co-field input[type="text"],
.ce-co-field input[type="tel"],
.ce-co-field textarea {
width: 100%;
border: 1px solid #dcdfe3;
border-radius: 10px;
padding: 13px 14px;
font: 400 13.5px/1.45 var(--ce-font);
color: var(--ce-text);
background: #fff;
transition: border-color 0.15s, box-shadow 0.15s;
}
.ce-co-field textarea {
resize: vertical;
min-height: 96px;
}
.ce-co-field input::placeholder,
.ce-co-field textarea::placeholder {
color: #9aa0a6;
}
.ce-co-field input:focus,
.ce-co-field textarea:focus,
.ce-co-select:focus-within {
outline: none;
border-color: var(--ce-green);
box-shadow: 0 0 0 3px rgba(18, 161, 80, 0.1);
}
/* Kutulu select: içinde küçük gri etiket + değer (referans görseldeki gibi).
Gerçek