/* ============================================================
   KÖPRÜ — imflexi'nin ürettiği gerçek sınıfları tasarıma bağlar

   Tasarım klasöründen gelen dosyalara (tokens / main / header /
   footer / effect / pages) DOKUNULMAZ; onlar tasarımın kendisi ve
   kaynakla birebir karşılaştırılabilir kalmalı. Tasarımla gerçek
   şablonlar arasındaki her yapıştırma bu dosyada durur.

   Buradaki sınıf adları uydurma değildir; devralınan şablonların
   fiilen bastığı adlar:
     themes/default/layouts/products/product-list-item.default.php
     themes/default/common/main.html
     Lib\Navigation\NavigationItem::render()

   NEDEN ŞABLON EZMEK YERİNE CSS: platformun ürün kartı schema.org
   işaretlemesi, stok mantığı, varyant ve sepet düğmesi taşıyor.
   Kartı yeniden yazmak çalışan işlevi riske atar; görünümü
   bağlamak yetiyor. Birebir piksel gerekirse kart şablonu sonra
   ayrıca ezilebilir.
   ============================================================ */

/* ---------- Klasik slider KAPALI ----------
   Tasarım kararı (tasarım README'si): "Klasik slider yerine değer
   önerisi + Kumandanı bul kutusu. Platform slider'ı isterse
   side.revslider konteyneri korunmuş ama display:none."

   Konteyner şablonda DURUYOR — platform sözleşmesi (#banner_container,
   #banner_container-top) ve Owl/Revo başlatması onu arıyor; kaldırmak
   JS hatası üretir. Yalnız gizlenir.

   Açmak için bu iki kuralı silin. Not: gizlemek SUNUMDUR; içerideki
   eski slaytlar hâlâ veritabanındadır (imf_sliders) ve yeni mağazaya
   geçerken ayrıca temizlenmelidir. */
.rev-slider,
.rev-slider-top { display: none; }

/* ============================================================
   ANA MENÜ — tasarım çizgisinde sadeleştirme

   Tasarımın .mainmenu'sü tek satırlık bir flex ve sarmıyor;
   .mega ise absolute + left:0 + min-width:560px. Bu ikisi az
   sayıda öğe varsayıyor. Üst bardaki dal sayısı configs.php'de
   sınırlandı (kc_menu_ust); buradakiler o kararın görsel
   tamamlayıcısı. Tasarım dosyalarına dokunulmuyor.
   ============================================================ */

/* Sığmazsa son çare: öğeler kısalsın, menü taşmasın.
   min-width:0 olmadan flex öğesi içeriğinden küçülmez ve
   .mainmenu konteyneri aşar. */
