/*
Theme Name: Shopkeeper - The Child Theme
Theme URI: https://1.envato.market/wp-dashboard-to-shopkeeper
Description: This is the Child Theme for Shopkeeper - a Hassle-free Worpress Theme with great design and extensive functionality.
Author: Get Bowtied
Author URI: https://www.getbowtied.com/
Template: shopkeeper
Version: 2.0
*/

/* ==========================================================================
   WONN — Minimal Premium tasarım katmanı
   Tüm özelleştirmeler burada; ana tema güncellendiğinde kaybolmaz.
   ========================================================================== */

:root {
	--wonn-ink:        #111318;
	--wonn-ink-soft:   #3A3D44;
	--wonn-muted:      #6E7278;
	--wonn-line:       #E8E8EA;
	--wonn-bg:         #FFFFFF;
	--wonn-bg-soft:    #F6F6F7;
	--wonn-accent:     #1F5FD8;
	--wonn-sale:       #B4232B;

	--wonn-s1: 8px;
	--wonn-s2: 16px;
	--wonn-s3: 24px;
	--wonn-s4: 32px;
	--wonn-s5: 48px;
	--wonn-s6: 64px;
	--wonn-s7: 96px;

	--wonn-radius: 4px;
}

/* --------------------------------------------------------------------------
   1. Tipografi temeli
   -------------------------------------------------------------------------- */

body {
	color: var(--wonn-ink-soft);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--wonn-ink);
	letter-spacing: -0.015em;
}

/* Bölüm başlığı bloğu */
.wonn-head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto var(--wonn-s5);
}

.wonn-eyebrow {
	display: block;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wonn-muted);
	margin-bottom: var(--wonn-s2);
}

.wonn-h2 {
	font-size: 34px;
	line-height: 1.2;
	font-weight: 500;
	margin: 0;
}

.wonn-sub {
	margin: var(--wonn-s2) 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wonn-muted);
}

.wonn-more {
	text-align: center;
	margin: var(--wonn-s5) 0 0;
}

.wonn-more a {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wonn-ink);
	border-bottom: 1px solid var(--wonn-ink);
	padding-bottom: 4px;
	transition: opacity .2s ease;
}

.wonn-more a:hover { opacity: .55; }

/* --------------------------------------------------------------------------
   2. Bölüm ritmi — nefes alan boşluklar Minimal Premium'un temeli
   -------------------------------------------------------------------------- */

.wonn-section { padding: var(--wonn-s7) 0 0; }
.wonn-section--latest { padding-bottom: var(--wonn-s7); }
.wonn-hero-row { margin-bottom: 0 !important; }

@media (max-width: 768px) {
	.wonn-section { padding-top: var(--wonn-s6); }
	.wonn-h2 { font-size: 26px; }
}

/* --------------------------------------------------------------------------
   3. Hero slider
   -------------------------------------------------------------------------- */

.wonn-hero-row .shortcode_getbowtied_slider .swiper-slide {
	background-position: center right !important;
}

.wonn-hero-row .slider-content-wrapper h2 {
	font-weight: 500;
	letter-spacing: -0.03em;
	max-width: 15ch;
}

.wonn-hero-row .slider-content-wrapper p {
	max-width: 44ch;
	margin-top: var(--wonn-s3);
	color: var(--wonn-ink-soft) !important;
}

.wonn-hero-row .slider-content-wrapper .button {
	margin-top: var(--wonn-s4);
	border-radius: var(--wonn-radius);
	padding: 16px 30px !important;
	font-size: 12px !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: opacity .2s ease;
}

.wonn-hero-row .slider-content-wrapper .button:hover { opacity: .85; }

/* Açık görsellerde metnin okunması için sol taraftan yumuşak beyaz perde */
.wonn-hero-row .shortcode_getbowtied_slider .swiper-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.80) 38%, rgba(255,255,255,0) 70%);
	pointer-events: none;
}

.wonn-hero-row .shortcode_getbowtied_slider .slider-content { position: relative; z-index: 2; }

/* Slayt sayaçları görselin ortasında duruyordu — sola alta çekiyoruz */
.wonn-hero-row .shortcode-slider-pagination {
	position: absolute !important;
	left: 0 !important;
	right: auto !important;
	bottom: 40px !important;
	top: auto !important;
	transform: none !important;
	width: auto !important;
	padding-left: 8.5%;
	z-index: 3;
}

.wonn-hero-row .swiper-button-prev,
.wonn-hero-row .swiper-button-next { opacity: .35; transition: opacity .2s ease; }

.wonn-hero-row .swiper-button-prev:hover,
.wonn-hero-row .swiper-button-next:hover { opacity: .9; }

