/* =============================================================
   STBalloonAtelier — Marka katmani
   =============================================================

   NE YAPAR
   Bootstrap 5.3'un tamami yukleniyor. Bu dosya Bootstrap'i markaya
   ayarlar: renk, yazi tipi, kose yuvarlakligi, golge ve odak halkasi
   Bootstrap'in kendi CSS degiskenlerine yazilir.

   NEDEN BOYLE
   Her bilesen icin ayri kural yazmak yerine tek yerden degisken
   veriliyor. Buton, kart, form, uyari, rozet, tablo, sayfalama ve
   acilir menu bu degiskenleri okudugu icin hepsi kendiliginden
   markaya uyuyor. Yazilan CSS azaldikca kirilma da azaliyor.

   KURAL
   Yeni bir gorunum gerektiginde once Bootstrap degiskeni var mi diye
   bakilir. Yoksa Bootstrap sinifi aranir. Ikisi de yoksa buraya
   yazilir; sayfa CSS'ine degil.
   ============================================================= */

:root {
	/* --- Marka paleti (sartnamedeki palet, degistirilmez) --- */
	--stba-ivory:      #FAF7F2; /* ana zemin */
	--stba-white:      #FFFFFF; /* kart yuzeyi */
	--stba-blush:      #F3E8E2; /* ikincil zemin */
	--stba-pearl:      #F6F0EB; /* cok acik yuzey */
	--stba-beige:      #E8DED6; /* ince cizgi */
	--stba-soft-blush: #E7C7C4; /* acik pembe vurgu */
	--stba-rose:       #C99191; /* ana marka rengi */
	--stba-rosewood:   #8E3F47; /* ana eylem */
	--stba-rosewood-h: #74343B; /* eylem uzerine gelince */
	/* Premium vurgu. #C6A36A idi; beyaz zeminde 2.37 kontrast veriyor
	   ve yildiz gibi anlam tasiyan grafikler icin gereken 3.0 esigini
	   gecemiyordu. Bir tik koyulastirildi: 3.54. Altin tonu korundu. */
	--stba-gold:       #A8823F; /* premium vurgu, cok az kullanilir */
	--stba-charcoal:   #2C2525; /* ana yazi */
	/* Ikincil yazi. #756D69 idi; acik zeminlerde WCAG AA esigini (4.5)
	   kil payi geciremiyordu (pearl 4.48, blush 4.21). Bir tik
	   koyulastirildi: 6.34 / 5.61 / 5.27. Gorunum farki gozle
	   secilmiyor, altlik menusu ve aciklama metinleri okunur oldu. */
	--stba-gray:       #665E5A; /* ikincil yazi */

	--stba-basari: #4F7A5B;
	--stba-uyari:  #B07B2E;
	--stba-hata:   #A33A3A;

	--stba-font-baslik: "Playfair Display", Georgia, "Times New Roman", serif;
	--stba-font-govde:  Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	/* --- Bootstrap'e verilen karsiliklar --- */

	/* Tema renkleri: btn-primary, text-primary, border-primary,
	   bg-primary hepsi bunlari okur. */
	--bs-primary:       #8E3F47;
	--bs-primary-rgb:   142, 63, 71;
	--bs-secondary:     #C99191;
	--bs-secondary-rgb: 201, 145, 145;
	--bs-success:       #4F7A5B;
	--bs-success-rgb:   79, 122, 91;
	--bs-warning:       #B07B2E;
	--bs-warning-rgb:   176, 123, 46;
	--bs-danger:        #A33A3A;
	--bs-danger-rgb:    163, 58, 58;
	--bs-light:         #F6F0EB;
	--bs-light-rgb:     246, 240, 235;
	--bs-dark:          #2C2525;
	--bs-dark-rgb:      44, 37, 37;

	/* Govde */
	--bs-body-bg:          #FAF7F2;
	--bs-body-bg-rgb:      250, 247, 242;
	--bs-body-color:       #2C2525;
	--bs-body-color-rgb:   44, 37, 37;
	--bs-secondary-color:  rgba(117, 109, 105, .95);
	--bs-emphasis-color:   #2C2525;

	--bs-body-font-family:      Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--bs-body-font-size:        .9375rem; /* 15px — referans tasarimin govde olcusu */
	--bs-body-line-height:      1.7;
	--bs-body-font-weight:      400;

	/* Basliklar Playfair Display */
	--bs-headings-font-family:  "Playfair Display", Georgia, "Times New Roman", serif;
	--bs-headings-font-weight:  500;
	--bs-headings-line-height:  1.2;

	/* Baglantilar */
	--bs-link-color:             #8E3F47;
	--bs-link-color-rgb:         142, 63, 71;
	--bs-link-hover-color:       #74343B;
	--bs-link-hover-color-rgb:   116, 52, 59;
	--bs-link-decoration:        none;
	--bs-link-hover-decoration:  none;

	/* Cizgiler ve koseler */
	--bs-border-color:           #E8DED6;
	--bs-border-color-translucent: rgba(44, 37, 37, .1);
	--bs-border-radius:          .5rem;
	--bs-border-radius-sm:       .25rem;
	--bs-border-radius-lg:       .75rem;
	--bs-border-radius-xl:       1rem;
	--bs-border-radius-pill:     50rem;

	--bs-box-shadow:     0 8px 24px rgba(44, 37, 37, .08);
	--bs-box-shadow-sm:  0 1px 2px rgba(44, 37, 37, .04);
	--bs-box-shadow-lg:  0 16px 48px rgba(44, 37, 37, .12);

	/* Odak halkasi: klavyeyle gezenlerin nerede oldugunu gorur. */
	--bs-focus-ring-width:   .2rem;
	--bs-focus-ring-opacity: .3;
	--bs-focus-ring-color:   rgba(142, 63, 71, .3);

	/*
	 * Temanin eski olcu adlari.
	 * Hepsi Bootstrap degiskenlerine baglandi: tek kaynaktan
	 * beslendikleri icin kose yuvarlakligi ya da yazi olcusu
	 * degistiginde her yer birlikte degisiyor.
	 */
	--stba-fs-mikro: .6875rem; /* 11px — ust metin, rozet */
	--stba-fs-kucuk: .8125rem; /* 13px */
	--stba-fs-govde: var(--bs-body-font-size);
	--stba-fs-orta:  1.0625rem;
	--stba-fs-buyuk: 1.375rem;

	--stba-ls-ust: .18em; /* ust metin harf araligi */

	--stba-r-kart:  var(--bs-border-radius-lg);
	--stba-r-buton: var(--bs-border-radius);
	--stba-r-kucuk: var(--bs-border-radius-sm);
	--stba-r-hap:   var(--bs-border-radius-pill);

	--stba-golge:        var(--bs-box-shadow-sm);
	--stba-golge-yuksek: var(--bs-box-shadow);

	/* --- Temanin kendi olculeri --- */
	--stba-konteyner:   1200px;
	--stba-yan-bosluk:  1.5rem;
	--stba-bolum:       5rem;
	--stba-bolum-mobil: 3rem;
	--stba-izgara:      1.25rem;

	/* Sifre alanindaki goz simgesi (maske olarak kullanilir). */
	--stba-goz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6-10-6-10-6Z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E");

	/* SSS acilir sorularindaki arti/eksi isareti (maske). */
	--stba-arti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
	--stba-eksi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");

	--stba-gecis: 180ms ease;

	/* Dokunma hedefi alt siniri (erisilebilirlik). */
	--stba-dokunma: 44px;

	/* Sabit ogelerin ust uste binmemesi icin ortak z sirasi. */
	--stba-z-toast:  1060;
	--stba-z-cerez:  1070;
	--stba-z-menu:   1040;
	--stba-z-ustlik: 1030;
}

