/* Kurumsal armağan: tek format ortalı sayfa + bant. Referans dil: "Gün 0'dan hasada" adımları. magaza.css'ten sonra yüklenir. */

/* ---------- ortak başlık: bu sayfadaki tek bölüm başlığı düzeni */
.mka-baslik { max-width: 720px; margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; }
.mka-baslik .ust-yazi { justify-content: center; }
.mka-baslik h2 { margin: 0 0 10px; font: 650 clamp(1.8rem, 3.2vw, 2.6rem)/1.1 var(--baslik); letter-spacing: -.02em; }
.mka-baslik p:last-child { margin: 0 auto; max-width: 60ch; color: var(--soluk); }
.mka-bolum { scroll-margin-top: 90px; }
.mka-not { text-align: center; margin: 22px 0 0; font-size: .82rem; color: var(--soluk); }
.mka-orta { text-align: center; margin: clamp(26px, 3vw, 38px) 0 0; }

/* ---------- kahraman */
.mka-kahraman { position: relative; background: var(--yosun-koyu); color: #F2EEE4; overflow: hidden; }
.mka-kahraman::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 500px at 90% 0%, rgba(232,163,61,.16), transparent 70%), radial-gradient(700px 500px at 0% 100%, rgba(181,70,46,.2), transparent 70%); }
.mka-kahraman-ic { position: relative; display: grid; justify-items: center; text-align: center; padding-block: clamp(36px, 5vw, 64px) clamp(36px, 5vw, 60px); }
.mka-kahraman .ust-yazi { color: var(--safran); justify-content: center; }
.mka-kahraman h1 { margin: 4px 0 14px; max-width: 18ch; color: #fff; font: 700 clamp(2.2rem, 5vw, 4rem)/1.04 var(--baslik); letter-spacing: -.025em; }
.mka-kahraman h1 em { font-style: normal; color: var(--safran); }
.mka-giris { max-width: 60ch; margin: 0 0 18px; font-size: clamp(1rem, 1.3vw, 1.14rem); color: #E4DFD1; }
.mka-kahraman .mgk-fiyat { margin: 0 0 16px; display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.mka-kahraman .mgk-fiyat strong { color: #fff; font: 650 2.5rem/1 var(--baslik); letter-spacing: -.02em; }
.mka-kahraman .mgk-fiyat span { color: #CFC8B6; }
.mka-eylem { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 clamp(26px, 3.4vw, 40px); }
.mka-kahraman-gorsel { margin: 0; width: min(100%, 1000px); }
.mka-kahraman-gorsel figcaption { margin-top: 10px; font-size: .82rem; color: #CFC8B6; }
.mka-rozetler { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mka-rozetler li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.09); font-size: .86rem; font-weight: 600; }
.mka-rozetler svg { width: 16px; height: 16px; color: var(--safran); flex: none; }

/* ---------- önce/sonra kaydırıcı */
.mka-ko { position: relative; aspect-ratio: 3 / 2; border-radius: var(--yuvarlak, 22px); overflow: hidden; background: #E9E5DD; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); isolation: isolate; }
.mka-ko img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.mka-ko-son { clip-path: inset(0 0 0 var(--k)); }
.mka-ko::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--k); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.25); pointer-events: none; }
.mka-ko-tutamak { position: absolute; z-index: 2; top: 50%; left: var(--k); transform: translate(-50%, -50%); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--yosun-koyu); box-shadow: 0 6px 18px rgba(0,0,0,.28); pointer-events: none; }
.mka-ko-etiket { position: absolute; z-index: 2; top: 14px; padding: 5px 13px; border-radius: 999px; background: var(--reishi); color: #fff; font-size: .82rem; font-weight: 700; pointer-events: none; }
.mka-ko-sol { left: 14px; }
.mka-ko-sag { right: 14px; }
.mka-ko-girdi { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.mka-ko:has(.mka-ko-girdi:focus-visible) .mka-ko-tutamak { outline: 3px solid var(--safran); outline-offset: 2px; }

/* ---------- adımlar: yuvarlak görsel, noktalı ok, gün rozeti */
.mka-adimlar { position: relative; list-style: none; margin: 0; padding: 34px 0 0; display: grid; gap: clamp(14px, 2.4vw, 36px); }
.mka-adim-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mka-adim-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mka-adim-3 { grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: center; gap: clamp(24px, 5vw, 80px); }
.mka-adim { position: relative; margin: 0; display: grid; gap: 10px; justify-items: center; align-content: start; text-align: center; }
.mka-adim > img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: var(--op, 50%) 50%; border-radius: 50% / 46%; display: block; box-shadow: 0 0 0 6px var(--kagit), 0 0 0 7px var(--cizgi), 0 24px 40px -26px rgba(60,38,18,.55); }
.mka-gun { padding: 4px 12px; border-radius: 999px; background: var(--reishi); color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .02em; }
.mka-adim strong { font: 600 1.1rem/1.2 var(--baslik); }
.mka-adim-metin { color: var(--soluk); font-size: .9rem; max-width: 28ch; }
.mka-adim-biz { color: var(--yosun-koyu); font-weight: 600; }
.mka-ok { position: absolute; z-index: 1; top: -30px; right: calc(-1 * clamp(14px, 2.4vw, 36px) - 30px); width: clamp(64px, 7.4vw, 104px); height: auto; color: var(--reishi); }
.mka-adim-3 .mka-ok { right: calc(-1 * clamp(24px, 5vw, 80px) - 12px); width: clamp(70px, 8vw, 120px); }
.mka-adim-ikon { display: grid; place-items: center; width: clamp(96px, 11vw, 132px); aspect-ratio: 1; border-radius: 50% / 46%; background: var(--kagit); box-shadow: 0 0 0 6px var(--kagit), 0 0 0 7px var(--cizgi), 0 24px 40px -26px rgba(60,38,18,.55); color: var(--yosun-koyu); }
.mka-adim-ikon svg { width: 42%; height: 42%; }
.mka-surec { background: var(--zemin-koyu, rgba(42,33,25,.04)); }

/* ---------- kullanılan eski bileşenlerin ortalanması */
.mg-kur-boylar .mka-baslik h2 { color: #fff; }
.mg-kur-boylar .mka-baslik p:last-child { color: #DCD6C6; }
.mka-bolum .mg-boy-izgara { margin-top: 0; }
.mka-bolum .mg-adet-izgara { margin-bottom: 0; }

/* ---------- tür seçimi: az ve büyük */
.mka-turler { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px) clamp(14px, 2.4vw, 32px); }
.mka-turler a { display: grid; justify-items: center; gap: 12px; text-align: center; text-decoration: none; color: var(--murekkep); }
.mka-turler img { width: min(100%, 250px); aspect-ratio: 1 / 1; object-fit: cover; border-radius: 52% 48% 44% 56% / 46% 50% 50% 54%; box-shadow: var(--golge-k); transition: transform .25s; }
.mka-turler a:hover img { transform: translateY(-4px) scale(1.015); }
.mka-turler a:focus-visible { outline: 3px solid var(--safran); outline-offset: 4px; border-radius: 18px; }
.mka-turler strong { font: 650 1.12rem/1.2 var(--baslik); }

/* ---------- SSS: iki sütun, sağ taraf boş kalmaz */
.mka-sss-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: start; }
.mka-sss-liste details { background: var(--kagit); border: 1.5px solid var(--cizgi); border-radius: var(--yuvarlak-k); padding: 0 20px; }

/* ---------- teklif: güçlü sol sütun + belli olan çipler */
.mka-teklif .mg-teklif-yan h2 { margin: 2px 0 16px; font: 700 clamp(2.1rem, 3.8vw, 3.2rem)/1.04 var(--baslik); letter-spacing: -.02em; }
.mka-teklif-foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--yuvarlak, 22px); display: block; box-shadow: 0 26px 50px -26px rgba(40,10,0,.7); }
.mka-teklif-giris { margin: 18px 0; font-size: 1.04rem; }
.mka-teklif-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.mka-teklif-liste li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.35; color: #FBE3DA; }
.mka-teklif-liste strong { display: block; color: #fff; }
.mka-teklif-liste svg { width: 20px; height: 20px; margin-top: 1px; color: var(--safran-acik); flex: none; }

/* magaza.css'teki süzgeç .mg-cip kuralı form çiplerini düz yazıya çeviriyordu: burada seçilebilir kutu olarak netleşir. */
.mka-teklif .mg-teklif .mg-cipler { display: flex; flex-wrap: wrap; overflow: visible; gap: 8px; margin: 0 0 18px; padding: 0; align-items: stretch; }
.mka-teklif .mg-teklif .mg-cip { position: relative; display: block; min-height: 0; padding: 0; border-radius: 12px; background: none; cursor: pointer; }
.mka-teklif .mg-teklif .mg-cip:hover { background: none; }
.mka-teklif .mg-teklif .mg-cip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mka-teklif .mg-teklif .mg-cip > span { display: grid; gap: 1px; align-content: center; min-height: 46px !important; padding: 8px 14px !important; border-radius: 12px !important; border: 1.5px solid #CFC6B4 !important; background: #fff !important; color: var(--murekkep); font-weight: 700; font-size: .9rem; line-height: 1.2; transition: border-color .15s, background .15s, box-shadow .15s; }
.mka-teklif .mg-teklif .mg-cip:hover > span { border-color: var(--yosun-koyu) !important; }
.mka-teklif .mg-teklif .mg-cip small { font-weight: 600; font-size: .74rem; color: var(--soluk); }
.mka-teklif .mg-teklif .mg-cip input:checked + span { border-color: var(--yosun-koyu) !important; background: var(--yosun-koyu) !important; color: #fff; box-shadow: 0 6px 14px -8px rgba(30,50,30,.8) !important; }
.mka-teklif .mg-teklif .mg-cip input:checked + span small { color: rgba(255,255,255,.8); }
.mka-teklif .mg-teklif .mg-cip input:focus-visible + span { outline: 3px solid var(--safran); outline-offset: 2px; }

/* ---------- içerik paneli yeri */
.mka-yazi { background: none; }

/* ---------- bant (ürün, vitrin, rehber) */
.mka-bant-ic { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding-block: clamp(44px, 6vw, 84px); }
.mka-bant-gorsel { margin: 0; min-width: 0; }
.mka-bant-gorsel figcaption { margin-top: 10px; font-size: .78rem; color: rgba(242,238,228,.72); }
.mka-bant-metin > p { color: #DCD6C6; max-width: 46ch; }
.mka-bant .ust-yazi { color: var(--safran); }

@media (max-width: 1000px) {
	.mka-adim-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
	.mka-adim-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
	.mka-ok { display: none; }
	.mka-adimlar { padding-top: 0; }
	.mka-bant-ic { grid-template-columns: 1fr; }
	.mka-teklif .mg-teklif-yan { position: static; }
	.mka-sss-liste { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	.mka-adim-5, .mka-adim-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
	.mka-adim-5 .mka-adim:last-child:nth-child(odd), .mka-adim-3 .mka-adim:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 62%; justify-self: center; }
	.mka-turler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mka-turler strong { font-size: 1rem; }
	.mka-ko-tutamak { width: 40px; height: 40px; }
	.mka-teklif-liste { grid-template-columns: 1fr; }
	.mka-eylem .dugme { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .mka-turler img { transition: none; } }