@media (max-width: 768px) {
	.wonn-hero-row .slider-content-wrapper h2 { font-size: 34px !important; line-height: 40px !important; }

	/* Masaustunde tema numarali sayac ("01 02 03") gosterip Swiper noktalarini
	   gizliyor; mobilde noktalara donuyor ve o noktalar Swiper'in stok iOS
	   mavisini (#007aff) kullaniyordu. SADECE mobilde ink tonuna cekiyoruz —
	   kural masaustune sizarsa numaralarin uzerine koyu pil basiyor. */
	.wonn-hero-row .swiper-pagination-bullet {
		background: var(--wonn-ink) !important;
		opacity: .22 !important;
		width: 8px !important;
		height: 8px !important;
		transition: opacity .2s ease, transform .2s ease;
	}

	.wonn-hero-row .swiper-pagination-bullet-active {
		background: var(--wonn-ink) !important;
		opacity: 1 !important;
		transform: scale(1.15);
	}
	.wonn-hero-row .shortcode_getbowtied_slider .swiper-slide::before {
		background: linear-gradient(180deg, rgba(255,255,255,.92) 30%, rgba(255,255,255,.65) 100%);
	}
}

/* --------------------------------------------------------------------------
   4. Güven şeridi
   -------------------------------------------------------------------------- */

.wonn-usp-row { margin-bottom: 0 !important; }

.wonn-usp {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--wonn-line);
	border-bottom: 1px solid var(--wonn-line);
}

.wonn-usp__item {
	padding: var(--wonn-s4) var(--wonn-s3);
	text-align: center;
	border-left: 1px solid var(--wonn-line);
}

.wonn-usp__item:first-child { border-left: 0; }

.wonn-usp__title {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--wonn-ink);
	letter-spacing: -0.01em;
}

.wonn-usp__desc {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wonn-muted);
}

@media (max-width: 900px) {
	.wonn-usp { grid-template-columns: repeat(2, 1fr); }
	.wonn-usp__item:nth-child(3) { border-left: 0; }
	.wonn-usp__item:nth-child(-n+2) { border-bottom: 1px solid var(--wonn-line); }
}

/* --------------------------------------------------------------------------
   5. Kategori kartları
      Tema mozaik düzen kuruyor (farklı boy kutular). Minimal Premium için
      eşit oranlı 3'lü ızgaraya çeviriyoruz.
   -------------------------------------------------------------------------- */

.categories_grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wonn-s3);
	height: auto !important;
}

.categories_grid > div[class^="category_"] {
	float: none !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
}

.categories_grid .clearfix { display: none !important; }

.categories_grid .category_grid_box {
	position: relative;
	aspect-ratio: 4 / 3;
	height: auto !important;
	overflow: hidden;
	border-radius: var(--wonn-radius);
	background: var(--wonn-bg-soft);
}

.categories_grid .category_item_bkg {
	position: absolute;
	inset: 0;
	background-size: cover !important;
	background-position: center !important;
	transition: transform .9s cubic-bezier(.2,.7,.3,1);
}

.categories_grid .category_grid_box:hover .category_item_bkg { transform: scale(1.06); }

/* Tema burada display:table kullanıyor (etiket dikeyde ortalanıyor);
   flex'e zorlayıp etiketi sol alta alıyoruz. */
.categories_grid .category_grid_box .category_item {
	/* Tema buraya mozaik düzeninden kalma sabit bir yükseklik veriyor;
	   kutunun dışına taşan etiket overflow:hidden ile kırpılıyordu. */
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	display: flex !important;
	align-items: flex-end !important;
	justify-content: flex-start !important;
	padding: var(--wonn-s3) !important;
	text-align: left !important;
}

/* Etiketin her fotoğrafta okunması için alttan yumuşak koyu geçiş.
   Pseudo-element yerine bağlantının kendi arka planı: çocuk olan etiket
   böylece her durumda perdenin üstünde kalıyor. */
.categories_grid .category_grid_box .category_item {
	background-image: linear-gradient(180deg, rgba(17,19,24,0) 40%, rgba(17,19,24,.72) 100%) !important;
	background-color: transparent !important;
}

.categories_grid .category_name {
	/* Flex hizalaması temanın satır yüksekliğiyle 6px taşıyordu —
	   etiketi kutunun içinde mutlak konumluyoruz. */
	position: absolute !important;
	top: auto !important;
	left: var(--wonn-s3) !important;
	right: var(--wonn-s3) !important;
	bottom: 20px !important;
	z-index: 2;
	background: none !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	padding: 0 !important;
	line-height: 1.3 !important;
}