/* -------------------------------------------------------------
   Bootstrap'in degisken yoluyla ayarlanamayan birkac noktasi
   ------------------------------------------------------------- */

/* Basliklarda Playfair. Bootstrap 5.3 heading degiskenlerini
   yalniz renk icin kullaniyor; yazi tipi elle veriliyor. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--bs-headings-font-family);
	font-weight: var(--bs-headings-font-weight);
	line-height: var(--bs-headings-line-height);
}

/* Referans tasarimin baslik olculeri. */
h1, .h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2, .h2 { font-size: clamp(1.625rem, 3.5vw, 2.25rem); }
h3, .h3 { font-size: 1.375rem; }
h4, .h4 { font-size: 1.0625rem; }

/*
 * Gorseller kabina sigar.
 *
 * Bootstrap yalnizca .img-fluid sinifina bu kurali veriyor; tema
 * genelinde gecerli olmasi gerekiyor, yoksa WooCommerce'in ya da
 * editorun bastigi gorseller dogal boyutunda kalip yerlesimi
 * tasiriyor (sepetteki urun gorseli bunun yuzunden uzuyordu).
 */
img,
picture,
video,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

/*
 * Baglanti alt cizgisi.
 *
 * Bootstrap'in Reboot katmani <a> ogesine dogrudan
 * "text-decoration: underline" yaziyor; bu deger CSS degiskeniyle
 * degistirilemedigi icin burada kapatiliyor. Alt cizgi yalniz
 * okunan metnin icinde, baglanti ile duz yazinin ayrilmasi gereken
 * yerde birakiliyor.
 */
