/**
* KS Thank-you — the section INTERNALS of the order-received page.
*
* Layout (columns, order, spacing between sections) belongs to the OPERATOR's
* Elementor template — nothing here positions a section on the page. This file
* only dresses what each [ks_thankyou_*] shortcode prints, on the shared KS
* tokens (ks-tokens.css), so the page reads like the checkout it follows.
*
* Scope: .ks-vm-ty (the layout wrapper) and .ks-vm-ty--canvas (the same scope
* carried per-section inside the Elementor editor, where the wrapper is absent).
*
* @package KS_Variation_Manager
*/
/* ═══════════════ Wrapper ═══════════════ */
.ks-vm-ty .ks-vm-ty-sec + .ks-vm-ty-sec {
margin-top: 24px;
}
/* WooCommerce/Botiga give the classic blocks their own margins; inside an
Elementor layout the operator owns the gaps, so the sections start flush. */
.ks-vm-ty .woocommerce-order-details,
.ks-vm-ty .woocommerce-customer-details,
.ks-vm-ty .woocommerce-order-overview {
margin: 0;
}
/* 🚨 v2.311.0 — Botiga'nın `.entry-content a { text-decoration: underline }`
kuralı bu sayfaya v2.308.0 ile GİRDİ: site çerçevesi için şablon
`elementor_canvas`tan `default`a çevrildi, default şablon da içeriği
`.entry-content` sarmalayıcısına koyuyor (canvas koymuyordu). Kuralın
özgüllüğü (0,1,1) hem `.ks-btn`in (0,1,0) hem `.elementor a`nın resetini
yeniyor → butonların ve blok içi bağlantıların altı çizili çıkıyordu.
`body` öneki özgüllüğü (0,1,2)'ye çıkarıp canvas dönemindeki görünümü
(hiç alt çizgi yok) geri getiriyor. */
body .ks-vm-ty a {
text-decoration: none;
}
/* ═══════════════ Message ═══════════════ */
/* Kutu İKİ SÜTUN: [ikon] [metin gövdesi]. Başlık ve alt satır aynı sütunda
olduğu için hizaları yapıdan geliyor — v2.316'ya kadar alt satır "ikon
genişliği + boşluk" kadar elle girintileniyordu ve punto her değiştiğinde
hiza kayıyordu (iki kez yaşandı). Artık sihirli sayı yok.
Renk tek yerde: ikon `fill:currentColor` olduğu için kutunun rengini izler.
Hâller (KS_VM_Thankyou::message_state):
(varsayılan) ödeme alındı (kart) → yeşil, check-circle
--warn havale bekleniyor → sarı, check-circle
--failed (yedek) başarısız → kırmızı, x-circle
--neutral (yedek) iade/geçersiz → gri, refresh / info */
.ks-vm-ty .ks-vm-ty-message {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 20px;
border-radius: var(--ks-radius-card, 16px);
background: var(--ks-ok-soft, #e9f5ec);
color: var(--ks-ok, #1a7f37);
font-size: 16px;
}
.ks-vm-ty .ks-vm-ty-message--warn {
background: var(--ks-warn-soft, #fdf2e3);
color: var(--ks-warn, #a15c00);
}
.ks-vm-ty .ks-vm-ty-message--failed {
background: var(--ks-danger-soft, #fdeeec);
color: var(--ks-danger, #c8321f);
}
.ks-vm-ty .ks-vm-ty-message--neutral {
background: var(--ks-neutral-soft, #f4f4f4);
color: var(--ks-ink, #1a1a1a);
}
/* min-width:0 ŞART: flex çocuğu yoksa uzun metin sütunu taşırır. */
.ks-vm-ty .ks-vm-ty-message .ks-vm-ty-msg-body {
flex: 1 1 auto;
min-width: 0;
}
/* Paragraflar çıplak: kutuyu bölüm çiziyor.
Teslimat paneli de bu aileden (v2.330.0) — bkz. .ks-vm-ty-shipping. */
.ks-vm-ty .ks-vm-ty-message p,
.ks-vm-ty .ks-vm-ty-shipping p {
margin: 0;
padding: 0;
background: none;
line-height: 1.5;
}
/* İkon başlıktan büyük. Ölçü, başlığın SATIR KUTUSUYLA eşit tutuluyor
(28px × 1.5 line-height = 42px) — böylece flex-start hizası ikonu başlığın
ilk satırına tam oturtuyor, optik kaydırma gerekmiyor. Başlık puntosunu
değiştirirsen bu iki sayıyı BİRLİKTE güncelle. */
.ks-vm-ty .ks-vm-ty-message .ks-vm-ty-msg-icon,
.ks-vm-ty img.ks-vm-ty-shipping-logo {
flex: 0 0 auto;
font-size: 42px;
}
.ks-vm-ty .ks-vm-ty-message .ks-vm-ty-msg-title {
font-size: 1.4em;
font-weight: 700;
}
.ks-vm-ty .ks-vm-ty-message .ks-vm-ty-msg-sub,
.ks-vm-ty .ks-vm-ty-shipping .ks-vm-ty-shipping-text {
margin-top: 0;
font-weight: 500;
font-size: .9em;
color: var(--e-global-color-text, #000000)
}
.ks-vm-ty .ks-vm-ty-message .ks-vm-ty-msg-actions {
margin-top: 14px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* 📱 Mobil ölçüler (operatör, 23 Ağu 2026: "metinler çok büyük"). Kutunun
puntosu düşünce alt metin de onunla iniyor (`.9em`), başlık ise açıkça
yazılıyor. 🚨 İkon = BAŞLIĞIN SATIR KUTUSU (18 × 1.5 = 27px): flex-start
hizası ikonu başlığın ilk satırına bu sayede tam oturtuyor — başlık
puntosunu değiştiren bu sayıyı da değiştirmeli. */
@media (max-width: 575px) {
.ks-vm-ty .ks-vm-ty-message {
gap: 10px;
font-size: 15px;
/* Dar ekranda yan boşluklar metin sütununu yiyordu (operatör,
23 Ağu 2026): 20 → 14. Dikey boşluk aynı kalıyor. */
padding-left: 14px;
padding-right: 14px;
}
/* Satır aralıkları da mobilde daralıyor (operatör, 23 Ağu 2026). Başlık
`p` olduğu için kendi kuralında ayrıca yazılıyor — aşağıdaki `p`
kuralından daha özgül, o yüzden 1,25 kazanıyor. */
.ks-vm-ty .ks-vm-ty-message p,
.ks-vm-ty .ks-vm-ty-shipping p {
line-height: 1.4;
}
.ks-vm-ty .ks-vm-ty-message .ks-vm-ty-msg-title {
font-size: 17px;
line-height: 1.25;
}
/* Satır aralığı daralınca başlık alt metne yapışıyordu — araya nefes
(operatör, 23 Ağu 2026). Yalnız mesaj kutusunda: teslimat panelinin
metni aynı taban kuralı paylaşıyor ama orada başlık yok. */
.ks-vm-ty .ks-vm-ty-message .ks-vm-ty-msg-sub {
margin-top: 5px;
}
/* 🚨 İKİ ÇEMBER DE 26px ve İKİSİNİN DE MERKEZİ BAŞLIĞIN İLK SATIRINDA.
Sayılar ölçümden: check-circle glifi kutunun 0,8125'i (viewBox 24-232),
yani 32px kutu → 26px çember, çemberin kutu içindeki üst boşluğu 3px.
Başlık satır kutusu 17 × 1,25 = 21,25 → çemberi ortalamak için
(21,25 − 26)/2 − 3 ≈ −5px. Bacs çemberi kutunun KENDİSİ olduğu için
onun payı −2px (kendi kuralında). Başlık puntosunu/satırını değiştiren
bu payları da yeniden hesaplamalı. */
.ks-vm-ty .ks-vm-ty-message .ks-vm-ty-msg-icon {
font-size: 32px;
margin-top: -5px;
}
.ks-vm-ty img.ks-vm-ty-shipping-logo {
font-size: 27px;
}
}
/* [ks_thankyou_bacs_notice] — mesaj kutusuyla aynı iskelet.
🚨 TİPOGRAFİ ÖZELLİKLE DEVRALINIYOR (operatör, 22 Ağu 2026): başlık ve alt
metin, üstteki teşekkür bandıyla BİREBİR aynı punto/ağırlık olmalı, iki kutu
yalnız RENKTE ayrışsın. Bu yüzden burada --bacs için title/sub kuralı YOK —
yeniden punto yazmak iki bloğu tekrar ayırır. Ayrışma yalnız --warn'ın
background/color'ından ve aşağıdaki ikondan geliyor. */
/* Çemberi ELLE çiziyoruz: Phosphor'da hourglass'ın "circle" varyantı yok
(check-circle'ın kendi çemberi var), o yüzden svg kutusuna tam yuvarlak bir
kenarlık veriliyor — üstteki ikonla aynı aileden görünsün diye. Glif bold
ağırlıkta basılıyor (KS_VM_Icons 'bold'), regular çizgi çemberin yanında
zayıf kalıyordu.
Dış ölçü = 19 glif + 2×5 iç boşluk + 2×3 kenarlık = 35px. Medya sorgusundan
SONRA geldiği için mobilde de bu ölçü geçerli. */
.ks-vm-ty .ks-vm-ty-message--bacs .ks-vm-ty-msg-icon {
box-sizing: content-box;
font-size: 19px;
padding: 5px;
border: 3px solid currentColor;
border-radius: 50%;
}
/* 📱 Mobilde el yapımı çember küçülmezse yeşil ikondan İRİ kalıyordu (35 vs
28 — operatöre iki kez bildirilmişti, 23 Ağu'da düzeltildi). Oran masaüstüyle
aynı tutuluyor: glif ≈ dış ölçünün 0,54'ü → 14 + 2×4 iç boşluk + 2×2
kenarlık = 26px. 🚨 Bu kural taban `--bacs` kuralından SONRA gelmek ZORUNDA
(ikisi de aynı özgüllükte). */
@media (max-width: 575px) {
.ks-vm-ty .ks-vm-ty-message--bacs .ks-vm-ty-msg-icon {
font-size: 14px;
padding: 4px;
border-width: 2px;
/* Çember = kutunun kendisi (14 + 2×4 + 2×2 = 26): yeşil ikonunkiyle
aynı boy. Pay yalnız başlık satırına ortalamak için. */
margin-top: -2px;
}
}
/* ═══════════════ Overview ═══════════════ */
/* WooCommerce ships this list as a floated, uppercase inline strip
(ul.order_details) — every one of those rules has to be undone here, and its
clearfix ::after has to be hidden: inside a grid container that pseudo-element
becomes a REAL grid cell, which is where the phantom empty box (and the extra
row of height) on mobile came from. */
.ks-vm-ty ul.ks-vm-ty-overview {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 10px;
/* The theme paints ul.order_details as one grey strip — with the items now
carrying their own cards, that fill only showed through as a phantom
block wherever the last grid row ran short. */
background: none;
}
.ks-vm-ty ul.ks-vm-ty-overview::before,
.ks-vm-ty ul.ks-vm-ty-overview::after {
display: none;
}
.ks-vm-ty ul.ks-vm-ty-overview li.ks-vm-ty-ov-item {
float: none;
margin: 0;
padding: 14px 16px;
border: 1px solid var(--ks-line, #e0e0e0);
border-radius: 12px;
background: var(--ks-surface, #fff);
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
font-size: 15px;
line-height: 1.4;
text-transform: none;
}
.ks-vm-ty ul.ks-vm-ty-overview li span.ks-vm-ty-ov-label {
font-size: 13px;
color: var(--ks-muted, #6a6a6a);
letter-spacing: 0.2px;
text-transform: none;
}
.ks-vm-ty ul.ks-vm-ty-overview li strong.ks-vm-ty-ov-value {
display: block;
font-size: 16px;
font-weight: 600;
line-height: 1.35;
color: var(--ks-ink, #1a1a1a);
overflow-wrap: break-word;
}
/* An e-mail address is the one value that cannot be broken sensibly — let it
shrink instead of splitting a domain across two lines. */
.ks-vm-ty ul.ks-vm-ty-overview li.email strong.ks-vm-ty-ov-value {
font-size: 14px;
}
.ks-vm-ty .ks-vm-ty-ov-value .woocommerce-Price-amount {
font-weight: 700;
}
/* ═══════════════ Payment instructions (bacs & co.) ═══════════════ */
/* ── Havale paneli (v2.326.0, operatör) ────────────────────────────────────
Dış kutu: uyarı renginde kenarlık + hafif gölge — sayfadaki tek "senden bir
iş bekleniyor" bloğu bu, sarı çağrı kutusuyla aynı aileden okunmalı.
Hesap tablosu: solda `rowspan`lı logo hücresi, sağda etiket/değer sütunları.
Satır sırası operatörün verdiği sıra (Banka · Hesap Sahibi · IBAN · Açıklama
· Tutar) ve PHP'de duruyor. */
/* 🚨 Sipariş Belgeleri başlığı da BURADA (v2.345.0, operatör: "diğerleriyle
aynı görünmeli"): markup KS_VM_Legal'den geldiği için sınıfı yok, seçici
bölüm üzerinden kuruluyor. Aşağıdaki `woocommerce-*` başlık kuralına
GERİ EKLEME — o kural 600 ağırlıkta ve dosyada daha SONRA geliyor. */
.ks-vm-ty .ks-vm-ty-bank-title,
.ks-vm-ty .ks-vm-ty-panel-title,
.ks-vm-ty .ks-vm-ty-docs .ks-vm-legal-order-docs h2 {
font-size: 17px;
font-weight: 700;
padding-bottom: 5px;
/* 🚨 Alt boşluk BURADA (5 padding + 10 margin = 15px): banka başlığı bu
değeri `.ks-vm-ty-payment-info h2` kuralından da alıyor (0,2,1 → o
kazanıyor), ikisi AYNI sayı olduğu için başlıklar hizalı duruyor.
Birini değiştiren ötekini de değiştirmeli. */
margin: 0 0 10px;
}
/* Tek fark RENK: banka paneli uyarı sarısı, diğer paneller metin rengi
(operatör, 22 Ağu 2026). Ölçüler yukarıdaki paylaşılan kuralda — buraya
punto/boşluk YAZMA, yoksa paneller birbirinden ayrışır. */
.ks-vm-ty .ks-vm-ty-bank-title {
color: var(--ks-warn, #a15c00);
}
.ks-vm-ty .ks-vm-ty-panel-title,
.ks-vm-ty .ks-vm-ty-docs .ks-vm-legal-order-docs h2 {
color: var(--e-global-color-text, #000000);
}
/* ── Kutu: havale hesabı tablosu + panel gövdeleri (v2.340.0) ──────────────
Dış kart yok; kenarlığı GÖVDE taşıyor. Havale tablosu, Ürünler, Adresler ve
Toplamlar AYNI kutuyu giyer — tek kural seti, buradan.
🚨 Yarıçap TABLOYA değil SARMALAYICIYA veriliyor + `overflow:hidden`:
`border-collapse:collapse` ile tablonun kendi köşeleri yuvarlanmıyor.
🚨 Kenarlık rengi TEK YERDE (`--e-global-color-dcb0b6a`): operatör burayı
değiştirince dört bölüm birden değişir. */
.ks-vm-ty .ks-vm-ty-bank-acct,
.ks-vm-ty .ks-vm-ty-box {
position: relative;
border: 1px solid var(--e-global-color-dcb0b6a, #D1D1D1);
border-radius: var(--ks-radius-field, 10px);
background: var(--ks-surface, #fff);
overflow: hidden;
}
.ks-vm-ty .ks-vm-ty-bank-acct + .ks-vm-ty-bank-acct {
margin-top: 14px;
}
/* Tema `table`ı kendi kenarlığı, şeritlemesi ve alt boşluğuyla boyuyor
(Botiga + WooCommerce) — hepsi burada geri alınıyor.
🚨 Havale hesabı ve Toplamlar tablosu AYNI kural setini paylaşır: ölçüyü
burada değiştiren ikisini birden değiştirir (operatör böyle istedi). */
.ks-vm-ty table.ks-vm-ty-bank-table,
.ks-vm-ty table.ks-vm-ty-totals-table {
width: 100%;
margin: 0;
border: 0;
border-collapse: collapse;
background: none;
font-size: 0.9em;
line-height: 1;
}
.ks-vm-ty table.ks-vm-ty-bank-table tr,
.ks-vm-ty table.ks-vm-ty-bank-table th,
.ks-vm-ty table.ks-vm-ty-bank-table td,
.ks-vm-ty table.ks-vm-ty-totals-table tr,
.ks-vm-ty table.ks-vm-ty-totals-table th,
.ks-vm-ty table.ks-vm-ty-totals-table td {
background: none;
border: 0;
}
/* Satır arası çizgi YALNIZ etiket + değer sütunlarında: logo hücresi bütün
satırlara yayıldığı için (rowspan) onu kesmemeli. */
.ks-vm-ty table.ks-vm-ty-bank-table tr + tr th,
.ks-vm-ty table.ks-vm-ty-bank-table tr + tr td,
.ks-vm-ty table.ks-vm-ty-totals-table tr + tr th,
.ks-vm-ty table.ks-vm-ty-totals-table tr + tr td {
border-top: 1px solid var(--e-global-color-dcb0b6a, #D1D1D1);
}
/* Logo sütunu: `rowspan` ile tablonun tamamı boyunca tek hücre. Logolar
kare/yuvarlak/yatık karışık geliyor; `contain` + sabit yükseklik sınırı
hepsini aynı kutuya oturtuyor (checkout'taki havale satırıyla aynı
gerekçe, ks-checkout.css). */
.ks-vm-ty .ks-vm-ty-bank-table td.ks-vm-ty-bank-logo {
width: 104px;
padding: 12px 14px;
text-align: center;
vertical-align: middle;
border-right: 1px solid var(--e-global-color-dcb0b6a, #D1D1D1);
}
.ks-vm-ty .ks-vm-ty-bank-logo img {
display: inline-block;
width: auto;
max-width: 100%;
height: auto;
max-height: 56px;
object-fit: contain;
border-radius: 6px;
}
/* Etiket sütunu. `nowrap`: etiket bölünmesin; gerçek tablo olduğu için
sütun genişliği bütün satırlarda ortak, dikey çizgi hep aynı yerde. */
.ks-vm-ty .ks-vm-ty-bank-table th.ks-vm-ty-bank-label,
.ks-vm-ty .ks-vm-ty-totals-table th.ks-vm-ty-tot-label {
width: 25%;
white-space: nowrap;
padding: 8px;
text-align: left;
vertical-align: middle;
font-size: 0.9em;
font-weight: 600;
color: var(--ks-muted, #6a6a6a);
border-right: 1px solid var(--e-global-color-dcb0b6a, #D1D1D1);
}
.ks-vm-ty .ks-vm-ty-bank-table td.ks-vm-ty-bank-cell,
.ks-vm-ty .ks-vm-ty-totals-table td.ks-vm-ty-tot-cell {
padding: 6px;
vertical-align: middle;
text-align: right;
}
/* Değer yazısı da banka satırlarıyla aynı (`.ks-vm-ty-bank-val`). */
.ks-vm-ty .ks-vm-ty-totals-table td.ks-vm-ty-tot-cell {
font-weight: 700;
color: var(--ks-ink, #1a1a1a);
}
/* Toplamlar satırları daha ferah (operatör, 23 Ağu 2026). 🚨 AYRIŞAN TEK ŞEY
İÇ BOŞLUK: punto, hizalama, sütun genişliği ve çizgiler yukarıdaki ORTAK
kurallarda kalıyor — havale tablosu 8px/6px ile duruyor, orada satır
yüksekliğini kopyalama düğmesi belirliyor. */
.ks-vm-ty .ks-vm-ty-totals-table th.ks-vm-ty-tot-label,
.ks-vm-ty .ks-vm-ty-totals-table td.ks-vm-ty-tot-cell {
padding: 10px;
}
/* min-width:0 ŞART: IBAN uzun, flex çocuğu daralamazsa hücreyi taşırır. */
.ks-vm-ty .ks-vm-ty-bank-cellin {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
min-width: 0;
}
.ks-vm-ty .ks-vm-ty-bank-val {
font-weight: 700;
color: var(--ks-ink, #1a1a1a);
overflow-wrap: anywhere;
}
/* Mobil logosu: masaüstünde logo SÜTUNU var, bu kopya gizli durur. */
.ks-vm-ty img.ks-vm-ty-bank-logo-sm {
display: none;
flex: 0 0 auto;
width: 22px;
height: 22px;
max-height: none;
object-fit: contain;
}
/* Kopyalama düğmesi. `body` öneki ŞART: Botiga `button`ı Customizer'dan
boyuyor (dolgu rengi + pill kenar), reset olmadan satırın ortasında siyah
bir hap belirir — `.ks-btn` yerine bu ikon düğmesi kullanıldığı için
bileşenin kendi resetinden faydalanamıyoruz. */
body .ks-vm-ty .ks-vm-ty-copy {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0;
margin: 0;
border: 0;
border-radius: 6px;
background: none;
box-shadow: none;
line-height: 0;
color: var(--ks-muted, #6a6a6a);
cursor: pointer;
transition: color .15s ease, background-color .15s ease;
}
body .ks-vm-ty .ks-vm-ty-copy:hover,
body .ks-vm-ty .ks-vm-ty-copy:focus-visible {
color: var(--ks-ink, #1a1a1a);
background: rgba(0, 0, 0, .06);
}
.ks-vm-ty .ks-vm-ty-copy svg {
width: 18px;
height: 18px;
}
/* Kopyalandı: ikon check'e döner, 1,6 sn sonra JS sınıfı kaldırır. */
.ks-vm-ty .ks-vm-ty-copy .ks-vm-ty-copy-done,
.ks-vm-ty .ks-vm-ty-copy.is-copied .ks-vm-ty-copy-idle {
display: none;
}
.ks-vm-ty .ks-vm-ty-copy.is-copied .ks-vm-ty-copy-done {
display: block;
}
body .ks-vm-ty .ks-vm-ty-copy.is-copied {
color: var(--ks-ok, #1a7f37);
background: none;
}
/* Ekran okuyucu duyurusu — görünmez ama `display:none` DEĞİL, yoksa
aria-live okunmaz. */
.ks-vm-ty .ks-vm-ty-bank-live {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* Mobil: logo SÜTUNU kalkar (dar ekranda bir sütunu tek başına yiyordu),
logo küçülüp banka adının önüne geçer. 🚨 `rowspan`lı hücreyi gizlemek
güvenli: diğer satırlarda o sütunda zaten hücre yok, tablo bozulmuyor. */
@media (max-width: 575px) {
.ks-vm-ty .ks-vm-ty-bank-table td.ks-vm-ty-bank-logo {
display: none;
}
.ks-vm-ty img.ks-vm-ty-bank-logo-sm {
display: block;
}
.ks-vm-ty table.ks-vm-ty-bank-table {
font-size: 0.9em;
}
.ks-vm-ty table.ks-vm-ty-totals-table {
font-size: 0.9em;
}
.ks-vm-ty .ks-vm-ty-bank-table th.ks-vm-ty-bank-label,
.ks-vm-ty .ks-vm-ty-totals-table th.ks-vm-ty-tot-label {
padding: 9px 10px;
font-size: 0.9em;
}
.ks-vm-ty .ks-vm-ty-bank-table td.ks-vm-ty-bank-cell,
.ks-vm-ty .ks-vm-ty-totals-table td.ks-vm-ty-tot-cell {
padding: 6px 8px 6px 10px;
}
.ks-vm-ty .ks-vm-ty-totals-table th.ks-vm-ty-tot-label,
.ks-vm-ty .ks-vm-ty-totals-table td.ks-vm-ty-tot-cell {
padding: 11px 12px;
}
}
.ks-vm-ty .ks-vm-ty-payment-info,
.ks-vm-ty .ks-vm-ty-panel {
padding: 25px;
border: 1px solid var(--ks-line, #e0e0e0);
border-radius: var(--ks-radius-card, 16px);
background: var(--ks-surface, #fff);
}
.ks-vm-ty .ks-vm-ty-payment-info > :first-child,
.ks-vm-ty .ks-vm-ty-panel > :first-child {
margin-top: 0;
}
.ks-vm-ty .ks-vm-ty-payment-info > :last-child,
.ks-vm-ty .ks-vm-ty-panel > :last-child {
margin-bottom: 0;
}
.ks-vm-ty .ks-vm-ty-payment-info h2,
.ks-vm-ty .ks-vm-ty-payment-info h3 {
font-size: 17px;
margin: 0 0 10px;
}
/* ── Panel başlığı ────────────────────────────────────────────────────────
`panel()` başlığın sağına isteğe bağlı bir künye alabiliyor; v2.332.0'da
ödeme yöntemi oradan tablonun ilk satırına taşındı, şu an kullanan yok.
🚨 `margin-bottom` YOK: başlıkla kutu arasındaki boşluk başlığın KENDİ
padding+margin'inden gelir (banka bölümüyle aynı olsun diye) — buraya
boşluk yazılırsa havale bölümüyle hizası bozulur. */
.ks-vm-ty .ks-vm-ty-panel-head {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 4px 14px;
margin-bottom: 0;
}
/* ── [ks_thankyou_items]: alt alta tek satır ürünler ──────────────────────
Satır düzeni sepet sayfasının kısaltılmışı: görsel · ad+adet · tutar.
`min-width:0` ŞART — uzun varyasyon adı yoksa tutar sütununu ezer. */
.ks-vm-ty ul.ks-vm-ty-lines {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0;
}
.ks-vm-ty .ks-vm-ty-line {
display: flex;
align-items: center;
gap: 14px;
margin: 0;
padding: 20px;
}
/* Satırlar kutunun İÇİNDE: iç boşluk ve ayırıcı çizgi banka tablosunun
satırlarıyla aynı (8px + aynı çizgi rengi). */
.ks-vm-ty .ks-vm-ty-line + .ks-vm-ty-line {
border-top: 1px solid var(--e-global-color-dcb0b6a, #D1D1D1);
}
.ks-vm-ty .ks-vm-ty-line-media {
flex: 0 0 auto;
width: 56px;
}
/* 🚨 `height:auto` ve `max-height:none`: `.elementor img` ile temanın ürün
görseli kuralları yoksa oranı bozuyor. Ürün görselleri 3:4
([[ks-gallery-3-4]]), kutu da o oranda. */
.ks-vm-ty img.ks-vm-ty-line-thumb {
width: 56px;
height: auto;
max-height: none;
display: block;
border-radius: 8px;
background: #f6f6f6;
}
/* 🚨 `line-height` KUTUYA da yazılmalı, yalnız ``ya değil: ad satır-içi bir
eleman, satır kutusunun yüksekliğini blok kabın STRUT'u belirliyor. Sadece
``ya verilince hesaplanan değer 16,5px oluyordu ama satırlar yine 29,6px
aralıkla diziliyordu (ölçüldü). */
.ks-vm-ty .ks-vm-ty-line-info {
flex: 1 1 auto;
min-width: 0;
/* Punto da burada: strut 16px'ten hesaplanınca satır aralığı 17,6px
oluyordu, adın kendi 15px'inden 16,5px olması gerekirken. */
font-size: 15px;
line-height: 1.1;
}
body .ks-vm-ty a.ks-vm-ty-line-name,
.ks-vm-ty .ks-vm-ty-line-name {
font-size: 15px;
font-weight: 600;
line-height: 1.3;
color: var(--ks-ink, #1a1a1a);
overflow-wrap: anywhere;
}
/* Adet ve tutar İKİ AYRI KOLON, ikisi de sağa hizalı ve AYNI YAZI (operatör,
22 Ağu 2026: "adetler de tutarlar gibi yazsın"). 🚨 Ortak kural — adete ayrı
punto/renk yazma, ikisi bir daha ayrışmasın. Sabit genişlik: satırlar
arasında rakamlar alt alta hizalansın. */
.ks-vm-ty .ks-vm-ty-line-qty,
.ks-vm-ty .ks-vm-ty-line-total {
flex: 0 0 auto;
text-align: right;
font-size: 15px;
font-weight: 700;
white-space: nowrap;
color: var(--ks-ink, #1a1a1a);
}
.ks-vm-ty .ks-vm-ty-line-qty {
min-width: 76px;
}
.ks-vm-ty .ks-vm-ty-line-total {
min-width: 104px;
}
/* ── [ks_thankyou_addresses] ──────────────────────────────────────────── */
/* İki adres ALT ALTA, her biri kendi başlığıyla (operatör, 22 Ağu 2026) —
yan yana grid denendi, geri alındı. Bloklar kutunun içinde, aralarındaki
çizgi banka tablosunun satır çizgisiyle aynı. */
/* Adres bloğu çok satırlı bir metin, satır değil: iç boşluğu tablo
satırlarından daha geniş (operatör, 23 Ağu 2026). */
.ks-vm-ty .ks-vm-ty-addr {
padding: 24px;
}
.ks-vm-ty .ks-vm-ty-addr + .ks-vm-ty-addr {
border-top: 1px solid var(--e-global-color-dcb0b6a, #D1D1D1);
}
.ks-vm-ty .ks-vm-ty-addr-title {
font-size: 14px;
font-weight: 600;
margin: 0 0 6px;
color: var(--ks-muted, #6a6a6a);
}
.ks-vm-ty p.ks-vm-ty-addr-name {
margin: 0 0 4px;
font-size: 15px;
font-weight: 700;
color: var(--ks-ink, #1a1a1a);
}
/* 🚨 Telefon ve e-posta, adres satırlarıyla BİREBİR AYNI yazı (operatör,
22 Ağu 2026): ayrı punto/renk YAZMA — üçü tek kuralda. */
.ks-vm-ty address.ks-vm-ty-addr-lines,
.ks-vm-ty p.ks-vm-ty-addr-meta {
margin: 0;
font-style: normal;
font-size: 15px;
line-height: 1.6;
color: var(--e-global-color-text, #000000);
}
/* ── [ks_thankyou_totals] ─────────────────────────────────────────────── */
/* 🚨 Satırların ölçüsü/çizgisi HAVALE TABLOSUYLA ORTAK kurallardan gelir
("Hesap tablosu" bloğu) — buraya punto/boşluk yazma, ikisi ayrışır.
Burada yalnız bu tabloya özgü İKİ fark duruyor: indirim rengi ve genel
toplamın büyük puntosu. */
.ks-vm-ty .ks-vm-ty-total-row--minus td,
.ks-vm-ty .ks-vm-ty-total-row--minus td .amount {
color: var(--e-global-color-secondary, #1a7f37);
}
/* 📱 Dar kolonda satır GRID olur: üstte ad, altında adet + tutar (adet sola,
tutar sağa yaslı); görsel iki satırı da kapsar. `flex-wrap` ile denendi ve
OLMADI — ad sütunu sıkışabildiği için satır hiç sarmıyor, ad kelime kelime
kırılıyordu (ölçüldü, 360px). Grid'de kolonlar sabit, sarma kararı bize ait.
🚨 EŞİK 767px, dosyanın geri kalanındaki 575 DEĞİL: bu sitede Elementor'un
mobil kırılımı 767 (`breakpoints`ten okundu) — düzen 767'de tek kolona
iniyor, satır da orada yığılmalı. 575 iken 576-767 arasında ad kolonu
sıkışıyordu (operatör bildirdi). */
@media (max-width: 767px) {
.ks-vm-ty .ks-vm-ty-line {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas:
"media name name"
"media qty total";
column-gap: 12px;
row-gap: 4px;
align-items: center;
}
.ks-vm-ty .ks-vm-ty-line-media {
grid-area: media;
align-self: start;
width: 46px;
}
.ks-vm-ty img.ks-vm-ty-line-thumb {
width: 46px;
}
.ks-vm-ty .ks-vm-ty-line-info {
grid-area: name;
}
.ks-vm-ty .ks-vm-ty-line-qty {
grid-area: qty;
min-width: 0;
text-align: left;
}
.ks-vm-ty .ks-vm-ty-line-total {
grid-area: total;
min-width: 0;
text-align: right;
}
}
/* 🚨 Bu kural taban `.ks-vm-ty-payment-info`den SONRA gelmek ZORUNDA: ikisinin
de özgüllüğü (0,2,0), taban kısayol `border`'ı yazıyor ve sonra gelen kazanır.
Önce yazılmıştı, kenarlık gri kaldı (ölçüldü). */
/* v2.339.0 havale bölümünde, v2.340.0 üç panelde: DIŞ kart KALKTI — gövde
kendi kenarlığını taşıdığı için iki kenarlık iç içe duruyordu.
🚨 Sıfırlama `--bank`ta ve panellerde: diğer ödeme yöntemlerinin yönergesi
(PayTR/Stripe notları) çıplak metin, kartsız kalırsa sayfada dağılır — o
yüzden taban `.ks-vm-ty-payment-info` kartını KORUYOR. */
.ks-vm-ty .ks-vm-ty-payment-info--bank,
.ks-vm-ty .ks-vm-ty-panel {
padding: 0;
border: 0;
border-radius: 0;
background: none;
}
/* ═══════════════ Items + totals table ═══════════════ */
/* WooCommerce'in kendi yedek başlıkları (düzende KS bölümü yoksa basılanlar).
🗑️ Sipariş Belgeleri başlığı buradan ALINDI: artık panel başlıklarıyla aynı
kuralı paylaşıyor (dosyanın başı). */
.ks-vm-ty .woocommerce-order-details__title,
.ks-vm-ty .woocommerce-column__title {
font-size: 17px;
font-weight: 600;
margin: 0 0 12px;
color: var(--ks-ink, #1a1a1a);
}
.ks-vm-ty table.order_details {
width: 100%;
margin: 0;
border: 1px solid var(--ks-line, #e0e0e0);
border-radius: var(--ks-radius-card, 16px);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
.ks-vm-ty table.order_details th,
.ks-vm-ty table.order_details td {
padding: 14px 18px;
border: 0;
border-bottom: 1px solid var(--ks-line, #e0e0e0);
text-align: left;
vertical-align: top;
font-size: 15px;
}
.ks-vm-ty table.order_details thead th {
font-size: 13px;
font-weight: 600;
color: var(--ks-muted, #6a6a6a);
text-transform: none;
background: #fafafa;
}
.ks-vm-ty table.order_details td.product-total,
.ks-vm-ty table.order_details th.product-total,
.ks-vm-ty table.order_details tfoot td {
text-align: right;
}
/* The item column is the one with a long name in it; leaving the split to the
browser gave the totals column 433 of 390 available pixels (the customer
note lives in that column and used to be nowrap). */
.ks-vm-ty table.order_details td.product-name,
.ks-vm-ty table.order_details th.product-name,
.ks-vm-ty table.order_details tfoot th {
width: 60%;
}
/* Only the money may not break. `white-space: nowrap` on the whole totals
column pushed the customer-note row (a plain sentence in the same column)
out to ~550px and the table overflowed its card on a phone. */
.ks-vm-ty table.order_details .woocommerce-Price-amount,
.ks-vm-ty table.order_details .ks-vm-order-shipped-via {
white-space: nowrap;
}
/* The note is prose — it wraps, and it does not need the totals alignment. */
.ks-vm-ty table.order_details tfoot tr:has(> th) td {
word-break: normal;
}
.ks-vm-ty table.order_details tfoot th {
font-weight: 400;
color: var(--ks-muted, #6a6a6a);
}
.ks-vm-ty table.order_details tfoot tr:last-child th,
.ks-vm-ty table.order_details tfoot tr:last-child td {
border-bottom: 0;
font-size: 16px;
font-weight: 700;
color: var(--ks-ink, #1a1a1a);
}
.ks-vm-ty table.order_details td.product-name a {
color: var(--ks-ink, #1a1a1a);
text-decoration: none;
font-weight: 600;
}
.ks-vm-ty table.order_details td.product-name a:hover {
text-decoration: underline;
}
.ks-vm-ty table.order_details td.product-name .wc-item-meta,
.ks-vm-ty table.order_details td.product-name dl.variation {
margin: 6px 0 0;
padding: 0;
font-size: 13.5px;
color: var(--ks-muted, #6a6a6a);
}
.ks-vm-ty table.order_details td.product-name .wc-item-meta li,
.ks-vm-ty table.order_details td.product-name dl.variation dt,
.ks-vm-ty table.order_details td.product-name dl.variation dd {
margin: 0;
display: inline;
}
.ks-vm-ty table.order_details td.product-name .wc-item-meta li p,
.ks-vm-ty table.order_details td.product-name dl.variation p {
display: inline;
margin: 0;
}
.ks-vm-ty table.order_details strong.product-quantity {
font-weight: 400;
color: var(--ks-muted, #6a6a6a);
}
/* The carrier logo the delivery module injects into the shipping total row. */
.ks-vm-ty table.order_details tfoot img {
max-height: 20px;
width: auto;
vertical-align: middle;
}
/* ═══════════════ Delivery + documents ═══════════════ */
.ks-vm-ty .ks-vm-ty-delivery p.ks-vm-order-delivery {
margin: 0;
}
/* ── Teslimat paneli (v2.329.0): solda kargo logosu, sağında cümle.
🚨 v2.330.0 — TİPOGRAFİ VE İKON ÖLÇÜSÜ MESAJ KUTUSUYLA PAYLAŞILIYOR
(operatör: "logo teşekkür bandındaki ikon kadar olsun, metin de o bandın
alt satırıyla birebir aynı görünsün"). Bu yüzden burada punto/ağırlık/renk
YAZMIYORUZ: cümle `.ks-vm-ty-msg-sub` ile AYNI kuralda, logo da
`.ks-vm-ty-msg-icon` ile aynı kuralda duruyor (dosyanın başı). Mesaj bandının
punto ayarları üç kez değişti; tekrar yazmak iki yüzeyi yine ayırırdı.
Tek şart: kutunun `font-size`'ı mesaj kutusuyla aynı (16px) olmalı, çünkü
paylaşılan alt-metin kuralı `em` ile ölçüyor.
Zemin frontend.css'teki `p.ks-vm-order-delivery` ile aynı — o satır
Hesabım/e-posta tarafında yaşamaya devam ediyor. */
.ks-vm-ty .ks-vm-ty-shipping {
display: flex;
align-items: center;
gap: 12px;
padding: 20px;
border-radius: 8px;
background: #f6f6f6;
font-size: 16px;
}
/* Ölçü PAYLAŞILAN kuraldan (font-size 42px / mobilde 28px); burada yalnız
1em'e bağlanıp yuvarlanıyor. Phosphor ikonları da 1em, yani logo ile ikon
tek sayıdan sürülüyor — biri değişince öteki de değişir.
🚨 `max-height:none` şart: `.elementor img` ve temanın logo kuralları yoksa
görseli kırpıyor. `contain` + iç boşluk, `cover` yerine bilinçli: yatık
logolar (bazı kargo firmaları) daire içinde kırpılmasın. */
.ks-vm-ty img.ks-vm-ty-shipping-logo {
width: 34px;
height: 34px;
max-height: none;
object-fit: contain;
display: block;
background: var(--ks-surface, #fff);
border: 1px solid var(--ks-line, #e0e0e0);
border-radius: 50%;
}
.ks-vm-ty .ks-vm-ty-shipping-text {
min-width: 0;
}
/* Cümledeki değişkenler (hazırlık süresi, kargo firması, teslimat süresi)
kalın — operatör, 22 Ağu 2026. Tema `strong`a 600 veriyor olabilir, sayı
açıkça yazılıyor. */
.ks-vm-ty .ks-vm-ty-shipping-text strong {
font-weight: 700;
}
@media (max-width: 575px) {
.ks-vm-ty .ks-vm-ty-shipping {
gap: 10px;
align-items: flex-start;
}
}
.ks-vm-ty .ks-vm-ty-docs .ks-vm-legal-order-docs {
margin: 0;
}
/* ═══════════════ Addresses ═══════════════ */
/* 🗑️ v2.337.0: WooCommerce'in `order-details-customer.php` çıktısını süsleyen
kurallar SİLİNDİ. `[ks_thankyou_addresses]` v2.331.0'dan beri kendi markup'ını
basıyor, yani `.ks-vm-ty-addresses` içinde `.woocommerce-column*` bir daha
OLUŞAMAZ. Ölü olmakla kalmıyorlardı: `.ks-vm-ty-addresses address` (0,2,1)
dosyada DAHA SONRA geldiği için bizim adres kuralımızı yeniyor ve telefon/
e-posta ile adres satırlarının rengini ayırıyordu (ölçüldü: adres #1a1a1a,
meta #000). Bölümün stilleri tek yerde: "[ks_thankyou_addresses]" bloğu. */
/* ═══════════════ Actions ═══════════════ */
/* The buttons themselves are the shared .ks-btn component (ks-buttons.css) —
only their row belongs here. */
.ks-vm-ty .ks-vm-ty-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
/* ═══════════════ Elementor canvas ═══════════════ */
.ks-vm-ty-ed {
padding: 18px;
border: 1px dashed #c8c8c8;
border-radius: 10px;
background: #fafafa;
color: #6a6a6a;
font-size: 13.5px;
text-align: center;
}
/* ═══════════════ Mobile ═══════════════ */
@media (max-width: 600px) {
.ks-vm-ty table.order_details th,
.ks-vm-ty table.order_details td {
padding: 12px 14px;
font-size: 14.5px;
}
.ks-vm-ty .ks-vm-ty-actions a.ks-vm-ty-btn {
flex: 1 1 100%;
}
}
/* ============================================================================
* MOBİL HAYALET BOŞLUK KİLİDİ — özet kartının altındaki ~148px
* ----------------------------------------------------------------------------
* Elementor mobilde HER konteynere `flex-wrap: wrap` varsayılanını basar. Bu
* şablonun kök konteyneri sütun yönlü bir yığın; sarma açıkken tarayıcı, ızgara
* (grid) içeren bölümün yüksekliğini "intrinsic" ölçümle belirliyor ve ölçüm
* gerçek yerleşimden ~148px büyük çıkıyor: özet kartı 258px, kutusu 406px —
* aradaki fark kartın altında açıklanamayan bir boşluk olarak duruyor
* (ölçüldü, 20 Ağu 2026).
*
* Aynı hata ürün sayfasında da yaşandı ve orada da koddan kilitlendi
* (frontend.css "MOBİL HAYALET BOŞLUK KİLİDİ"). Panelden de yapılabilir
* (konteyner → Düzen → Wrap = No wrap, mobil sekmesi) ama kapsamlı editör
* kaydetmeleri o ayarı iki kez sildi. Sütun yönlü konteynerde sarma zaten
* anlamsız → tasarımda hiçbir şeyi değiştirmez, yalnızca hatanın dönmesini
* imkânsız kılar. YALNIZ bizim kök konteynerimizi bağlar; operatörün
* ekleyeceği satır yönlü konteynerler serbest kalır.
* ========================================================================== */
@media (max-width: 767px) {
.ks-vm-ty .e-con.ks-ty-layout,
.ks-vm-ty .e-con.ks-ty-layout > .e-con-inner {
flex-wrap: nowrap;
}
}
/* ═══════════════ Sipariş Belgeleri (ÖBF / MSS) ═══════════════
*
* 🚨 ks-checkout.css'ten TAŞINDI (24 Ağu 2026). Bu bölüm bitmiş bir siparişin
* belgelerini çiziyor ve İKİ ekranda birden görünüyor: teşekkür sayfası ve
* hesaptaki sipariş detayı. İkisinin de yüklediği tek sayfa dosyası bu; kurallar
* checkout'ta kalınca hesap sayfasında belgeler çıplak `` satırı olarak
* duruyordu. Markup KS_VM_Legal'den geliyor, iki ekranda da aynı. */
.ks-vm-legal-order-docs { margin-top: 28px; }
.ks-vm-legal-order-docs > h2 { font-size: 18px; margin-bottom: 10px; }
.ks-vm-legal-order-doc { border: 1px solid var(--ks-field-border-color, #d1d1d1); border-radius: 8px; margin-bottom: 10px; padding: 0; }
.ks-vm-legal-order-doc > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; }
.ks-vm-legal-order-doc[open] > summary { border-bottom: 1px solid var(--ks-field-border-color, #d1d1d1); }
.ks-vm-legal-order-doc > .ks-vm-legal-doc { padding: 14px 16px; }