/*
Theme Name: Ka Nokta Tema
Theme URI: https://kanoktasigorta.com
Author: Maşlakcı Sigorta
Author URI: https://maslakcisigorta.com
Description: Sigorta acenteleri için geliştirilmiş, çoklu marka kurulumuna uygun kurumsal WordPress temasıdır. Hero alanı, sigorta ürün kartları (Trafik, Kasko, Konut, Sağlık, İşyeri, İMM), teklif formu, kampanyalar, anlaşmalı şirket galerisi, referanslar ve blog bölümlerini içerir. Logo, renkler, telefon, WhatsApp numarası ve anlaşmalı şirketler gibi tüm marka bilgileri Customizer üzerinden yönetilir.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ka-nokta-tema
*/

/* ==========================================================================
   Marka değişkenleri (varsayılan değerler)
   3 ana renk (dark / primary / accent-light) Customizer'dan gelir ve
   functions.php > kanokta_dynamic_styles() tarafından burada tanımlı
   varsayılanların üzerine basılır. Diğer iki ton bu 3 renkten türetilir,
   böylece her acente sadece 3 renk seçerek tüm paleti değiştirebilir.
   ========================================================================== */
:root {
	--kanokta-primary-dark: #042C53;
	--kanokta-primary: #185FA5;
	--kanokta-accent-light: #B5D4F4;

	--kanokta-primary-light: color-mix(in srgb, var(--kanokta-primary) 80%, white);
	--kanokta-accent-lighter: color-mix(in srgb, var(--kanokta-accent-light) 45%, white);

	--kanokta-text: #1A1A1A;
	--kanokta-text-muted: #5B6B7A;
	--kanokta-white: #FFFFFF;
	--kanokta-border: #D9E6F2;

	--kanokta-radius: 14px;
	--kanokta-container: 1200px;
	--kanokta-font-heading: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--kanokta-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   Temel sıfırlama
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--kanokta-font-body);
	font-weight: 400;
	color: var(--kanokta-text);
	line-height: 1.6;
	/* Header'ın üstündeki 16px boşluk buradan (margin değil padding
	   olarak) gelir, böylece o boşlukta da body'nin arka planı görünür
	   ve gerçek sayfa tepesinden itibaren kesintisiz başlar. Ön sayfada
	   .kanokta-hero-wrapper hemen ardından aynı --kanokta-accent-light
	   tonuyla devam eder (bkz. assets/css/main.css), diğer sayfalarda
	   bu gradient tek başına header'ın arkasındaki alanı oluşturur. */
	padding-top: 16px;
	background: linear-gradient(180deg, var(--kanokta-accent-light) 0%, var(--kanokta-white) 420px);
	background-repeat: no-repeat;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--kanokta-primary);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--kanokta-primary-dark);
}

ul,
ol {
	padding-left: 1.2em;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--kanokta-font-heading);
	font-weight: 700;
	color: var(--kanokta-primary-dark);
	line-height: 1.25;
	margin-top: 0;
}

/* Tüm bölüm başlıklarında ortak kullanılan, küçük renkli vurgu
   noktalı stil (bkz. neden-biz.php, teklif-formu.php, urun-kartlari.php,
   anlasmali-sirketler.php, oduller.php, kampanyalar.php, referanslar.php). */
.kanokta-section-title {
	position: relative;
	display: inline-block;
	font-size: clamp(1.75rem, 3vw, 2.4rem);
	padding-left: 24px;
	margin-bottom: 16px;
}

.kanokta-section-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(--kanokta-primary);
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: 1rem;
}

/* ==========================================================================
   Yardımcı sınıflar
   ========================================================================== */
.kanokta-container {
	width: 100%;
	max-width: var(--kanokta-container);
	margin-inline: auto;
	padding-inline: 20px;
}

.kanokta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--kanokta-radius);
	font-weight: 600;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}

.kanokta-btn:active {
	transform: translateY(1px);
}

.kanokta-btn--primary {
	background-color: var(--kanokta-primary);
	color: var(--kanokta-white);
}

.kanokta-btn--primary:hover,
.kanokta-btn--primary:focus {
	background-color: var(--kanokta-primary-dark);
	color: var(--kanokta-white);
}

.kanokta-btn--outline {
	background-color: transparent;
	border-color: var(--kanokta-primary);
	color: var(--kanokta-primary);
}

.kanokta-btn--outline:hover,
.kanokta-btn--outline:focus {
	background-color: var(--kanokta-accent-lighter);
	color: var(--kanokta-primary-dark);
}

.kanokta-btn--whatsapp {
	background-color: #25D366;
	color: var(--kanokta-white);
}

.kanokta-btn--whatsapp:hover,
.kanokta-btn--whatsapp:focus {
	background-color: #1DA851;
	color: var(--kanokta-white);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--kanokta-primary-dark);
	color: var(--kanokta-white);
	padding: 10px 16px;
	z-index: 9999;
}

.skip-link:focus {
	top: 0;
}