@media (max-width: 1024px) {
	.categories_grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.categories_grid { grid-template-columns: 1fr; gap: var(--wonn-s2); }
}

/* --------------------------------------------------------------------------
   6. Ürün ızgarası — tema float kullanıyor, bu yüzden satırlar
      farklı yükseklikte kırılıyordu. Grid'e çevirip hizayı sabitliyoruz.
   -------------------------------------------------------------------------- */

ul.products {
	display: grid !important;
	gap: var(--wonn-s5) var(--wonn-s3);
	margin-left: 0 !important;
	margin-right: 0 !important;
}

ul.products::before,
ul.products::after { content: none !important; }

ul.products li.product {
	float: none !important;
	clear: none !important;
	width: auto !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column;
}

ul.products.columns-1 { grid-template-columns: 1fr; }
ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
ul.products.columns-4,
ul.products.columns-5,
ul.products.columns-6 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
	ul.products.columns-3,
	ul.products.columns-4,
	ul.products.columns-5,
	ul.products.columns-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
	ul.products.columns-2,
	ul.products.columns-3,
	ul.products.columns-4,
	ul.products.columns-5,
	ul.products.columns-6 { grid-template-columns: repeat(2, 1fr); }
	ul.products { gap: var(--wonn-s4) var(--wonn-s2); }
}

/* Tüm ürün görselleri aynı kare oranda — ızgaranın sakin durmasının anahtarı */
ul.products li.product .product_thumbnail {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--wonn-bg-soft);
	border-radius: var(--wonn-radius);
}

ul.products li.product .product_thumbnail img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

/* --------------------------------------------------------------------------
   6b. Ürün kartları — sakin, fotoğraf odaklı
   -------------------------------------------------------------------------- */

ul.products li.product .product-image-wrapper,
ul.products li.product a img {
	background: var(--wonn-bg-soft);
	border-radius: var(--wonn-radius);
}

ul.products li.product a img {
	transition: transform .6s cubic-bezier(.2,.7,.3,1);
}

ul.products li.product:hover a img { transform: scale(1.035); }

ul.products li.product h3,
ul.products li.product .woocommerce-loop-product__title {
	font-size: 14px !important;
	line-height: 1.5 !important;
	font-weight: 400 !important;
	color: var(--wonn-ink-soft) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	margin-top: var(--wonn-s2) !important;
	/* uzun ürün adlarında kartların hizası bozulmasın */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 42px;
}

ul.products li.product .price {
	font-size: 15px !important;
	font-weight: 500 !important;
	color: var(--wonn-ink) !important;
	margin-top: 6px !important;
}

ul.products li.product .price del {
	color: var(--wonn-muted) !important;
	font-weight: 400 !important;
	opacity: 1;
	margin-right: 6px;
}

ul.products li.product .price ins {
	color: var(--wonn-sale) !important;
	text-decoration: none;
	font-weight: 500;
}

/* İndirim rozeti — küçük, köşede, sessiz */
ul.products li.product .onsale,
.single-product span.onsale {
	background: var(--wonn-ink) !important;
	color: #fff !important;
	font-size: 11px !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 2px;
	padding: 4px 10px !important;
	line-height: 1.4 !important;
	min-height: 0 !important;
	min-width: 0 !important;
}

/* --------------------------------------------------------------------------
   7. Promo bannerlar
   -------------------------------------------------------------------------- */

.wonn-section--banners .shortcode_banner_simple_height {
	border-radius: var(--wonn-radius);
	overflow: hidden;
}

.wonn-section--banners .shortcode_banner_simple_height_bkg {
	transition: transform .9s cubic-bezier(.2,.7,.3,1);
}

.wonn-section--banners .shortcode_banner_simple_height:hover .shortcode_banner_simple_height_bkg {
	transform: scale(1.05);
}

/* Açık tonlu fotoğraflarda başlık okunmuyordu — perdeyi güçlendiriyoruz.
   Merkezden dışa doğru koyulaşan katman, ortadaki metni her görselde taşır. */
.wonn-section--banners .shortcode_banner_simple_height_inner::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at center, rgba(17,19,24,.62) 0%, rgba(17,19,24,.34) 55%, rgba(17,19,24,.30) 100%),
		linear-gradient(180deg, rgba(17,19,24,.10) 0%, rgba(17,19,24,.45) 100%);
	pointer-events: none;
}

.wonn-section--banners .shortcode_banner_simple_height_inside { z-index: 2; }

.wonn-section--banners .banner_title {
	font-size: 28px !important;
	font-weight: 500 !important;
	letter-spacing: -0.02em;
	text-transform: none !important;
}

