/* PT Çıkış Teklifi — yeni ürün sayfasıyla aynı tasarım dili.
   Renk ve tipografi pt-urun-sayfasi'ndan; oradaki iki ders burada da geçerli:
   sheet'e ölçekli giriş verilmez, yükseklik dvh ile ölçülür. */
:root {
	--ptct-ink: #000;
	--ptct-soluk: #5b6270;
	--ptct-aksan: #165ec9;
	--ptct-cizgi: #d9d9d9;
}

body.pt-ct-acik { overflow: hidden; }


.pt-ct-modal {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.pt-ct-zemin { position: absolute; inset: 0; background: rgba(0,0,0,.45); }

/* TEMA YALITIMI — bunu silme.
   Flatsome'un `.button, button, input[type=button]…` kurali CIPLAK `button`u da
   kapsiyor ve sunlari dayatiyor: box-sizing:border-box + padding:0 1.2em,
   min-height:2.5em, min-width:24px, margin-right:1em, line-height:2.4em,
   text-transform:uppercase, font-weight:bolder, letter-spacing:.03em.
   Kapatma dugmesinde sonuc olumcul: 34px'lik daireye ~38px yatay dolgu girince
   icerik genisligi SIFIRA dusuyor ve X ikonu yok oluyor; min-height daireyi
   sisiriyor, margin-right onu yerinden kaydiriyor. Popup tema disinda yasayan
   bir yuzey oldugu icin butun dugmelerimizi tek yerden notrluyoruz. */
.pt-ct-modal button,
.pt-ct-cip {
	box-sizing: border-box;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 0;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	border: 0;
	background: none;
	box-shadow: none;
	transition: none;
	max-width: none;
	vertical-align: middle;
	-webkit-appearance: none;
	appearance: none;
}
/* Ikonun olcusu bize ait olsun: tema kendi bilesenlerinde `button svg`e
   height:36px!important veriyor, ileride kapsami genislerse hazir olalim. */
.pt-ct-modal button svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	fill: none;
}

.pt-ct-panel {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: #fff;
	border-radius: 20px;
	padding: 28px 24px 24px;
	text-align: center;
	box-shadow: 0 30px 80px rgba(0,0,0,.28);
	animation: ptct-in .2s ease;
}
/* En kotu kare bile OKUNABILIR olmali. Olculdu (7 Eyl 2026): animasyon bazi
   olusturma baglamlarinda 0. karede donup kaliyor ve fill-mode:none oldugu
   icin ekranda "from" karesi kaliyor — opacity:0 ile panel gorunmez, teklif
   hic gosterilmemis oluyordu. Giris efekti, teklifin gorunmesinden daha
   onemli degil. */
