/**
 * ondizayn.com — site-özel CSS eklemeleri
 *
 * ⚠ TEMA CSS'İNE (style.css) DOKUNULMADI. Prague teması satın alınmış bir
 * paket; bir gün güncellenirse bizim değişikliklerimiz kaybolmasın diye
 * üzerine yazan/ek kurallar YALNIZCA bu dosyada toplanıyor. Yükleme sırası
 * config/libraries.php'de style.css'ten SONRA.
 *
 * İçindekiler:
 *   1. Erişilebilirlik — görünmez etiketler
 *   2. İletişim formu — güvenlik kodu satırı (tasarıma eklenen tek görsel öğe)
 *   3. Bal küpü — ekran dışı tuzak alan
 *   4. Haber listesi sayfalaması (eski sitede bağlantılar hiç basılmıyordu)
 *   5. 404 sayfası (eski sitede tasarımlı 404 yoktu)
 *   6. Altlıktaki üretici imzasının konumu
 *
 * @author    Sezai ÇETİN <sezai@3xcode.com>
 * @copyright 2026
 * @license   Private License
 */


/* ==========================================================================
   1) ERİŞİLEBİLİRLİK
   ==========================================================================
   Form alanlarının <label>'ları GÖRSEL OLARAK gizli ama ekran okuyucuya
   açık. `display:none` KULLANILMAZ — o, etiketi erişilebilirlik ağacından
   da çıkarır ve alan yine adsız kalır.
   ========================================================================== */
.gorsel-gizli
{
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ==========================================================================
   2) GÜVENLİK KODU SATIRI
   ==========================================================================
   Kod alanı formun KENDİ input stilini kullanıyor (.frm_form_field içinde),
   burada yalnız görselin hizası ve yenile düğmesi tanımlı. Ölçüler formun
   girdi yüksekliğiyle uyumlu seçildi ki satır diğerlerinden farklı
   görünmesin.
   ========================================================================== */
/* ⚠ Temanın <textarea>'sında ALT BOŞLUK YOK (diğer girdilerde var); sınıfsız
   bırakılınca güvenlik kodu satırı mesaj kutusuna yapışık çiziliyordu.
   Değer formun diğer alanları arasındaki boşlukla aynı. */
.kod-satiri
{
	margin-top: 20px;
}

