/* ==========================================================================
   tablo.css — Excel / Word'den yapıştırılmış tabloları şık, okunaklı ve
   mobil uyumlu hâle getirir.

   • Tema ve framework bağımsızdır; tek başına başka bir siteye kopyalanabilir.
   • Renk/ölçü ayarları :root değişkenlerindedir. Başka bir sitede yeniden
     markalamak için sadece bu değişkenleri ezmek yeterlidir:
        :root{ --tbl-title-bg:#123456; --tbl-accent:#0aa; }
   • Kapsam (aşağıdaki sarmalayıcılardan birinin İÇİNDEKİ tablolar biçimlenir):
        .tbl  .walmo-content  .entry-content  .wpb_wrapper
        .post-content  .page-content  .tbl-scroll
     Sarmalayıcı yoksa tabloya doğrudan class="tbl" verilebilir.
   • Bir tabloyu biçimlendirmemek için: class="tbl-skip"
   • Mobilde yatay kaydırma alt sınırını değiştirmek için tabloya
     style="--tbl-min:0" ya da class="tbl-auto" verilebilir.

   Eşlikçi dosya (opsiyonel ama önerilir): assets/js/tablo.js
     1) Yapıştırma hatası olan başlık hücresinin rowspan'ini onarır,
     2) Tabloyu .tbl-scroll kabına sarar → masaüstünde tam genişlik,
        mobilde yatay kaydırma. JS yoksa tablo kendi kendini kaydırır
        (doğal genişlikte kalır), sayfa yine yatay kaymaz.
   ========================================================================== */

:root{
	--tbl-font-size:15px;
	--tbl-font-size-sm:14px;
	--tbl-pad-y:10px;
	--tbl-pad-x:12px;
	--tbl-radius:14px;
	--tbl-min:820px;              /* kaydırma kabı içinde tablonun alt genişlik sınırı */
	--tbl-border:#E4E1D9;
	--tbl-bg:#FFFFFF;
	--tbl-bg-alt:#FAF8F4;         /* gruplanmış (rowspan) hücre tonu */
	--tbl-head-bg:#F2EFE8;        /* sütun başlığı satırı */
	--tbl-head-fg:#14181F;
	--tbl-title-bg:#0E1116;       /* üstteki başlık bandı */
	--tbl-title-fg:#FFFFFF;
	--tbl-text:#2A2F37;
	--tbl-accent:#DD5E2C;
	--tbl-hover:#FFF6F1;
	--tbl-scrollbar:#CFCBC1;
}

/* --------------------------------------------------------------------------
   1) Tablo kabı
   JS yokken tablonun kendisi kaydırma kabıdır (display:block + max-content):
   sayfa asla yatay kaymaz. JS varsa aşağıdaki .tbl-scroll bloğu devralır.
   -------------------------------------------------------------------------- */
:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip){
	display:block;
	width:max-content;
	max-width:100%;
	height:auto !important;              /* yapıştırmadan gelen inline height'ı iptal eder */
	overflow-x:auto;
	overscroll-behavior-x:contain;
	-webkit-overflow-scrolling:touch;
	border-collapse:collapse;            /* rowspan/colspan ızgarasını tek hairline'da birleştirir */
	border:1px solid var(--tbl-border);
	border-radius:var(--tbl-radius);
	margin:28px 0;
	font-size:var(--tbl-font-size);
	line-height:1.45;
	color:var(--tbl-text);
	box-shadow:0 1px 2px rgba(15,17,22,.04), 0 18px 40px -30px rgba(15,17,22,.5);
	scrollbar-width:thin;
	scrollbar-color:var(--tbl-scrollbar) transparent;

	/* Kenar gölgesi: içerik kayabiliyorsa kenarda belirir, sığıyorsa kendini gizler. */
	background-color:var(--tbl-bg);
	background-image:
		linear-gradient(to right, var(--tbl-bg) 40%, rgba(255,255,255,0)),
		linear-gradient(to left,  var(--tbl-bg) 40%, rgba(255,255,255,0)),
		radial-gradient(farthest-side at 0 50%,    rgba(15,17,22,.13), rgba(15,17,22,0)),
		radial-gradient(farthest-side at 100% 50%, rgba(15,17,22,.13), rgba(15,17,22,0));
	background-position:0 0, 100% 0, 0 0, 100% 0;
	background-size:48px 100%, 48px 100%, 16px 100%, 16px 100%;
	background-repeat:no-repeat;
	background-attachment:local, local, scroll, scroll;
}

/* JS ile eklenen kaydırma kabı: tablo masaüstünde tam genişliğe yayılır. */
.tbl-scroll{
	overflow-x:auto;
	overscroll-behavior-x:contain;
	-webkit-overflow-scrolling:touch;
	border-radius:var(--tbl-radius);
	margin:28px 0;
	scrollbar-width:thin;
	scrollbar-color:var(--tbl-scrollbar) transparent;
	box-shadow:0 1px 2px rgba(15,17,22,.04), 0 18px 40px -30px rgba(15,17,22,.5);
	background-color:var(--tbl-bg);
	background-image:
		linear-gradient(to right, var(--tbl-bg) 40%, rgba(255,255,255,0)),
		linear-gradient(to left,  var(--tbl-bg) 40%, rgba(255,255,255,0)),
		radial-gradient(farthest-side at 0 50%,    rgba(15,17,22,.13), rgba(15,17,22,0)),
		radial-gradient(farthest-side at 100% 50%, rgba(15,17,22,.13), rgba(15,17,22,0));
	background-position:0 0, 100% 0, 0 0, 100% 0;
	background-size:48px 100%, 48px 100%, 16px 100%, 16px 100%;
	background-repeat:no-repeat;
	background-attachment:local, local, scroll, scroll;
}
.tbl-scroll > table:not(.tbl-skip){
	display:table;
	width:100%;
	min-width:var(--tbl-min);
	max-width:none;
	overflow:visible;
	margin:0;
	border-radius:0;                     /* köşeleri kap yuvarlar */
	box-shadow:none;
	background:transparent;              /* kenar gölgesi kaptan görünsün */
}
.tbl-scroll > table.tbl-auto{ --tbl-min:0; }

:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip)::-webkit-scrollbar,
.tbl-scroll::-webkit-scrollbar{ height:8px; }
:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip)::-webkit-scrollbar-thumb,
.tbl-scroll::-webkit-scrollbar-thumb{ background:var(--tbl-scrollbar); border-radius:8px; }

/* --------------------------------------------------------------------------
   2) Hücreler — ince ızgara
   -------------------------------------------------------------------------- */
:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip) :is(td,th){
	border:1px solid var(--tbl-border);
	padding:var(--tbl-pad-y) var(--tbl-pad-x);
	vertical-align:middle;
	text-align:left;
	width:auto;                          /* yapıştırmadan gelen width="…" iptal */
	height:auto !important;
	background-clip:padding-box;
}

/* Gruplanmış (rowspan'lı) hücreler → hafif ton, sol blok görsel olarak ayrışır. */
:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip) td[rowspan]{
	background:var(--tbl-bg-alt);
}

/* Excel'den gelen boş ayraç sütunu → ince dikey ayraça iner. */
:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip) td:empty{
	padding-left:0;
	padding-right:0;
	background:var(--tbl-bg-alt);
}

/* --------------------------------------------------------------------------
   3) Başlıklar
   a) Gerçek <th> / <thead>
   b) 1. satırın tek hücresi tüm genişliği kaplıyorsa → başlık bandı
   c) Başlık bandının altındaki satır → sütun başlıkları
   -------------------------------------------------------------------------- */
:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip) :is(th, thead td){
	background:var(--tbl-head-bg);
	color:var(--tbl-head-fg);
	font-weight:700;
}

:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip) tr:first-child > td:only-child{
	background:var(--tbl-title-bg);
	border-color:var(--tbl-title-bg);
	color:var(--tbl-title-fg);
	font-weight:700;
	font-size:17px;
	letter-spacing:.2px;
	text-align:center;
	padding:14px 16px;
}

:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip) tr:first-child:has(> td:only-child) + tr > td{
	background:var(--tbl-head-bg);
	color:var(--tbl-head-fg);
	font-weight:700;
	text-align:center;
}
:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip) tr:first-child:has(> td:only-child) + tr > td:empty{
	background:var(--tbl-bg-alt);
}

:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip) > caption{
	caption-side:top;
	text-align:left;
	font-weight:700;
	font-size:var(--tbl-font-size);
	color:var(--tbl-head-fg);
	padding:0 2px 10px;
}

/* --------------------------------------------------------------------------
   4) Hücre içi içerik
   -------------------------------------------------------------------------- */
:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip) :is(p,ul,ol){ margin:0; }
:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip) :is(p,ul,ol) + :is(p,ul,ol){ margin-top:6px; }
:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip) a{
	color:var(--tbl-accent);
	text-decoration:none;
	border-bottom:1px solid rgba(221,94,44,.35);
}
:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip) a:hover{
	border-bottom-color:var(--tbl-accent);
}
:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip) img{
	max-width:100%;
	height:auto;
	display:block;
}
:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip) strong{
	color:var(--tbl-head-fg);
}

/* --------------------------------------------------------------------------
   5) Satır vurgusu (yalnız gerçek imleçli cihazlarda)
   -------------------------------------------------------------------------- */
@media (hover:hover){
	:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip) tr:hover > td:not(:empty){
		background:var(--tbl-hover);
	}
	/* Başlık bandı ve sütun başlıkları hover'dan etkilenmez. */
	:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip) tr:first-child:hover > td:only-child{
		background:var(--tbl-title-bg);
	}
	:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip) tr:first-child:has(> td:only-child) + tr:hover > td{
		background:var(--tbl-head-bg);
	}
	:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip) tr:hover > :is(th, thead td){
		background:var(--tbl-head-bg);
	}
}

/* --------------------------------------------------------------------------
   6) Mobil — okunabilirlik korunur (font 14px'in altına inmez), tablo kayar
   -------------------------------------------------------------------------- */
@media (max-width:640px){
	:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip){
		--tbl-pad-y:8px;
		--tbl-pad-x:9px;
		font-size:var(--tbl-font-size-sm);
		border-radius:12px;
	}
	.tbl-scroll{ border-radius:12px; margin:20px 0; }
	:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip) tr:first-child > td:only-child{
		font-size:15px;
		padding:12px 14px;
	}
}

/* --------------------------------------------------------------------------
   7) Baskı
   -------------------------------------------------------------------------- */
@media print{
	.tbl-scroll,
	:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip){
		overflow:visible !important;
		box-shadow:none !important;
		background-image:none !important;
	}
	:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip){
		display:table;
		width:100%;
		min-width:0;
		font-size:10pt;
	}
	:is(.tbl,.walmo-content,.entry-content,.wpb_wrapper,.post-content,.page-content,.tbl-scroll) table:not(.tbl-skip) tr{
		break-inside:avoid;
	}
}