@keyframes ptct-in { from { opacity: .6; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pt-ct-modal .pt-ct-x {
	position: absolute; top: 12px; right: 12px;
	width: 34px; height: 34px; border-radius: 50%;
	background: #ebebef; color: #1d1d1f; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0; flex: 0 0 auto;
}
.pt-ct-panel h3 { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--ptct-ink); }
.pt-ct-metin { margin: 0 0 14px; font-size: 14px; color: var(--ptct-soluk); }
.pt-ct-tutar { font-size: 40px; font-weight: 700; letter-spacing: -.02em; color: var(--ptct-aksan); line-height: 1.1; }

.pt-ct-kod {
	display: flex; align-items: center; gap: 8px; justify-content: center;
	margin: 14px 0 8px;
}
/* Kod kutusu ile Kopyala dugmesi AYNI yukseklikte olmali. Yazi boylari
   farkli (18px / 13.5px) oldugu icin dolguya birakilirsa kutu ~40px,
   dugme ~36px cikiyor ve yan yana durduklarinda dengesiz gorunuyorlardi.
   Ikisine de ayni min-height + dikey ortalama veriyoruz; dolgu yalniz
   yatayda kaliyor. */
.pt-ct-kod code {
	display: inline-flex; align-items: center;
	min-height: 44px; padding: 0 16px; line-height: 1;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 18px; font-weight: 600; letter-spacing: .06em;
	background: #f5f5f7; border: 1px dashed var(--ptct-cizgi);
	border-radius: 10px; color: var(--ptct-ink);
	box-sizing: border-box;
}
.pt-ct-modal .pt-ct-kopyala {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 18px; line-height: 1;
	border: 1px solid var(--ptct-cizgi); background: #fff; border-radius: 10px;
	font: inherit; font-size: 13.5px; font-weight: 600;
	color: var(--ptct-aksan); cursor: pointer;
	white-space: nowrap; flex: 0 0 auto; box-sizing: border-box;
}
.pt-ct-sayac { font-size: 13px; color: var(--ptct-soluk); }
.pt-ct-sayac b { color: var(--ptct-ink); font-variant-numeric: tabular-nums; }
.pt-ct-kosul { margin: 10px 0 6px; font-size: 12.5px; color: var(--ptct-soluk); }
/* Sayacin nedenini anlatan satir — kosuldan bir tik daha silik dursun ki
   sirayi bozmasin: once tutar, sonra kod, sonra kosul, en sonda aciklama. */
.pt-ct-not { margin: 0 0 16px; font-size: 11.5px; line-height: 1.45; color: var(--ptct-soluk); opacity: .8; }

.pt-ct-modal .pt-ct-devam {
	width: 100%; border-radius: 999px;
	background: var(--ptct-aksan); color: #fff;
	font: inherit; font-size: 15px; font-weight: 700;
	line-height: 1.3; padding: 14px 20px; cursor: pointer;
}

/* Mobil: alttan açılan sayfa. Ölçekli giriş YOK (yanlarda boşluk üretiyor),
   yükseklik dvh (adres çubuğu altında kalmasın). */
@media (max-width: 600px) {
	.pt-ct-modal {
		padding: 0;
		align-items: flex-end;
		height: 100vh;
		height: 100dvh;
	}
	.pt-ct-panel {
		max-width: none;
		border-radius: 18px 18px 0 0;
		padding: 26px 18px calc(20px + env(safe-area-inset-bottom));
		animation-name: ptct-sheet;
	}
	/* Mobil giriste ne transform ne de tam saydamsizlik kullaniyoruz.
	   Olculdu (7 Eyl 2026): animasyon bazi olusturma baglamlarinda 0. karede
	   donup kaliyor ve fill-mode:none oldugu icin ekranda "from" karesi kaliyor.
	   translateY(100%) ile panel tamamen ekran disindaydi, 40px'te alt dugme
	   kirpiliyordu, opacity:0 ile de gorunmez kalirdi. Bu yuzden en kotu kare
	   bile okunabilir olmali: .6 saydamsizlik. Musteriye teklifi gostermek,
	   giris efektinden onemli. */
	@keyframes ptct-sheet { from { opacity: .6; } to { opacity: 1; } }
	.pt-ct-panel::before {
		content: ''; position: absolute; top: 8px; left: 50%;
		transform: translateX(-50%); width: 38px; height: 4px;
		border-radius: 999px; background: #d4d4dc;
	}
	.pt-ct-modal .pt-ct-x { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) { .pt-ct-panel { animation: none; } }

/* Kupon kulakcigi — sag kenarda dikey serit (kitap ayraci gibi).
   Yazi asagidan yukari okunur. Sepet ikonunun yaninda duruyordu ama orada
   goze carpmiyordu; alt bant KULLANILMIYOR cunku orada pt-us sticky bari,
   cerez bandi ve sohbet balonu zaten var.
   z-index modalin (100001) ALTINDA kalir ki popup aciyken uzerine binmesin. */
.pt-ct-cip {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 99990;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 12px 0 0 12px;
	padding: 13px 8px;
	background: var(--ptct-aksan);
	color: #fff;
	font-family: "Poppins", -apple-system, sans-serif;
	cursor: pointer;
	/* --ptct-aksan'in rgba karsiligi — CSS degiskenleri alfa tasiyamiyor. */
	box-shadow: -4px 4px 18px rgba(22, 94, 201, .34);
}

/* Dondurme AYRI kapta: dugmenin kendi transform'u dikey ortalamayi yapiyor,
   ikisi ayni elemanda cakisirdi. writing-mode + rotate(180deg) birlesimi
   yaziyi asagidan yukari okutur; kap icerige gore kendi boyunu alir, sabit
   yukseklik vermiyoruz ki tutar buyudugunde kirpilmasin. */
.pt-ct-cip-ic {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	display: flex;
	align-items: center;
	gap: 9px;
	line-height: 1;
	white-space: nowrap;
}

.pt-ct-cip-tutar { font-size: 13.5px; font-weight: 700; letter-spacing: .01em; }
/* "indirim" kelimesi olmadan serit yalnizca bir rakam ve bir sayacti; ne
   oldugu anlasilmiyordu. Tutardan bir tik silik durur ki rakam onde kalsin. */
.pt-ct-cip-etiket { font-size: 11px; font-weight: 600; opacity: .92; }
.pt-ct-cip-sayac { font-size: 11px; font-weight: 600; opacity: .9; font-variant-numeric: tabular-nums; }
.pt-ct-cip-ayrac { width: 12px; height: 1px; background: rgba(255,255,255,.45); flex: 0 0 auto; }

/* Mobilde biraz ince ve biraz yukarida: parmagin dogal ulastigi bolgede
   dursun, alt kenardaki katmanlarla hic kesismesin. */
@media (max-width: 849px) {
	.pt-ct-cip { top: 42%; padding: 11px 6px; border-radius: 10px 0 0 10px; }
	.pt-ct-cip-tutar { font-size: 12px; }
	.pt-ct-cip-etiket { font-size: 10px; }
	.pt-ct-cip-sayac { font-size: 10px; }
	.pt-ct-cip-ic { gap: 7px; }
}