/* =========================================== * Berberoglu Cay — Tema CSS * Header polishi + Footer arkaplan * =========================================== */ /* === HEADER === */ /* Ust duyuru cubugu — yumusak parlama animasyonu */ .shop-custom-html--header-announcement > div { background: linear-gradient(90deg, #1f6b2d 0%, #2a8438 50%, #1f6b2d 100%) !important; background-size: 200% 100% !important; animation: bcAnnouncementShine 8s linear infinite; } @keyframes bcAnnouncementShine { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } } /* Ana header — sade beyaz arka plan + alta yumusak yesil cizgi */ .shop-header { background: linear-gradient(to bottom, #ffffff 0%, #fbfcf7 100%); border-bottom: 1px solid rgba(74, 137, 64, 0.15) !important; box-shadow: 0 2px 12px rgba(31, 107, 45, 0.06); } /* Logo — biraz daha cesur typography */ .shop-header .shop-block--logo { display: flex; align-items: center; } .shop-header .shop-block--logo a { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; color: oklch(0.28 0.08 145); } /* Menu — yatay alani genislet, hover'da yumusak alti cizgi */ .shop-header .shop-block--menu { margin-left: 24px; } .shop-header .shop-block--menu nav a { position: relative; padding: 6px 10px !important; font-weight: 500; color: oklch(0.32 0.04 150); transition: color 0.2s; } .shop-header .shop-block--menu nav a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: oklch(0.46 0.13 142); transform: scaleX(0); transform-origin: center; transition: transform 0.25s ease-out; } .shop-header .shop-block--menu nav a:hover { color: oklch(0.36 0.13 142); } .shop-header .shop-block--menu nav a:hover::after { transform: scaleX(1); } /* Arama cubugu — yesil odak halkasi */ .shop-header .shop-block--search-bar input { background: rgba(245, 247, 237, 0.55) !important; border: 1.5px solid rgba(74, 137, 64, 0.18) !important; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; border-radius: 10px !important; } .shop-header .shop-block--search-bar input:focus { background: #ffffff !important; border-color: oklch(0.46 0.13 142) !important; box-shadow: 0 0 0 3px rgba(47, 138, 62, 0.15) !important; outline: none; } /* Sag taraf — user/cart hover */ .shop-header .shop-block--user-menu a, .shop-header .shop-block--mini-cart a { border-radius: 8px; transition: background 0.2s, color 0.2s; } .shop-header .shop-block--user-menu a:hover, .shop-header .shop-block--mini-cart a:hover { background: rgba(74, 137, 64, 0.08) !important; color: oklch(0.36 0.13 142); } /* Mini cart badge — primary renk */ .shop-header .shop-block--mini-cart [class*="badge"], .shop-header .shop-block--mini-cart .rounded-full { background: oklch(0.46 0.13 142) !important; color: #fff !important; } /* === HEADING FONT === */ /* Kurumsal italic serif — Cormorant Garamond. Tum h1-h6'lar ve marka basliklari italic, hafif tracking ile elegan duruyor. */ h1, h2, h3, h4, h5, h6, .shop-heading-italic { font-family: var(--font-shop-heading); font-style: italic; font-weight: 600; letter-spacing: -0.005em; } /* === FOOTER === Modern editorial layout: - Krem gradient + soluk watercolor cay yapragi pattern (OpenAI uretimi) - Ust kenarda ince dalga gecisi - Sag ust kosede animasyonlu stilize cay dali - Solda buyuk italik brand mark, sagda uppercase tracking'li link kolonlari */ .shop-footer { position: relative; border: 0; /* Katmanlar (ust → alt): 1) gradient overlay — tarla ve patterni cok soluk yapar 2) tarla illustrasyonu — alt kenarda yerlesik, ana arka plan vurgusu 3) watercolor cay yapragi pattern — uzerine hafif texture 4) duz krem fallback */ background: linear-gradient(to bottom, rgba(238, 243, 223, 0.94) 0%, rgba(212, 221, 188, 0.9) 100%), url("/theme-assets/tarla-banner.webp") bottom center / 100% auto no-repeat, url("/theme-assets/footer-pattern.webp") center / cover no-repeat, #eef3df; color: oklch(0.22 0.05 145); margin-top: 64px; overflow: hidden; } /* Ince yumusak dalga ust gecis */ .shop-footer::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 28px; pointer-events: none; transform: translateY(-100%); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: 100% 100%; } /* Sag ust kose — stilize cay dali, hafif sallaniyor */ .shop-footer::after { content: ""; position: absolute; top: 20px; right: 28px; width: 110px; height: 150px; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: contain; transform-origin: 55px 145px; animation: bcFooterLeaf 7s ease-in-out infinite; opacity: 0.9; z-index: 0; } @keyframes bcFooterLeaf { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } } @media (max-width: 1024px) { .shop-footer::after { width: 80px; height: 110px; top: 14px; right: 14px; opacity: 0.55; } } .shop-footer__cols { position: relative; z-index: 1; } /* Buyuk italik brand mark — Cormorant Garamond */ .shop-footer__brand { font-family: var(--font-shop-heading); font-style: italic; font-weight: 600; letter-spacing: -0.015em; color: oklch(0.26 0.09 145); } /* Kolon basliklari — sade uppercase, tracking'li */ .shop-footer__col p { color: oklch(0.32 0.06 145); } .shop-footer__bar { position: relative; z-index: 1; background: rgba(74, 124, 60, 0.15); border-top: 1px solid rgba(74, 124, 60, 0.25); color: oklch(0.28 0.08 145); } /* === BILDIRIM (Sonner toast) — magaza temasi === */ /* Root Toaster richColors aktif; magaza icin yumusak yesil/kirmizi'ya override */ [data-sonner-toaster] { /* Sade temel — Cormorant kullanmiyor cunku okuma rahatligi sans-serif */ font-family: var(--font-shop-body, system-ui, sans-serif) !important; } [data-sonner-toaster] [data-sonner-toast] { border-radius: 12px !important; border-width: 1px !important; box-shadow: 0 4px 24px rgba(31, 107, 45, 0.12), 0 1px 0 rgba(31, 107, 45, 0.04) !important; font-size: 13px !important; padding: 12px 14px !important; gap: 10px !important; } [data-sonner-toaster] [data-sonner-toast] [data-title] { font-weight: 600 !important; letter-spacing: -0.005em !important; } [data-sonner-toaster] [data-sonner-toast] [data-description] { font-size: 12px !important; color: oklch(0.42 0.04 145) !important; margin-top: 2px !important; } /* Success — magaza yesili */ [data-sonner-toaster] [data-sonner-toast][data-type="success"] { background: linear-gradient(135deg, #f1f8ec 0%, #e8f3dd 100%) !important; border-color: rgba(74, 124, 60, 0.35) !important; color: oklch(0.28 0.09 145) !important; } [data-sonner-toaster] [data-sonner-toast][data-type="success"] [data-icon] { color: #2a8438 !important; } [data-sonner-toaster] [data-sonner-toast][data-type="success"] [data-title] { color: oklch(0.26 0.09 145) !important; } /* Error — sade kirmizi, agresif degil */ [data-sonner-toaster] [data-sonner-toast][data-type="error"] { background: linear-gradient(135deg, #fdf3f2 0%, #fbe6e3 100%) !important; border-color: rgba(180, 60, 40, 0.35) !important; color: oklch(0.32 0.13 25) !important; } [data-sonner-toaster] [data-sonner-toast][data-type="error"] [data-icon] { color: #b03a25 !important; } [data-sonner-toaster] [data-sonner-toast][data-type="error"] [data-title] { color: oklch(0.32 0.13 25) !important; } /* Info — yumusak mavi */ [data-sonner-toaster] [data-sonner-toast][data-type="info"] { background: linear-gradient(135deg, #eef4f7 0%, #e1ecf2 100%) !important; border-color: rgba(60, 110, 140, 0.3) !important; color: oklch(0.32 0.06 230) !important; } [data-sonner-toaster] [data-sonner-toast][data-type="info"] [data-icon] { color: #3c6e8c !important; } /* Warning — sicak amber */ [data-sonner-toaster] [data-sonner-toast][data-type="warning"] { background: linear-gradient(135deg, #fbf5e7 0%, #f5ead0 100%) !important; border-color: rgba(160, 110, 30, 0.3) !important; color: oklch(0.36 0.09 85) !important; } [data-sonner-toaster] [data-sonner-toast][data-type="warning"] [data-icon] { color: #9c7320 !important; } /* Close button — toast renkleriyle uyumlu */ [data-sonner-toaster] [data-sonner-toast] [data-close-button] { background: transparent !important; border-color: rgba(0, 0, 0, 0.08) !important; color: currentColor !important; opacity: 0.6; } [data-sonner-toaster] [data-sonner-toast] [data-close-button]:hover { opacity: 1; background: rgba(0, 0, 0, 0.04) !important; }

Kutu Çaylar