a {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

/* Yazi icerigi icinde baglantilar alti cizili kalir. */
.stba-yazi-icerik a:not(.btn):not(.badge),
.entry-content a:not(.btn):not(.badge) {
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* Govde metni ikincil renkte; vurgulananlar koyulasir. */
p {
	color: var(--stba-gray);
}

p strong,
li strong {
	color: var(--stba-charcoal);
	font-weight: 600;
}

/* -------------------------------------------------------------
   WooCommerce ile sinif cakismasi
   -------------------------------------------------------------
   WooCommerce bazi sablonlarinda "col-1" ve "col-2" adlarini kendi
   iki sutunlu duzeni icin kullaniyor (adresler, giris/kayit). Ayni
   adlar Bootstrap izgarasinda 12'de 1 ve 12'de 2 genislik demek;
   adres kartlari bu yuzden 42 piksele siksiyordu.

   Bu kural yalniz WooCommerce kapsayicisi icinde gecerli ve
   Bootstrap'in kendi kurallarindan daha yuksek oncelikli. Temanin
   kendi izgarasi col-12 / col-lg-* adlarini kullaniyor, onlara
   dokunmuyor.
   ------------------------------------------------------------- */
.woocommerce .col-1,
.woocommerce .col-2 {
	flex: 0 1 auto;
	width: auto;
	max-width: none;
}

/* -------------------------------------------------------------
   Buton: Bootstrap'in .btn degiskenleri markaya cekilir
   ------------------------------------------------------------- */

.btn {
	--bs-btn-padding-y: .6875rem;
	--bs-btn-padding-x: 1.5rem;
	--bs-btn-font-weight: 500;
	--bs-btn-border-radius: var(--bs-border-radius);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: var(--stba-dokunma);
	transition: background-color var(--stba-gecis), border-color var(--stba-gecis), color var(--stba-gecis);
}

.btn-primary {
	--bs-btn-bg: #8E3F47;
	--bs-btn-border-color: #8E3F47;
	--bs-btn-hover-bg: #74343B;
	--bs-btn-hover-border-color: #74343B;
	--bs-btn-active-bg: #74343B;
	--bs-btn-active-border-color: #74343B;
	--bs-btn-disabled-bg: #C99191;
	--bs-btn-disabled-border-color: #C99191;
}

.btn-outline-primary {
	--bs-btn-color: #8E3F47;
	--bs-btn-border-color: #E8DED6;
	--bs-btn-hover-bg: #8E3F47;
	--bs-btn-hover-border-color: #8E3F47;
	--bs-btn-hover-color: #FFFFFF;
	--bs-btn-active-bg: #74343B;
	--bs-btn-active-border-color: #74343B;
}

.btn-light {
	--bs-btn-bg: #E7C7C4;
	--bs-btn-border-color: #E7C7C4;
	--bs-btn-color: #2C2525;
	--bs-btn-hover-bg: #F3E8E2;
	--bs-btn-hover-border-color: #F3E8E2;
	--bs-btn-hover-color: #2C2525;
}

/* Ikon dugmesi: yalniz ikon tasiyan yuvarlak dugme.
   Konumlandirma sepet adet rozetinin dugmeye yapismasi icin sart. */
.btn-icon {
	--bs-btn-padding-y: 0;
	--bs-btn-padding-x: 0;
	position: relative;
	width: 42px;
	height: 42px;
	min-height: 42px;
	border-radius: var(--bs-border-radius-pill);
}

/* -------------------------------------------------------------
   Form
   ------------------------------------------------------------- */

.form-control,
.form-select {
	--bs-border-radius: .5rem;
	min-height: var(--stba-dokunma);
	background-color: var(--stba-white);
	border-color: var(--stba-beige);
	padding: .625rem .875rem;
}

.form-control:focus,
.form-select:focus {
	border-color: var(--stba-rose);
	box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.form-label {
	margin-bottom: .375rem;
	font-size: .8125rem;
	font-weight: 500;
	color: var(--stba-charcoal);
}

.form-check-input:checked {
	background-color: var(--stba-rosewood);
	border-color: var(--stba-rosewood);
}

.form-check-input:focus {
	border-color: var(--stba-rose);
	box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

/* -------------------------------------------------------------
   Kart
   ------------------------------------------------------------- */

.card {
	--bs-card-bg: var(--stba-white);
	--bs-card-border-color: var(--stba-beige);
	--bs-card-border-radius: var(--bs-border-radius-lg);
	--bs-card-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px);
	--bs-card-spacer-y: 1rem;
	--bs-card-spacer-x: 1rem;
	transition: box-shadow var(--stba-gecis), border-color var(--stba-gecis);
}

/* Tiklanabilir kartlar uzerine gelince hafifce kalkar. */
a.card:hover,
.card--tiklanabilir:hover {
	border-color: var(--stba-soft-blush);
	box-shadow: var(--bs-box-shadow);
}

/* -------------------------------------------------------------
   Rozet, uyari, tablo, sayfalama
   ------------------------------------------------------------- */

.badge {
	--bs-badge-padding-y: .3125rem;
	--bs-badge-padding-x: .5rem;
	--bs-badge-font-size: .6875rem;
	--bs-badge-font-weight: 500;
	--bs-badge-border-radius: var(--bs-border-radius-sm);
	letter-spacing: .02em;
}

.alert {
	--bs-alert-border-radius: var(--bs-border-radius);
	border-left-width: 3px;
}

.table {
	--bs-table-color: var(--stba-charcoal);
	--bs-table-border-color: var(--stba-beige);
}

.pagination {
	--bs-pagination-color: var(--stba-charcoal);
	--bs-pagination-bg: var(--stba-white);
	--bs-pagination-border-color: var(--stba-beige);
	--bs-pagination-hover-color: var(--stba-rosewood);
	--bs-pagination-hover-bg: var(--stba-pearl);
	--bs-pagination-hover-border-color: var(--stba-soft-blush);
	--bs-pagination-active-bg: var(--stba-rosewood);
	--bs-pagination-active-border-color: var(--stba-rosewood);
	--bs-pagination-border-radius: var(--bs-border-radius);
}

.dropdown-menu {
	--bs-dropdown-bg: var(--stba-white);
	--bs-dropdown-border-color: var(--stba-beige);
	--bs-dropdown-border-radius: var(--bs-border-radius-lg);
	--bs-dropdown-link-hover-bg: var(--stba-pearl);
	--bs-dropdown-link-active-bg: var(--stba-pearl);
	--bs-dropdown-link-active-color: var(--stba-rosewood);
	--bs-dropdown-box-shadow: var(--bs-box-shadow);
}

.offcanvas {
	--bs-offcanvas-bg: var(--stba-white);
	--bs-offcanvas-border-color: var(--stba-beige);
}

/* -------------------------------------------------------------
   Marka kaliplari — Bootstrap'te karsiligi olmayanlar
   ------------------------------------------------------------- */

/* Ust metin (eyebrow): bolum baslarindaki kucuk, aralikli yazi.
   Renk rose degil rosewood: 11 piksellik acik pembe yazi krem zeminde
   2.20-2.47 kontrast veriyordu, okunmuyordu. Koyu marka rengiyle
   5.91-6.92 oluyor ve bolum basliklariyla ayni aileden kaliyor. */
.stba-ust-metin {
	margin: 0 0 .5rem;
	font-size: .6875rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--stba-rosewood);
	font-weight: 500;
}

/* Ekran okuyucuya ozel metin (WordPress'in bekledigi sinif). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed !important;
	top: 1rem;
	left: 1rem;
	width: auto;
	height: auto;
	clip: auto;
	z-index: 1080;
	padding: .75rem 1.25rem;
	background: var(--stba-white);
	color: var(--stba-rosewood);
	border-radius: var(--bs-border-radius);
	box-shadow: var(--bs-box-shadow);
}

/* Hareketi azalt tercihi. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}