.mainmenu { min-width: 0; flex-wrap: nowrap; }
.mainmenu > li { min-width: 0; }
.mainmenu > li > a {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* SAĞ KENAR TAŞMASI: .mega left:0 ile açılıyor, sağdaki son
   öğelerde panel ekranın dışına çıkıyordu. Son iki öğe sağa
   hizalanır. */
.mainmenu > li:nth-last-child(-n+2) .mega { left: auto; right: 0; }

/* "Tüm Kategoriler" megası uzun kuyruğu taşıyor: daha geniş ve
   üç sütun, çünkü içinde her kök dal var. Tasarımın 2 sütunlu
   .mega kuralını yalnız bu panel için genişletiyoruz. */
.mega-allcats {
	grid-template-columns: repeat(3, 1fr);
	min-width: 720px;
}
.mega-allcats .n,
.mega .n {
	margin-left: auto;
	font-size: 11px;
	font-weight: 700;
	color: var(--muted-soft);
	background: var(--light-gray);
	padding: 1px 7px;
	border-radius: var(--radius-pill);
}
.mega a:hover .n { color: var(--primary-color); }

/* Dalın tamamına giden bağlantı panelin altında ayrılsın */
.mega-all-link {
	grid-column: 1 / -1;
	margin-top: 6px;
	border-top: 1px solid var(--seperator-color);
	padding-top: 10px !important;
	color: var(--primary-color) !important;
	font-weight: 700;
}

/* TAŞMA GÜVENCESİ
   Kategori adları kataloğa göre değişiyor; sayı ayarını yükselten
   biri menüyü taşırmasın diye dar ekranlarda önce iç boşluk, sonra
   yazı küçülür. Ölçüm (1440px): 6 dalla içerik 1270px / alan 1204px. */
@media (max-width: 1365px) {
	.mainmenu > li > a { padding: 0 10px; font-size: 13px; gap: 6px; }
}
@media (max-width: 1199px) {
	.mainmenu > li > a { padding: 0 8px; font-size: 12.5px; }
	/* Dar masaüstünde panel ekranı aşmasın */
	.mega { min-width: 440px; }
	.mega-allcats { min-width: 560px; grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Mobil çekmece ----------
   Çekmecede TÜM dallar var (üst bardaki eksiltme burada
   uygulanmaz); okunurluk sayı rozetiyle sağlanıyor. */
.mside-acc-trigger .n,
.mside-flat .n {
	margin-left: auto;
	font-size: 11px;
	font-weight: 700;
	color: var(--muted-soft);
}
.mside-acc-trigger { display: flex; align-items: center; gap: 8px; }
.mside-flat a { display: flex; align-items: center; gap: 8px; }
.mside-all { font-weight: 700; color: var(--primary-color); }

/* ---------- Bootstrap köprüsü ----------
   Devralınan ~780 şablon Bootstrap 4 düğme ve form sınıflarını
   kullanıyor. Tasarımın düğmesi .btn-accent; birincil eylem
   sınıfları ona bağlanır. */
.btn-primary,
.btn-success {
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: #fff;
}
.btn-primary:hover,
.btn-success:hover {
	background: var(--accent-color-600);
	border-color: var(--accent-color-600);
	color: #fff;
}
.btn-secondary,
.btn-default {
	background: var(--surface);
	border-color: var(--seperator-color);
	color: var(--ink);
}
.btn-secondary:hover,
.btn-default:hover { background: var(--light-gray); color: var(--primary-color); }
.btn-link { color: var(--primary-color); }
.btn-danger { background: var(--danger-color); border-color: var(--danger-color); }

.form-control {
	border-color: var(--seperator-color);
	border-radius: var(--radius-sm);
	color: var(--ink);
}
.form-control:focus {
	border-color: var(--primary-color-400);
	box-shadow: 0 0 0 3px var(--primary-tint);
}
.custom-select { border-color: var(--seperator-color); border-radius: var(--radius-sm); }

a { color: var(--primary-color); }
a:hover { color: var(--accent-color); }

/* ---------- ÜRÜN KARTI (devralınan şablon) ----------
   Kabuk (.product-list-item) tasarımın main.css'inden geliyor;
   burada yalnız İÇ yapı bağlanıyor. */
.product-list-item-inner { display: flex; flex-direction: column; height: 100%; }

/* görsel: tasarımda .pli-media — kare oran ve yumuşak zemin */
.product-list-item-figure {
	position: relative;
	margin: 0;
	aspect-ratio: 1 / 1;
	background: radial-gradient(120% 120% at 50% 18%, #ffffff 0%, #F4F7FA 70%, #EDF1F6 100%);
	display: flex; align-items: center; justify-content: center;
	padding: 12px;
	overflow: hidden;
}
.product-list-item-figure img { max-width: 100%; max-height: 100%; object-fit: contain; }
.product-list-item-figure .product-no-image { width: 55%; opacity: .35; }

/* Görsel karuseli: ürünlerin ÇOĞUNDA tek görsel var (medyan 1).
   Tek görselde ok ve göstergeler anlamsız yer kaplıyordu; yalnız
   gerçekten birden fazla görsel varken görünürler. */
.product-list-item-figure .carousel-control-prev,
.product-list-item-figure .carousel-control-next {
	width: 30px; opacity: 0;
	color: var(--primary-color);
	transition: opacity .15s ease;
}
.product-list-item:hover .carousel-control-prev,
.product-list-item:hover .carousel-control-next { opacity: .85; }
.product-list-item-figure .carousel-indicators { bottom: 4px; margin-bottom: 0; }
.product-list-item-figure .carousel-indicators li {
	width: 5px; height: 5px; border-radius: 50%;
	background: var(--muted-soft); border: 0;
}
.product-list-item-figure .carousel-indicators li.active { background: var(--primary-color); }
/* tek slaytlı karusel: kontrol yok */
.product-list-item-figure .carousel-inner > .carousel-item:only-child ~ * { display: none; }

/* gövde: tasarımda .pli-body */
.product-list-item-body {
	display: flex; flex-direction: column; gap: 8px;
	padding: 13px 14px 15px;
	flex: 1;
}
.product-list-item-body .title {
	font-size: var(--product-list-item-title-size);
	font-weight: var(--product-list-item-title-weight);
	line-height: 1.35;
	margin: 0;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; min-height: 2.7em;
}
.product-list-item-body .title a { color: var(--ink); }
.product-list-item-body .title a:hover { color: var(--primary-color); }

/* Kısa açıklama: Trendyol'dan gelen açıklamalar uzun ve çoğu kart
   için gürültü. Tek satıra kısaltılır, boşsa yer kaplamaz. */
.product-list-item-body .desc {
	font-size: 12px; color: var(--muted);
	display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
	overflow: hidden;
}
.product-list-item-body .desc:empty { display: none; }

.product-list-item-body .ratings { display: flex; align-items: center; gap: 6px; min-height: 0; }

/* fiyat: tasarımda .pli-price-row */
.product-list-item-body .price {
	display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
	margin-top: auto; padding-top: 3px; line-height: 1.2;
	font-family: var(--font-head);
	color: var(--product-list-item-price-color);
	font-weight: var(--product-list-item-price-weight);
	font-size: var(--product-list-item-price-size);
}
.product-list-item-body .price del {
	color: var(--product-list-item-price-del-color);
	text-decoration-color: var(--product-list-item-price-del-line-color);
	font-weight: var(--product-list-item-price-del-weight);
	font-size: var(--product-list-item-price-del-size);
	font-family: var(--font-body);
}
.product-list-item-body .price small { font-family: var(--font-body); font-weight: 500; color: var(--muted); }

.product-list-item-body .buttons { display: flex; gap: 8px; }
.product-list-item-body .buttons .btn { flex: 1; border-radius: var(--radius-sm); font-weight: 700; }

/* stok rozetleri — tasarımın .badge-stock / .badge-soft dili */
.in-stock-badge, .critical-stock-badge, .next-stock-badge, .out-stock-badge {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 11.5px; font-weight: 700; padding: 3px 8px;
	border-radius: 6px; align-self: flex-start;
}
.in-stock-badge      { color: var(--success-color); background: #E8F6EE; }
.critical-stock-badge{ color: var(--accent-color);  background: var(--accent-tint); }
.next-stock-badge    { color: var(--muted);         background: var(--light-gray); }
.out-stock-badge     { color: var(--muted);         background: var(--light-gray); }

.product-list-item-out-of-stock .product-list-item-figure { opacity: .55; }

/* ---------- Ürün ızgarası ----------
   Devralınan şablonlar kartları Bootstrap kolonlarına koyuyor;
   kartların eşit yükseklikte olması için satır esnetilir. */
.index-rows .row,
.products-list .row { align-items: stretch; }
.index-rows .row > [class*="col-"],
.products-list .row > [class*="col-"] { display: flex; margin-bottom: 18px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
	background: var(--breadcrumb-bg-color);
	padding: 12px 0;
	margin-bottom: 10px;
	font-size: 12.5px;
}
.breadcrumb a { color: var(--breadcrumb-color); }
.breadcrumb a:hover { color: var(--accent-color); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--breadcrumb-seperator-color); }

/* ---------- Sayfalama ---------- */
.pagination { gap: 5px; }
.page-link {
	border-radius: var(--radius-sm);
	border-color: var(--seperator-color);
	color: var(--ink);
	font-weight: 600;
}
.page-item.active .page-link {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}
.page-link:hover { background: var(--light-gray); color: var(--primary-color); }

/* ---------- Listeleme başlığı ve araç çubuğu ---------- */
.products-header { background: var(--products-header-bg-color); }
.products-header h1 {
	font-family: var(--font-head);
	font-size: 25px; font-weight: 700; color: var(--ink);
}
.products-toolbar {
	background: var(--products-toolbar-bg-color);
	border: 1px solid var(--seperator-color);
	border-radius: var(--radius);
	padding: 10px 12px;
}

/* ---------- Sol filtre sütunu ---------- */
.filter-box, .products-filter {
	background: var(--surface);
	border: 1px solid var(--seperator-color);
	border-radius: var(--radius);
	margin-bottom: 14px;
}
.filter-box .card-header, .products-filter .card-header {
	background: transparent;
	border-bottom: 1px solid var(--seperator-color);
	font-family: var(--font-head);
	font-weight: 700; color: var(--ink);
}

/* ---------- Devralınan menü sınıfları ----------
   {{site.menu.main}} / {{site.menu.footer}} NavigationItem::render()
   çıktısıdır. Ana menü bu temada kategori ağacından üretiliyor
   (configs.php), ama footer kurumsal menüsü hâlâ bu sınıfları
   kullanıyor. */
.footer-menu .list-item { display: block; }
.footer-menu .head-item a,
.footer-menu a {
	display: block;
	padding: var(--footer-menu-padding);
	color: var(--footer-menu-color);
	font-size: 13.5px;
}
.footer-menu a:hover { color: var(--footer-menu-hover-color); }
.footer-menu .list-type-label > .head-item {
	color: var(--footer-menu-label-color);
	font-family: var(--font-head);
	font-weight: 700;
}

/* Üst şerit menüleri — {{site.menu.top-left/right}} aynı
   NavigationItem çıktısı; tasarımın .ub-links dili uygulanır. */
.utility-bar .list-item { display: inline-block; }
.utility-bar .list-item a { color: inherit; }

/* ---------- Yıldızlar ---------- */
.rating-stars { color: var(--rating-stars-color); }

/* ---------- İçerik tipografisi (sayfa / makale) ---------- */
.content-page h1, .content-page h2, .content-page h3,
.page-content-area h1, .page-content-area h2, .page-content-area h3 {
	font-family: var(--font-head);
	color: var(--ink);
	font-weight: 700;
}
.content-page, .page-content-area { color: var(--ink); line-height: 1.7; }

/* ---------- Künye (alt şerit) ---------- */
.footer-kunye { display: flex; align-items: center; gap: 9px; }
.footer-kunye a { display: inline-flex; align-items: center; gap: 6px; opacity: .72; transition: opacity .15s ease; }
.footer-kunye a:hover { opacity: 1; }
.footer-kunye .kunye-gelistirici span { font-size: 10.5px; color: var(--muted-soft); letter-spacing: .02em; }
.footer-kunye .kunye-ayrac { color: var(--seperator-dark-color); }

/* ---------- Header açılır paneli (common/main.html) ----------
   Tasarımda panel .hdr-dd-menu; .dd-item-static ve .ico-avatar
   tasarımda satır içi stil olarak duruyordu, köprüde sınıflaşıyor. */
.dd-item-static { cursor: default; }
.ico-avatar {
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--primary-tint); color: var(--primary-color);
	display: flex; align-items: center; justify-content: center;
}
.dd-item-cta {
	justify-content: center;
	color: var(--primary-color);
	font-weight: 700;
}
.dd-remember { display: flex; align-items: center; gap: 6px; color: var(--muted); margin: 0; }

/* ---------- Bulucu: kod kutusu önde ----------
   Tasarımda kod alanı aşağıdaydı; kullanıcı kararıyla başa alındı.
   Birincil alan görsel olarak da öne çıkarılır. */
.finder-field-primary input {
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: .01em;
}
.finder-field .opt { color: var(--muted-soft); font-weight: 500; }
.finder-hint { display: block; margin-top: 5px; font-size: 11.5px; color: var(--muted-soft); }

/* ---------- Kumanda bulucu sonuç sayfası ----------
   mods/products/products.bulucu.php çıktısı. Tasarımın .section /
   .section-head / .product-grid dili kullanılıyor; burada yalnız
   tasarımda karşılığı olmayan iki durum var: kapsama notu ve
   "bulunamadı" kutusu. */
.kc-bulucu-sonuc .product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	gap: 18px;
}
.kc-bulucu-not {
	margin-top: 18px;
	padding: 12px 15px;
	background: var(--primary-tint);
	border-radius: var(--radius);
	font-size: 13px;
	color: var(--muted);
}
.kc-bulucu-not i { color: var(--primary-color); margin-right: 5px; }

.kc-bulucu-bos {
	text-align: center;
	padding: 52px 20px;
	background: var(--surface);
	border: 1px solid var(--seperator-color);
	border-radius: var(--radius-lg);
}
.kc-bulucu-bos > i {
	font-size: 34px;
	color: var(--muted-soft);
	margin-bottom: 14px;
	display: block;
}
.kc-bulucu-bos h3 {
	font-family: var(--font-head);
	font-size: 19px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 8px;
}
.kc-bulucu-bos p { color: var(--muted); font-size: 14px; margin-bottom: 6px; }
.kc-bulucu-eylem { margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   İÇERİK SAYFALARI (Biz Kimiz, SSS, KVKK, sözleşmeler …)
   common/main.html → block.page-content-area
   Uzun metin okunurluğu: ölçülü satır uzunluğu, net başlık
   hiyerarşisi, tasarımın tipografisi.
   ============================================================ */
.kc-sayfa { display: flex; gap: 32px; align-items: flex-start; padding: 8px 0 40px; }
.kc-sayfa-yan { width: 232px; flex: 0 0 232px; }

.kc-sayfa-baslik {
	font-family: var(--font-head);
	font-size: 28px;
	font-weight: 700;
	color: var(--ink);
	margin: 22px 0 6px;
}

.kc-icerik { max-width: 74ch; color: var(--ink); line-height: 1.75; font-size: 15px; }
.kc-icerik > :first-child { margin-top: 0; }

/* Giriş paragrafı — içerik yazılarının tamamında .ozet kullanılıyor */
.kc-icerik .ozet {
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--muted);
	padding: 16px 18px;
	background: var(--primary-tint);
	border-radius: var(--radius);
	margin-bottom: 26px;
}

.kc-icerik h2 {
	font-family: var(--font-head);
	font-size: 19px;
	font-weight: 700;
	color: var(--ink);
	margin: 30px 0 10px;
	padding-top: 14px;
	border-top: 1px solid var(--seperator-color);
}
.kc-icerik h3 {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--primary-color);
	margin: 20px 0 6px;
}
.kc-icerik p { margin: 0 0 12px; }
.kc-icerik ul, .kc-icerik ol { margin: 0 0 14px; padding-left: 20px; }
.kc-icerik li { margin-bottom: 6px; }
.kc-icerik a { color: var(--primary-color); text-decoration: underline; text-underline-offset: 2px; }
.kc-icerik a:hover { color: var(--accent-color); }
.kc-icerik b { color: var(--ink); font-weight: 700; }
.kc-icerik code {
	background: var(--light-gray);
	border: 1px solid var(--seperator-color);
	border-radius: 5px;
	padding: 1px 6px;
	font-size: 13px;
	color: var(--primary-color);
}

/* Yan gezinti */
.kc-sayfa-nav .nav-link {
	padding: 7px 11px;
	border-radius: var(--radius-sm);
	color: var(--muted);
	font-size: 13.5px;
	font-weight: 600;
}
.kc-sayfa-nav .nav-link:hover { background: var(--light-gray); color: var(--primary-color); }

@media (max-width: 767px) {
	.kc-sayfa { flex-direction: column; gap: 0; }
	.kc-sayfa-yan { width: 100%; flex: none; }
	.kc-icerik { max-width: none; }
	.kc-sayfa-baslik { font-size: 23px; }
}

/* Sayfa başlığı şeridi — block.page-cover-title (site.slider-before).
   İçerik sayfalarının H1'i buradan gelir. */
.page-cover-title {
	background: var(--light-gray);
	border-bottom: 1px solid var(--seperator-color);
	padding: 26px 0;
	margin-bottom: 4px;
}
.page-cover-title h1 {
	font-family: var(--font-head);
	font-size: 28px;
	font-weight: 700;
	color: var(--ink);
	margin: 0;
}
.page-cover { min-height: 180px; background-size: cover; background-position: center; }
@media (max-width: 767px) {
	.page-cover-title { padding: 18px 0; }
	.page-cover-title h1 { font-size: 22px; }
}

/* ============================================================
   ÜST ŞERİT — güven öğeleri buraya taşındı

   Tasarımda güven bandı header'ın ALTINDA ayrı beyaz bir şeritti;
   logonun hemen altında ikinci bir bant hero'yu aşağı itiyordu.
   Öğeler lacivert üst şeride alındı (.utility-bar). Şeridin kendi
   renk ve ölçüleri tasarımdan; burada yalnız yeni içeriğin
   yerleşimi var.
   ============================================================ */
.utility-bar .container { flex-wrap: wrap; row-gap: 2px; }

/* Bağlantı olmayan bilgi öğeleri de bağlantılarla aynı ritimde dursun */
.ub-links .ub-bilgi {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #B9C5D6;
	font-weight: 600;
	font-size: 12.5px;
	padding: 5px 11px;
}
.ub-links .ub-bilgi i { font-size: 12px; opacity: .75; }

/* Konum tıklanabilir olduğu belli olsun */
.ub-links a[href*="maps"] i { color: #F8A06A; opacity: 1; }
.ub-links a[href*="maps"]:hover { color: #fff; background: rgba(255,255,255,.1); }

/* Uyum sözü şeridin solunda vurgulu */
.ub-msg i.fa-check-circle { color: #5BD39A; }

/* Dar ekranda şerit tek satıra sıkışmasın: önce ikincil bilgiler,
   sonra tamamı gizlenir (tasarımın 991px kuralı korunuyor). */
@media (max-width: 1199px) {
	.ub-links .ub-bilgi { display: none; }
}
@media (max-width: 991px) {
	.utility-bar .container { justify-content: center; min-height: 34px; }
	.ub-msg { font-size: 11.5px; text-align: center; }
}


/* ============================================================
   ANA SAYFA — tasarımın kalan bölümleri
   (mods/index/home.html)
   Tasarımın pages/home.css dosyasında .promo-* kuralları var ama
   .steps-row, .brand-strip ve .home-help orada tanımlı değil;
   tasarım diliyle burada tamamlanıyor.
   ============================================================ */

/* ---------- cihaz türü kutuları ---------- */
.promo-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 16px; }
@media (max-width: 991px) { .promo-grid { grid-template-columns: 1fr; } }
.promo-tile {
	position: relative; overflow: hidden;
	border-radius: var(--radius-lg);
	padding: 26px 24px;
	background: var(--primary-tint);
	border: 1px solid var(--seperator-color);
	display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
	min-height: 178px;
}
.promo-tile .pt-deco {
	position: absolute; right: -14px; bottom: -14px;
	font-size: 104px; opacity: .08; color: var(--primary-color);
	pointer-events: none;
}
.promo-tile .pt-eyebrow {
	font-size: 11px; font-weight: 800; letter-spacing: .09em;
	text-transform: uppercase; color: var(--accent-color);
}
.promo-tile h3 { font-family: var(--font-head); font-size: 19px; font-weight: 700; color: var(--ink); margin: 0; }
.promo-tile p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.55; max-width: 44ch; }
.promo-tile .btn { margin-top: auto; border-radius: var(--radius-sm); font-weight: 700; }
.promo-tile.big { background: linear-gradient(135deg, var(--primary-tint) 0%, #DCE6F4 100%); }
.promo-tile.accent { background: var(--accent-color); border-color: var(--accent-color); }
.promo-tile.accent .pt-eyebrow { color: rgba(255,255,255,.82); }
.promo-tile.accent h3, .promo-tile.accent p { color: #fff; }
.promo-tile.accent p { color: rgba(255,255,255,.88); }
.promo-tile.accent .pt-deco { color: #fff; opacity: .16; }
.promo-tile.accent .btn-light { background: #fff; color: var(--accent-color); border: 0; }
.promo-tile.dark { background: var(--primary-color); border-color: var(--primary-color); }
.promo-tile.dark .pt-eyebrow { color: #F8A06A; }
.promo-tile.dark h3 { color: #fff; }
.promo-tile.dark p { color: rgba(255,255,255,.76); }
.promo-tile.dark .pt-deco { color: #fff; opacity: .1; }

/* ---------- nasıl çalışır ---------- */
.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 767px) { .steps-row { grid-template-columns: 1fr; } }
.step-card {
	background: var(--surface);
	border: 1px solid var(--seperator-color);
	border-radius: var(--radius);
	padding: 22px 20px;
}
.step-card .sc-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--primary-color); color: #fff;
	font-family: var(--font-head); font-weight: 800; font-size: 15px;
	margin-bottom: 12px;
}
.step-card b { display: block; font-family: var(--font-head); font-size: 16px; color: var(--ink); margin-bottom: 6px; }
.step-card p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; }

/* ---------- marka şeridi ---------- */
.brand-strip {
	background: var(--surface);
	border: 1px solid var(--seperator-color);
	border-radius: var(--radius-lg);
	padding: 22px 24px;
}
.brand-strip-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.brand-logos { display: flex; flex-wrap: wrap; gap: 9px; }
.brand-chip {
	display: inline-flex; align-items: baseline; gap: 7px;
	background: var(--light-gray);
	border: 1px solid var(--seperator-color);
	border-radius: var(--radius-pill);
	padding: 8px 15px;
	font-weight: 700; font-size: 13.5px; color: var(--ink);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.brand-chip span { font-size: 11.5px; font-weight: 600; color: var(--muted-soft); }
.brand-chip:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.brand-chip:hover span { color: rgba(255,255,255,.7); }

/* ---------- yardım ---------- */
.home-help {
	display: flex; align-items: center; justify-content: space-between; gap: 26px;
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-600) 100%);
	border-radius: var(--radius-lg);
	padding: 30px 32px;
	flex-wrap: wrap;
}
.home-help .eyebrow { color: #F8A06A; }
.home-help h2 { font-family: var(--font-head); font-size: 23px; font-weight: 700; color: #fff; margin: 6px 0 8px; }
.home-help p { color: rgba(255,255,255,.78); font-size: 14px; margin: 0; max-width: 56ch; }
.hh-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hh-actions .btn-outline { background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; }
.hh-actions .btn-outline:hover { background: rgba(255,255,255,.1); color: #fff; }
.hh-actions .btn-primary { background: #25D366; border-color: #25D366; color: #fff; font-weight: 700; }
.hh-actions .btn-primary:hover { background: #1fb858; border-color: #1fb858; }

@media (max-width: 767px) {
	.home-help { padding: 22px; }
	.home-help h2 { font-size: 19px; }
	.hh-actions { width: 100%; }
	.hh-actions .btn { flex: 1; }
}