.kod-gorsel
{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

.kod-gorsel img
{
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid #ebebeb;
	background: #fff;
}

.kod-gorsel a
{
	color: #999;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	transition: color .2s;
}

.kod-gorsel a:hover,
.kod-gorsel a:focus
{
	color: #3e3e3e;
}

/* Gönderim sırasında düğme kilitli — tıklanabilir görünmesin */
.contact-us-form input[type="submit"]:disabled
{
	opacity: .55;
	cursor: not-allowed;
}

/* Alan altındaki hata metni (tema .validate kutusunu boş bırakıyordu) */
.contact-us-form .validate:not(:empty)
{
	color: #c0392b;
	font-size: 12px;
	font-weight: 300;
	margin-top: -14px;
	margin-bottom: 14px;
}


/* ==========================================================================
   3) BAL KÜPÜ
   ==========================================================================
   İnsanlar görmez, otomatik doldurucular görür. `display:none` bazı basit
   botlar tarafından "doldurma" işareti sayılıyor; bu yüzden alan ekranın
   DIŞINA alınıyor ve sekme sırasından çıkarılıyor (tabindex="-1" HTML'de).
   ========================================================================== */
.bal-kupu
{
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* ==========================================================================
   4) HABER SAYFALAMASI
   ==========================================================================
   ⚠ ESKİ SİTEDE BU BLOK HİÇ YOKTU: haberler.php sayfa sayısını hesaplıyor
   ama bağlantıları basmıyordu. Görünüm temanın tipografisine uyduruldu
   (ince, geniş harf aralıklı, çerçeveli kutular).
   ========================================================================== */
.haber-sayfalama
{
	margin-top: 40px;
	margin-bottom: 10px;
}

.haber-sayfalama a,
.haber-sayfalama span
{
	display: inline-block;
	min-width: 38px;
	padding: 8px 10px;
	margin: 0 3px;
	border: 1px solid #ebebeb;
	color: #3e3e3e;
	font-size: 13px;
	font-weight: 300;
	letter-spacing: .08em;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s, color .2s, border-color .2s;
}

.haber-sayfalama a:hover,
.haber-sayfalama a:focus
{
	border-color: #3e3e3e;
	color: #3e3e3e;
}

.haber-sayfalama span.aktif
{
	background-color: #3e3e3e;
	border-color: #3e3e3e;
	color: #fff;
}


/* ==========================================================================
   5) 404
   ==========================================================================
   ⚠ ESKİ SİTEDE TASARIMLI 404 YOKTU. Blok sitenin kendi tipografisini
   kullanıyor (ince Roboto, geniş harf aralığı) — ayrı bir "hata sayfası"
   görünümü yaratmamak için.
   ========================================================================== */
.nf-404
{
	padding-top: 20px;
	padding-bottom: 40px;
}

.nf-404 .nf-kod
{
	font-size: 92px;
	font-weight: 100;
	line-height: 1;
	letter-spacing: .12em;
	color: #ebebeb;
	margin-bottom: 10px;
}

/* ⚠ .sayfa_content h1 kuralı başlığa alt çizgi veriyor; 404'te ortalanmış
   tek bir başlık olduğu için çizgi kaldırılıyor. */
.nf-404 h1
{
	border-bottom: 0 !important;
	padding-bottom: 6px !important;
}

.nf-404 p
{
	font-weight: 300;
	max-width: 520px;
	margin: 0 auto;
}


/* ==========================================================================
   6) ÜRETİCİ İMZASI — ALT ŞERİDİN ORTASINDA
   ==========================================================================
   ⚠ NEDEN: imza önce `.footer-copyright` kutusunun İÇİNDEYDİ ve telif
   satırının hemen altına yapışıyordu — ON Dizayn'ın kendi telif bloğunun
   ikinci satırı gibi okunuyordu (canlıda görülüp düzeltildi, 2026-10-31).
   Alt şerit float tabanlı: telif %50 sola, sosyal %50 sağa; ORTASI BOŞTU.

   Tema kurallarına dokunulmuyor: `.footer-bottom-content` zaten
   `position:relative` (style.css), imza mutlak konumla tam ortaya alınıyor.

   `top: 40px` ölçülerek bulundu: şeridin `padding-top`u 47 px, telif
   metninin satır yüksekliği 18 px → metnin optik ortası 56 px'te; 25 px'lik
   logoyu oraya ortalamak için 56 − 12,5 ≈ 43,5 px gerekiyor, görüntü
   üzerinden ölçülen gerçek değer 40 px (logonun üstünde saydam pay var).
   İkisinin merkezi 0,5 px farkla çakışıyor (ekran görüntüsünden ölçüldü).

   `pointer-events`: kutu şeridin TAMAMINI kaplıyor; none olmasa altındaki
   alanı tıklanamaz yapardı. Yalnız logonun kendisi tıklanabilir bırakılıyor.
   ========================================================================== */
.footer-uretici
{
	line-height: 0;   /* satır kutusunun altta boşluk bırakmaması için */
}

@media only screen and (min-width: 768px)
{
	.footer-uretici
	{
		position: absolute;
		left: 0;
		right: 0;
		top: 40px;
		text-align: center;
		pointer-events: none;
	}

	.footer-uretici #ucxfooter
	{
		pointer-events: auto;
		display: inline-block;
	}
}

@media only screen and (max-width: 767px)
{
	/* 767 px altında tema alt şeridi zaten ortalıyor ve alt alta diziyor
	   (style.css: .footer-bottom-content{text-align:center}); imza da
	   telif ile Instagram arasına normal akışta giriyor. */
	.footer-uretici
	{
		padding-top: 20px;
		text-align: center;
	}
}