.wonn-section--banners .banner_subtitle {
	font-size: 14px !important;
	font-weight: 400 !important;
	letter-spacing: 0.02em;
	text-transform: none !important;
	opacity: .9;
}

.wonn-section--banners .shortcode_banner_simple_height_sep { width: 40px; height: 1px; }

/* --------------------------------------------------------------------------
   8. Mağaza vaadi bloğu
   -------------------------------------------------------------------------- */

.wonn-promise-row { margin-bottom: 0 !important; }

.wonn-promise {
	background: var(--wonn-bg-soft);
	text-align: center;
	padding: var(--wonn-s7) var(--wonn-s3);
}

.wonn-promise__title {
	font-size: 32px;
	font-weight: 500;
	margin: 0 0 var(--wonn-s3);
	letter-spacing: -0.025em;
}

.wonn-promise__text {
	max-width: 58ch;
	margin: 0 auto var(--wonn-s5);
	font-size: 16px;
	line-height: 1.7;
	color: var(--wonn-muted);
}

.wonn-promise__btn {
	display: inline-block;
	background: var(--wonn-ink);
	color: #fff;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 16px 32px;
	border-radius: var(--wonn-radius);
	transition: opacity .2s ease;
}

.wonn-promise__btn:hover { color: #fff; opacity: .85; }

@media (max-width: 768px) {
	.wonn-promise { padding: var(--wonn-s6) var(--wonn-s3); }
	.wonn-promise__title { font-size: 26px; }
}

/* --------------------------------------------------------------------------
   9. Genel: butonlar, başlık, formlar
   -------------------------------------------------------------------------- */

.button,
button,
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	border-radius: var(--wonn-radius);
	letter-spacing: 0.1em;
}

/* Odak halkası — klavye erişilebilirliği */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--wonn-accent);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   10. Başlık — tema başlığı şeffaf + beyaz yazı kullanıyordu; açık tonlu
       hero görsellerinde menü okunmuyordu. Sabit beyaz, koyu yazılı,
       sayfa boyunca yapışkan bir başlığa çeviriyoruz.
   -------------------------------------------------------------------------- */

.site-header {
	position: sticky !important;
	top: 0;
	z-index: 500;
	background: var(--wonn-bg) !important;
	border-bottom: 1px solid var(--wonn-line);
}

.site-header a,
.site-header .main-navigation a,
.site-header .header-icons a,
.site-header .shopping_bag_items_number,
.site-header i {
	color: var(--wonn-ink) !important;
}

.site-header .main-navigation > div > ul > li > a {
	font-size: 12px;
	letter-spacing: 0.1em;
	opacity: .85;
	transition: opacity .2s ease;
}

.site-header .main-navigation > div > ul > li > a:hover { opacity: 1; }

/* Açılır alt menü — hafif, çerçevesiz */
.site-header .main-navigation ul ul {
	border: 1px solid var(--wonn-line);
	box-shadow: 0 12px 32px rgba(17, 19, 24, .08);
	border-radius: var(--wonn-radius);
}

/* Başlık artık akışta olduğu için hero'nun altına kaymasına gerek yok */
.wonn-hero-row { margin-top: 0 !important; }

/* --------------------------------------------------------------------------
   11. Ürün detay sayfası
       Tema turuncu bir aksan rengiyle geliyordu; Minimal Premium paleti
       tek renk (ink) üzerine kurulu, aksanı sadece indirim fiyatında
       kullanıyoruz.
   -------------------------------------------------------------------------- */

.single-product .single_add_to_cart_button,
.woocommerce .single_add_to_cart_button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background-color: var(--wonn-ink) !important;
	color: #fff !important;
	border-radius: var(--wonn-radius);
	letter-spacing: 0.1em;
	transition: opacity .2s ease;
}

.single-product .single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var(--wonn-ink) !important;
	opacity: .86;
}

/* Ürün başlığı ve fiyat hiyerarşisi */
.single-product .product_title {
	font-size: 32px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.025em;
}

.single-product .summary > .price {
	font-size: 24px !important;
	font-weight: 500 !important;
	color: var(--wonn-ink) !important;
	margin-bottom: var(--wonn-s3) !important;
}

.single-product .summary > .price del {
	color: var(--wonn-muted) !important;
	font-weight: 400 !important;
	font-size: 19px !important;
	opacity: 1;
}

.single-product .summary > .price ins {
	color: var(--wonn-sale) !important;
	text-decoration: none;
}

/* Teknik özellik tablosu — açıklama içinde ürettiğimiz tablo */
.single-product .woocommerce-Tabs-panel table,
.single-product #tab-description table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.single-product .stock.in-stock { color: #1F7A3D; font-size: 14px; }