/* Renklam Creative - admin panelli sürüm için ek stiller
(mevcut Woodmart temasının üzerine eklenir, onu değiştirmez) */

.rk-section { padding: 60px 0; }
.rk-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.rk-heading { text-align: center; margin-bottom: 40px; }
.rk-heading h2 { font-size: 32px; font-weight: 700; margin: 0 0 10px; }
.rk-heading p { color: #666; font-size: 16px; }

.rk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 992px) { .rk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rk-grid { grid-template-columns: 1fr; } }

.rk-card { position: relative; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 14px rgba(0,0,0,.08); transition: transform .2s ease, box-shadow .2s ease; }
.rk-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.rk-card a.rk-card-link { display: block; position: relative; color: inherit; text-decoration: none; }
.rk-card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #f2f2f2; display: block; transition: transform .35s ease; }
.rk-card:hover .rk-card-img { transform: scale(1.05); }
.rk-card-body { padding: 18px 20px; text-align: left; }
.rk-card-cat { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #b3122c; font-weight: 700; margin-bottom: 6px; }
.rk-card-title { font-size: 19px; font-weight: 700; margin: 0 0 8px; color: inherit; }
.rk-card-excerpt { font-size: 14px; color: #666; line-height: 1.5; margin: 0 0 10px; }
.rk-card-date { font-size: 13px; color: #999; display: block; }

/* Portfolyo kartları: tam görsel + üstte koyu gradyan overlay içinde başlık */
.rk-grid-portfolio .rk-card { background: #111; }
.rk-grid-portfolio .rk-card-body {
position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 20px 20px;
background: linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 100%);
text-align: center; color: #fff;
}
.rk-grid-portfolio .rk-card-cat { color: #fff; opacity: .8; }
.rk-grid-portfolio .rk-card-title { font-size: 20px; color: #fff; margin: 0; }

/* Blog kartları: görsel üstünde tarih rozeti, altta beyaz içerik alanı */
.rk-card-date-badge {
position: absolute; top: 16px; left: 16px; background: #fff; border-radius: 6px;
padding: 8px 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.15); line-height: 1.1;
}
.rk-card-date-badge .rk-card-date-day { display: block; font-size: 20px; font-weight: 800; color: #1b1d22; }
.rk-card-date-badge .rk-card-date-month { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: #888; text-transform: uppercase; }
.rk-card-more { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 700; letter-spacing: .03em; color: #b3122c; text-decoration: none; text-transform: uppercase; }
.rk-card-more:hover { text-decoration: underline; }

.rk-empty { text-align: center; color: #888; padding: 40px 0; }

.rk-detail-cover { width: 100%; max-height: 560px; object-fit: cover; border-radius: 10px; margin-bottom: 30px; }
.rk-detail-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 20px; }
.rk-badge { display: inline-block; background: #f4f4f4; color: #b3122c; font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 30px; }
.rk-client-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #b3122c; text-decoration: none; }
.rk-client-link:hover { text-decoration: underline; }
.rk-client-btn { display: inline-block; background: #1b1d22; color: #fff; font-weight: 700; padding: 14px 36px; border-radius: 6px; text-decoration: none; }
.rk-client-btn:hover { background: #000; color: #fff; }

/* ---- Footer lokasyon rozetleri ----
Orijinal Font Awesome ikonu (fa-location-dot), tema CSS'indeki
.wd-icon:before kuralıyla çakışıp içerik boş kalıyordu; zaten her
sayfada güvenilir şekilde yüklenen bootstrap-icons fontuna geçirildi. */
.rk-pin-icon::before { margin-right: 6px; color: inherit; }
.rk-detail-body p { font-size: 16px; line-height: 1.8; margin-bottom: 18px; }
.rk-back-link { display: inline-block; margin-top: 30px; font-weight: 600; }

.rk-form { max-width: 900px; margin: 0 auto; background: transparent; border-radius: 0; padding: 0; box-shadow: none; }
.rk-form .form-row { margin-bottom: 18px; }
.rk-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.rk-form input[type=text], .rk-form input[type=email], .rk-form input[type=tel], .rk-form select, .rk-form textarea, .rk-form input[type=file] {
width: 100%; padding: 14px 16px; border: none; background: #f0f0f1; border-radius: 6px; font-size: 15px; font-family: inherit; box-sizing: border-box; color: #23262b;
}
.rk-form input::placeholder, .rk-form textarea::placeholder { color: #6b6f76; }
.rk-form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%236b6f76' d='M7 10l5 5 5-5z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; line-height: normal; }
.rk-form textarea { resize: vertical; }
.rk-form .rk-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rk-form button[type=submit] { border-radius: 6px; padding: 15px 32px; text-transform: uppercase; letter-spacing: .03em; }
.rk-form-heading { font-size: 26px; font-weight: 700; color: #2d245a; margin: 0 0 24px; }
.rk-form-heading.center { text-align: center; }
@media (max-width: 640px) { .rk-form .rk-two-col { grid-template-columns: 1fr; } }
.rk-form button[type=submit] {
background: #b3122c; color: #fff; border: none; padding: 13px 32px; font-weight: 700; border-radius: 30px; font-size: 15px; cursor: pointer;
}
.rk-form button[type=submit]:hover { background: #8f0e23; }
.rk-honeypot { position: absolute; left: -9999px; top: -9999px; }

.rk-alert { padding: 16px 20px; border-radius: 8px; margin-bottom: 24px; font-weight: 600; }
.rk-alert-success { background: #e5f6ea; color: #1c7a34; }
.rk-alert-error { background: #fdeaea; color: #b3122c; }

/* ---- Admin panel ---- */
body.rk-admin { background: #f4f5f7; font-family: -apple-system, "Segoe UI", Arial, sans-serif; color: #23262b; margin: 0; }
.rk-admin-topbar { background: #1b1d22; color: #fff; padding: 14px 28px; display: flex; justify-content: space-between; align-items: center; }
.rk-admin-topbar a { color: #fff; text-decoration: none; }
.rk-admin-topbar .rk-brand { font-weight: 800; font-size: 18px; }
.rk-admin-nav { background: #fff; border-bottom: 1px solid #e3e5e8; padding: 0 28px; display: flex; gap: 4px; }
.rk-admin-nav a { display: inline-block; padding: 14px 16px; color: #555; text-decoration: none; font-weight: 600; font-size: 14px; border-bottom: 3px solid transparent; }
.rk-admin-nav a.active, .rk-admin-nav a:hover { color: #b3122c; border-bottom-color: #b3122c; }
.rk-admin-wrap { max-width: 1100px; margin: 0 auto; padding: 32px 28px 80px; }
.rk-admin-card { background: #fff; border-radius: 10px; padding: 26px; box-shadow: 0 1px 4px rgba(0,0,0,.06); margin-bottom: 24px; }
.rk-admin-card h1, .rk-admin-card h2 { margin-top: 0; }
.rk-table { width: 100%; border-collapse: collapse; }
.rk-table th, .rk-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid #eee; font-size: 14px; vertical-align: middle; }
.rk-table th { color: #888; font-weight: 700; text-transform: uppercase; font-size: 12px; }
.rk-table img.rk-thumb { width: 56px; height: 42px; object-fit: cover; border-radius: 4px; background: #f0f0f0; }
.rk-btn { display: inline-block; padding: 9px 18px; border-radius: 6px; font-weight: 700; font-size: 13px; text-decoration: none; border: none; cursor: pointer; }
.rk-btn-primary { background: #b3122c; color: #fff; }
.rk-btn-primary:hover { background: #8f0e23; color:#fff; }
.rk-btn-secondary { background: #eee; color: #333; }
.rk-btn-secondary:hover { background: #ddd; }
.rk-btn-danger { background: #fdeaea; color: #b3122c; }
.rk-btn-danger:hover { background: #f7cccc; }
.rk-btn-sm { padding: 6px 12px; font-size: 12px; }
.rk-actions { display: flex; gap: 8px; }
.rk-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.rk-login-box { background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,.1); width: 100%; max-width: 630px; }
.rk-login-box h1 { font-size: 22px; margin-top: 0; text-align: center; }
.rk-field { margin-bottom: 16px; }
.rk-field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.rk-field input, .rk-field textarea, .rk-field select { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; box-sizing: border-box; font-family: inherit; }
.rk-field textarea { min-height: 160px; }
.rk-help { color: #888; font-size: 12px; margin-top: 4px; }

/* ---- Referanslarımız logo grid (gs_logo_area eklentisi) ----
Eklentinin kendi JS'i devreye girmeden görünürlüğü açmıyor olabilir
(opacity:0 satır-içi stille başlıyor) ve logo boyutları img'lerin
bozuk width/height attribute'larına göre dağınık kalıyordu. Sabit
7 kolonlu, tek tip boyutlu bir ızgaraya zorluyoruz. */
.gs_logo_area { opacity: 1 !important; visibility: visible !important; }
.gs_logo_container_grid {
display: grid !important;
grid-template-columns: repeat(7, 1fr);
gap: 20px 16px;
align-items: center;
justify-items: center;
}
@media (max-width: 992px) { .gs_logo_container_grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .gs_logo_container_grid { grid-template-columns: repeat(3, 1fr); } }
.gs_logo_single--wrapper { width: 100% !important; display: flex; align-items: center; justify-content: center; height: 90px; }
.gs_logo_single { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.gs-logo--img { width: auto !important; height: auto !important; max-width: 140px; max-height: 70px; object-fit: contain; }
.rk-flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }

/* ---- Footer fix (gerçek kök neden) ----
Sorun CSS değil, HTML iskeletindeydi: inc/_tpl_top.php içinde açılan
<div class="wd-page-content main-page-wrapper"> hiçbir zaman kapatılmıyordu,
bu yüzden inc/_tpl_bottom.php'deki .wd-prefooter ve <footer> de yanlışlıkla
main-page-wrapper'ın İÇİNE gömülü kalıyordu (oysa orijinal temada bunlar
website-wrapper'ın doğrudan kardeşleridir). Bu yanlış iç içelik,
body.sticky-footer-on .wd-footer{position:sticky;bottom:0} kuralının
(harici CSS bundle'da zaten mevcut) yanlış "containing block" ile
hesaplanmasına, footer'ın sayfa yüklenir yüklenmez üste yapışmasına neden
oluyordu. Asıl düzeltme inc/_tpl_bottom.php'nin başına eksik </div> eklemek;
burada artık footer'ı zorla static'e sabitlemiyoruz, temanın kendi
sticky-reveal efekti (üstteki içerik kaydıkça footer altta ortaya çıkar)
doğal haliyle çalışıyor. */

/* ==========================================================================
MOBİL DÜZELTME TURU (v7 → v24) — canlı siteden doğrulanmış (get_page_text
ile birebir çekildi), önceki oturumların prose/hafıza reconstruction
hatalarını tekrarlamamak için.
========================================================================== */

/* v7: Woodmart'ın kendi whb-header'ı mobilde sticky sırasında gri logolu
siyah bir şerit olarak sızıyordu. */
@media (max-width: 768px) {
.whb-row.whb-general-header { display: none !important; }
}

/* v8: Logo, sadece max-height verilip width tanımlanmadığı için
(object-fit varsayılanı fill) sünmüş görünüyordu. */
.offcanvas-logo img,
.wd-main-logo img {
width: auto !important;
object-fit: contain;
}

/* v9: Portfolyo kartlarındaki büyüteç butonu konumlandırılmamıştı. */
.rk-card-zoom {
position: absolute !important;
right: 12px;
bottom: 12px;
z-index: 5;
}

/* v9 + v12: İç sayfa banner başlığı (Portfolyo/Blog/detay sayfaları) site
geneli bir kuralla mobilde gizleniyordu. render_page_banner()'a eklenen
$showTitle parametresi true olduğunda banner div'ine bu class ekleniyor;
SADECE bu class varken başlık/breadcrumb görünür oluyor (Hakkımızda gibi
kendi başlığı olan sayfalar etkilenmiyor). */
@media (max-width: 768px) {
.rk-banner-title-visible.wd-page-title,
.rk-banner-title-visible .page-title { display: block !important; }
.rk-banner-title-visible .entry-title.title,
.rk-banner-title-visible .yoast-breadcrumb { display: block !important; visibility: visible !important; opacity: 1 !important; }
}

/* v12: Banner artık mobilde her sayfada görünür olduğu için, temanın
mobildeki .liner-continer{margin-top:90px} kuralı banner'ın kendi
boşluğunun üstüne binip dalga ile başlık arasında gereksiz boşluk
bırakıyordu. */
@media (max-width: 768px) {
.liner-continer { margin-top: 15px !important; }
}

/* v13 + v14: Mobil banner, masaüstü görseli (Header-PC.jpg) 1934x540 ile
background-size hackleri kullanıyordu; pakette zaten hazır duran mobil
versiyonu (Mobil-Header.jpg, 1173x1000) hiç kullanılmıyordu. */
@media (max-width: 768px) {
.wd-page-title {
background-image: url('../wp-content/uploads/2026/02/Mobil-Header.jpg') !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
min-height: 0 !important;
aspect-ratio: 1173 / 1000;
margin-top: -68px;
padding-top: 0 !important;
}
}

/* v17: Banner başlığının konumu (dalganın soluk/beyaz alt kısmında) ve
büyük harf. */
@media (max-width: 768px) {
.rk-banner-title-visible > .container {
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
bottom: 14% !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
.rk-banner-title-visible .entry-title.title {
text-transform: uppercase !important;
letter-spacing: .5px !important;
}
}

/* v15 + v16: Mobil header her zaman (sayfa başında VE sticky/scroll
sonrası) şeffaf. */
@media (max-width: 768px) {
.container-fluid-rf.navbar.offcanvas-nav,
.container-fluid-rf.navbar.offcanvas-nav.rk-nav-scrolled {
background-color: transparent !important;
}
}

/* v18 + v19: Portfolyo/Blog kart görselleri sabit 4:3 aspect-ratio +
object-fit:cover ile kırpılıyordu. */
.rk-card-img {
width: 100%;
height: auto;
min-height: 160px;
object-fit: contain;
background: #f2f2f2;
display: block;
transition: transform .35s ease;
}
.rk-card:hover .rk-card-img { transform: scale(1.05); }

/* v21 + v23: Anasayfanın giriş bölümü orijinalde Slider Revolution (SR7) ile
çalışıyordu; bu pakette SR7'nin gerçek JS motoru yok, elle kodlanmış statik
hero blokları kondu. */
.wd-rs-69984cf8542ca { display: none !important; }
.rk-mobile-hero-banner { display: none; }
.rk-desktop-hero-banner { display: none; }

@media (max-width: 768px) {
/* v49 (madde 5): Mobil hero, masaüstü görselini (PC-Slider-.webp, 1920x1080)
"aspect-ratio:21/20" kutusuna cover ile sığdırıyordu — yani yatay bir
görselin sağı/solu agresif şekilde kırpılıyor, kompozisyon bozuluyordu
("mobil slider bölümü düzgün görüntülenmiyor"). Canlıda bu bölüm için AYRI
bir dikey görsel kullanılıyor; o görsel pakete Mobil-Slider.webp (1200x1600)
olarak eklendi ve kutu, görselin KENDİ oranına (3/4) çekildi — böylece
cover hiçbir yeri kırpmıyor, tam kompozisyon görünüyor. Banner ayrıca
şeffaf mobil header'ın altına alındı (iç sayfa banner'larındaki
"margin-top:-68px" deseniyle birebir aynı). */
.rk-mobile-hero-banner {
display: block;
width: 100%;
background: #fff;
margin-top: -68px;
}
.rk-mobile-hero-photo {
position: relative;
width: 100%;
aspect-ratio: 1200 / 1600;
overflow: hidden;
background: #eaf2fb;
}
.rk-mobile-hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
.rk-mobile-hero-icon-wrap {
position: absolute;
top: 15%;
left: 50%;
transform: translateX(-50%);
width: 78%;
max-width: 630px;
z-index: 2;
}
.rk-mobile-hero-icons {
width: 100%;
height: auto;
display: block;
}
.rk-mobile-hero-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 52%;
height: auto;
margin: 0;
display: block;
}
/* İçerik metni: referans görselde fotoğrafın ÜSTÜNE bindirilmiş bir
overlay değil, fotoğraf bittikten SONRA (sert bir kesimle) düz beyaz
zeminde devam eden ayrı bir blok — bu yüzden normal akışta,
fotoğraf kutusunun ALTINDA, absolute/overlay olmadan konumlandırıldı. */
.rk-mobile-hero-content {
padding: 20px 22px 26px;
text-align: center;
background: #fff;
}
.rk-mobile-hero-text {
font-size: 15px;
line-height: 24px;
color: #2d245a;
margin: 0;
}
.rk-mobile-hero-text,
.rk-mobile-hero-content p { font-weight: 400; }
.rk-mobile-hero-text b,
.rk-mobile-hero-content p b { font-weight: 700; }
}

/* v23 + v24: Masaüstü hero — SR7 slide 13'ün JSON konfigüründen alınan
koordinatlar (native 1920x1080 kanvas) yüzdeye çevrildi; full-bleed
(width:100vw + negatif margin) tekniğiyle .container'ın (max-width:1222px)
dışına taşırıldı. */
@media (min-width: 769px) {
.rk-desktop-hero-banner {
display: block;
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.rk-desktop-hero-photo {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #eaf2fb;
}
.rk-desktop-hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
.rk-desktop-hero-icon-wrap {
position: absolute;
top: 3.33%;
left: 36.09%;
width: 24.48%;
z-index: 2;
}
.rk-desktop-hero-icons {
width: 100%;
height: auto;
display: block;
}
.rk-desktop-hero-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 54.7%;
height: auto;
margin: 0;
display: block;
}
.rk-desktop-hero-text {
position: absolute;
top: 6.67%;
left: 64.74%;
width: 28.8%;
z-index: 3;
}
.rk-desktop-hero-text p {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 16px;
line-height: 22px;
color: #2f235a;
margin: 0;
}
.rk-desktop-hero-text p { font-weight: 400; }
.rk-desktop-hero-text b { font-weight: 700; }
}

/* v22: Anasayfada 3 bölümün kenar boşluğu — WPBakery'nin masaüstü için
girilmiş sabit margin/padding (vc_custom_*) değerleri mobilde de
uygulanıyordu; sadece mobilde (<=768px) net +10px kenar boşluğu. */
@media (max-width: 768px) {
.vc_custom_1771585957104.wd-rs-6998419c59bb5 { margin-right: 0 !important; }
.vc_column-inner.vc_custom_1771586004249 { margin-left: 0 !important; }
.vc_column-inner.vc_custom_1771586017698 { margin-right: 0 !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 24px !important; }
.wd-rs-699841d7c6981, .wd-rs-699841ca0125d { padding-left: 10px !important; padding-right: 10px !important; }
.wd-rs-698dd3bfc2734 { padding-left: 10px !important; padding-right: 10px !important; }
.wd-rs-698dde4947cfa.vc_custom_1770905169837 { padding-left: 25px !important; padding-right: 25px !important; }
.wd-rs-698ddc8d93231.vc_custom_1770904724918, .wd-rs-699ff3bea294a { padding-left: 10px !important; padding-right: 10px !important; }
}

/* ==========================================================================
v26 — Kart + detay görsel sığdırma
========================================================================== */
.rk-card-img { aspect-ratio: auto !important; }
.rk-detail-cover {
max-height: none !important;
aspect-ratio: auto !important;
object-fit: contain !important;
height: auto !important;
background: #f2f2f2;
}

/* ==========================================================================
v27 — Kullanıcının 8 maddelik turu
========================================================================== */

/* madde 1: fontlar */
body, p, li, td, th, label, input, textarea, select, button,
.rk-card-excerpt, .rk-detail-body p, .wpb_text_column, .wpb_text_column p {
font-family: "DM Sans", -apple-system, "Segoe UI", Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6, .woodmart-title-container, .entry-title.title,
.rk-heading h2, .rk-card-title, .rk-form-heading,
.wd-section-title-holder .wd-section-title, .title-wrapper .title, .info-box-title {
font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Arial, sans-serif !important;
}

/* madde 2: hero arkaplan mavi->beyaz */
.rk-mobile-hero-photo, .rk-desktop-hero-photo { background: #fff; }

/* madde 3: referans logo hover */
.gs_logo_single--wrapper { transition: transform .25s ease; }
.gs_logo_single--wrapper:hover { transform: scale(1.08); }

/* madde 4+5: v9+v12'nin başlık görünürlüğü SADECE @media(max-width:768px) idi;
artık media query'siz (tüm genişliklerde, masaüstü dahil) */
.rk-banner-title-visible.wd-page-title, .rk-banner-title-visible .page-title { display: block !important; }
.rk-banner-title-visible .entry-title.title, .rk-banner-title-visible .yoast-breadcrumb { display: block !important; visibility: visible !important; opacity: 1 !important; }

/* madde 6: kırmızı dolgu buton -> outline pill (site dili) */
.rk-form button[type=submit] {
background: transparent; color: #2c2c2c; border: 1px solid #2c2c2c;
border-radius: 30px; padding: 13px 32px; font-weight: 700; font-size: 15px;
text-transform: uppercase; letter-spacing: .03em; cursor: pointer;
transition: background .2s ease, color .2s ease;
}
.rk-form button[type=submit]:hover { background: #2c2c2c; color: #fff; }

/* madde 7 (v27): footer "Bize Ulaşın" popup — DeLorean görseli kaldırılıp
marka rengi gradyan konmuştu.
v47 — GERİ ALINDI: kullanıcı ekran görüntüsüyle "form background image
ilettim, formun yanındaki resim bu, formu aynı bu şekilde yapalım" dedi —
yani DeLorean/"Geleceği Bu Gün Keşfet" görseli (GelecegiKesfet.webp)
sağ panelde TEKRAR istendi. O görsel hiç silinmemişti, sadece bu kuralın
!important gradyanıyla ÜSTÜ ÖRTÜLÜYORDU (asıl inline <style> kuralı zaten
".vc_custom_1772113020594{background-image:url(/wp-content/uploads/2026/02/
GelecegiKesfet.webp) !important}" idi, kaynakta bizim custom.css'ten ÖNCE
geliyordu, biz SONRA gelip ezmiştik) — bu yüzden en temiz çözüm override
kuralını tamamen silmek: orijinal inline stil kendiliğinden tekrar devreye
giriyor, formun solundaki dalga deseni (corporate-2-bg-popup-1.webp, satır
başındaki .vc_row'un arkaplanı) zaten hiç değişmemişti/etkilenmemişti. */
#contact-form-popup-corporate-2 input.wpcf7-form-control:not(.wpcf7-submit) {
background: rgba(255,255,255,.95) !important; border: none !important; border-radius: 6px !important;
padding: 14px 16px !important; color: #23262b !important; width: 100%; box-sizing: border-box;
font-family: "DM Sans", sans-serif; font-size: 15px; margin-bottom: 4px;
}
#contact-form-popup-corporate-2 input.wpcf7-submit {
background: #fff !important; color: #2d245a !important; border: none !important; border-radius: 30px !important;
padding: 13px 32px !important; font-weight: 700 !important; font-size: 15px; text-transform: uppercase;
letter-spacing: .03em; cursor: pointer; transition: background .2s ease;
}
#contact-form-popup-corporate-2 input.wpcf7-submit:hover { background: #f0f0f0 !important; }
#wd-69a04cb8ca1b2 .woodmart-title-container { font-family: "Plus Jakarta Sans", sans-serif !important; font-weight: 700 !important; }

/* ==========================================================================
v28 — Kullanıcının 11 ekran görüntülü turu: logo/page-title "patlaması" +
Referanslarımız 3 kolon
========================================================================== */

/* madde A: ".offcanvas-logo img" seçicisi hiç eşleşmiyordu çünkü
"offcanvas-logo" class'ı <img>'in KENDİSİNDE (bir sarmalayıcıda değil). */
a.navbar-brand > img.offcanvas-logo,
.offcanvas-logo {
width: auto !important;
height: auto !important;
max-height: 82px;
object-fit: contain !important;
}
@media (max-width: 767px) {
a.navbar-brand > img.offcanvas-logo,
.offcanvas-logo {
max-height: 42px !important;
width: auto !important;
object-fit: contain !important;
}
}

/* madde B: Hakkımızda/İletişim/Kariyer/Politikalarımız/Referanslarımız —
render_page_banner() KULLANMAYAN, kendi statik dalga banner'ı gömülü
sayfalar. Bu 5 sayfanın başlık ID'lerine özel, tema orijinalindeki
yeterli boşluğu (90px) geri veren, ID özgüllüğüyle v12'yi ezen bir kural: */
@media (max-width: 768px) {
#wd-699431c130b92 .liner-continer,
#wd-6994322034b5e .liner-continer,
#wd-69a53fc99e50a .liner-continer,
#wd-69a835b9c2083 .liner-continer,
#wd-699431dd3cb0c .liner-continer {
margin-top: 170px !important;
}
}

/* madde C: Referanslarımız logo duvarı — kullanıcı mobilde 3 kolon istedi
(yukarıdaki .gs_logo_container_grid @media(max-width:600px) kuralında
repeat(2,1fr) -> repeat(3,1fr) olarak uygulandı). */

/* madde D: Hakkımızda/İletişim/Kariyer/Referanslarımız başlıkları (55px,
sabit, media query yoktu) mobilde 390px genişliğe sığmayıp taşıyordu. */
@media (max-width: 1199px) {
#wd-699431c130b92 .woodmart-title-container,
#wd-6994322034b5e .woodmart-title-container,
#wd-69a53fc99e50a .woodmart-title-container,
#wd-699431dd3cb0c .woodmart-title-container {
line-height: 43px !important;
font-size: 33px !important;
}
}

/* ==========================================================================
v29 — Hakkımızda sayfası (kullanıcının "sayfa sayfa" turunun ilk durağı):
metinlere sağ/sol boşluk + 2 resim yerine tek, konumu belirli bir resim
========================================================================== */
@media (max-width: 768px) {
/* Başlık ve metin bloklarına yatayda kenar boşluğu — sayfanın diğer
içerikle aynı ~20px hizasına gelmesi için (#post-128 = Hakkımızda
makalesinin kendi id'si, sadece bu sayfayı etkiler). */
#post-128 .title-wrapper,
#post-128 .wpb_text_column > .wpb_wrapper {
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box;
}

/* Kullanıcı: "2 resim var, tek resim olmalı" — hakkimizda-2.png mobilde
kaldırılıyor, hakkimizda-1.png tek görsel olarak kalıyor. */
#post-128 img[src*="hakkimizda-2.png"] {
display: none !important;
}

/* Kalan görsel (hakkimizda-1.png): üstündeki 120px'lik masaüstü
boşlukçusu kaldırılıp, kenar boşluklu + ortalanmış, konumu net bir
yerleşime alınıyor (text1'in hemen altında, sayfanın diğer öğeleriyle
aynı hizada). */
#post-128 .wd-rs-69a006b6c6ac9 .vc_empty_space {
display: none !important;
}
/* Bu sütunun masaüstü için girilmiş sabit "margin-left:80px" satır-içi
stili (vc_custom_1772095171637) mobilde de uygulanıp içeriği
viewport'un sağına taşırıyordu — mobilde sıfırlanıyor. */
#post-128 .wd-rs-69a006b6c6ac9 .vc_column-inner {
margin-left: 0 !important;
}
#post-128 img[src*="hakkimizda-1.png"] {
display: block !important;
width: calc(100% - 40px) !important;
height: auto !important;
margin: 20px auto 30px !important;
}
}

/* ==========================================================================
v32 — Hakkımızda dalga banner'ı: beyaz başlık/breadcrumb kaldırıldı
(aşağıda zaten "HAKKIMIZDA" başlığı var, tekrar gereksizdi). v31'de banner'ı
küçültmek için eklenen "aspect-ratio:1173/460" override'ı, banner'ın gerçek
arkaplan görselinin (Mobil-Header.jpg, 1173x1000 — yukarıdaki v13/v14'ün
".wd-page-title" kuralına bkz) doğal oranıyla UYUŞMUYORDU; bu uyumsuzluk +
sabit "margin-top:-68px" kombinasyonu görselin akışını yanlış noktada kesip
sert/"çizgi gibi" görünen bir kenar oluşturuyordu. Düzeltme: banner v13/v14'ün
doğru oranıyla (aspect-ratio:1173/1000, background-size:cover, sıfır kırpma/
sıfır dikiş) tam boy render oluyor; sadece üzerindeki beyaz başlık/breadcrumb
metni gizleniyor.
========================================================================== */
@media (max-width: 768px) {
.rk-hakkimizda-banner .entry-title.title,
.rk-hakkimizda-banner .yoast-breadcrumb {
display: none !important;
}
.rk-hakkimizda-banner.wd-page-title.page-title {
aspect-ratio: 1173 / 1000 !important;
min-height: 0 !important;
}
}

/* ==========================================================================
v33 — Referanslarımız sayfası (kullanıcının "sayfa sayfa" turunda 2. durak):
Hakkımızda'da yapılan İKİ işlemin AYNISI + bu sayfaya özel bir ek düzeltme.
1) metinlere sağ/sol boşluk (v29 ile birebir aynı desen)
2) dalga banner'ı DOĞRU oranla (1173/1000, v31'in 460 hatası TEKRARLANMADI)
görünür yapıldı, üzerindeki beyaz başlık/breadcrumb gizlendi
3) metin ile logo ızgarası arasındaki "kutlama elleri + yıldız" dekoratif
görseli (Referanslarimiz.png) ve onun masaüstü boşlukçusu/margin'i
kaldırıldı — kullanıcı: "metinden sonra direkt referanslar gelmeye
başlıyacak" (o görsel hiç istenmiyor, sadece bu sayfaya özel bir madde,
Hakkımızda'daki "tek resim kals覸n" kararından FARKLI — burada görsel
TAMAMEN kaldırılıyor).
========================================================================== */
@media (max-width: 768px) {
/* 1) Başlık ve metin bloklarına yatayda kenar boşluğu (#post-142 =
Referanslarımız makalesinin kendi id'si, sadece bu sayfayı etkiler). */
#post-142 .title-wrapper,
#post-142 .wpb_text_column > .wpb_wrapper {
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box;
}

/* 2) Banner: beyaz başlık/breadcrumb gizli, doğru oranla tam boy. */
.rk-referanslarimiz-banner .entry-title.title,
.rk-referanslarimiz-banner .yoast-breadcrumb {
display: none !important;
}
.rk-referanslarimiz-banner.wd-page-title.page-title {
aspect-ratio: 1173 / 1000 !important;
min-height: 0 !important;
}

/* 3) Kullanıcı: "2. attığım fotoğraftaki resim olmayacak, metinden sonra
direkt referanslar gelmeye başlayacak" — dekoratif görsel sütunu
(vc_custom_1772095285730 taşıyan wd-rs-69a007304c4b5 sütunu; masaüstü
için sabit "margin-left:80px" satır-içi stili de bu sütunun üzerindeydi)
TÜMÜYLE gizleniyor, sadece görsel değil — böylece üstündeki 100px'lik
vc_empty_space boşlukçusu da hiç render olmuyor ve metinden hemen sonra
logo ızgarası başlıyor, aradaki boşluk tamamen kapanıyor. */
#post-142 .wd-rs-69a007304c4b5 {
display: none !important;
}
/* Bu satırı saran wpb_row'un kendi sayfa-özel CSS'i (inc/page-css/
referanslarimiz.css) "padding-bottom: 50px !important" veriyordu —
görsel sütun tamamen kaldırılsa da bu boşluk kalırdı, sıfırlanıyor. */
#post-142 .vc_custom_1772109000045 {
padding-bottom: 0 !important;
}
}

/* ==========================================================================
v34 — "Sayfa sayfa" turu, 3. durak: PORTFOLYO sayfası (2026-08-28)
Kullanıcı: "portfolio sayfasında üst başlık beyaz onu biraz aşağıya
indirip diğeri gibi siyah yaparmısın" — Portfolyo banner'ındaki beyaz
"PORTFOLYO" başlığı + "Anasayfa" breadcrumb'ı dalganın soluk/beyaza
karıştığı alanda kalıp okunaksızlaşıyordu (v17'nin genel bottom:14%
kuralı). Metni biraz daha aşağı, iyice beyaz zemine indirip rengini
diğer sayfalardaki (Hakkımızda/Referanslarımız içerik başlıkları)
KULLANILAN aynı koyu lacivert marka rengine (rgb(45,36,90) — canlıda
ölçülen #2d245a) çevirdik; artık koyu metin beyaz zeminde net okunuyor.
SADECE Portfolyo'yu etkiler (render_page_banner()'a yeni 5. parametre
ile eklenen rk-portfolyo-banner class'ı sayesinde Blog/Blog-yazi şu an
İÇİN etkilenmiyor — onlar hâlâ eski/genel rk-banner-title-visible
davranışını koruyor, sıraları gelince ayrıca ele alınacak).
v35'te güncellendi: kullanıcı breadcrumb'ın (yol izi) TAMAMEN
kaldırılmasını istedi, sadece renk değişikliği yetmedi — aşağıdaki
renk kuralı display:none ile değiştirildi. */
@media (max-width: 768px) {
.rk-portfolyo-banner > .container {
bottom: 4% !important;
}
.rk-portfolyo-banner .entry-title.title {
color: #2d245a !important;
}
.rk-portfolyo-banner .yoast-breadcrumb {
display: none !important;
}
}

/* ==========================================================================
v35 — "Sayfa sayfa" turu, devam: Portfolyo-detay + Portfolyo'da
breadcrumb kaldırma (2026-08-28)
Kullanıcı (Portfolyo-detay/Altınöz ekran görüntüsüyle, verbatim):
"Portfolio detay sayfasında da aynı şekilde beyaz ve altlarında dosya
yolları yazmasın sadece başlık yazsın portfolio da da detayındada
hepsinde" — yani: (1) Portfolyo-detay'daki banner başlığı da Portfolyo
ile AYNI sorunu taşıyor (beyaz, soluk zeminde) → aynı düzeltme
(aşağı indir + koyu lacivert) uygulanmalı; (2) HER İKİ sayfada da
("Anasayfa » Portfolyo » Altınöz" gibi) breadcrumb yol izi tamamen
kaldırılmalı, sadece proje/sayfa başlığı kalmalı.
render_page_banner()'a artık render_page_banner($title, $breadcrumb,
null, true, 'rk-portfolyo-detay-banner') ile çağrılıyor (portfolyo-detay.php,
hem 404 hem başarı yolunda) — $breadcrumb dizisi PHP tarafında hâlâ
üretiliyor (kod sadeliği için silinmedi) ama CSS ile görsel olarak
tamamen gizleniyor. */
@media (max-width: 768px) {
.rk-portfolyo-detay-banner > .container {
bottom: 4% !important;
}
.rk-portfolyo-detay-banner .entry-title.title {
color: #2d245a !important;
}
.rk-portfolyo-detay-banner .yoast-breadcrumb {
display: none !important;
}
}

/* ==========================================================================
v36 — Kariyer sayfası (kullanıcının "sayfa sayfa" turunda 3. durak,
own-banner ailesi): Hakkımızda/Referanslarımız'daki AYNI iki işlem +
bu sayfaya özel metin/resim/form boşluk düzeltmesi.
Kullanıcı (verbatim): "kariyer sayfasını da aynı diğerleri gibi
yaparmısın üst resim unutma başlık siyah olsun yazılar sağ ve soldan
ortalı resimde aynı şekilde formuda aynı bu şekilde yaparmısın"

Tespit: Kariyer'in dalga banner'ı diğer own-banner sayfalarından farklı
olarak hiç rk-banner-title-visible/rk-kariyer-banner class'ı almamıştı;
bu yüzden temanın mobil varsayılan kuralı (".wd-page-title" için
display:none) devrede kalıyor ve üst görsel HİÇ RENDER OLMUYORDU
(computed display:none, rect 0x0 — "üst resim unutma" tam olarak bu).
Sayfanın kendi içerik başlığı olan "KARİYER" (h4, #wd-69a53fc99e50a)
zaten doğru koyu lacivert renkte (rgb(45,36,90) / #2d245a) render
oluyordu — bu yüzden ayrı bir renk değişikliği gerekmedi.
========================================================================== */
@media (max-width: 768px) {
/* 1) Banner: Hakkımızda/Referanslarımız ile birebir aynı desen —
rk-banner-title-visible display:none varsayılanını açıyor, banner
kendi h1/breadcrumb'ını (zaten aşağıda ayrı bir "KARİYER" başlığı
olduğu için) gizliyor, doğru oranla (1173/1000) tam boy render. */
.rk-kariyer-banner .entry-title.title,
.rk-kariyer-banner .yoast-breadcrumb {
display: none !important;
}
.rk-kariyer-banner.wd-page-title.page-title {
aspect-ratio: 1173 / 1000 !important;
min-height: 0 !important;
}

/* 2) Başlık ve metin bloklarına yatayda kenar boşluğu — "yazılar sağ ve
soldan ortalı" (#post-166 = Kariyer makalesinin kendi id'si, sadece bu
sayfayı etkiler; v29/v33 ile birebir aynı 20px desen). */
#post-166 .title-wrapper,
#post-166 .wpb_text_column > .wpb_wrapper {
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box;
}

/* 3) kariyer.net görseli: masaüstü için girilmiş 120px'lik boşlukçu
mobilde gereksiz büyük bir boşluk bırakıyordu, kaldırılıyor. */
#post-166 .vc_empty_space:has(+ .wd-rs-69a03023b30db) {
display: none !important;
}

/* 4) "resimde aynı şekilde" — görsel, metinle aynı 20px kenar boşluğuyla
ortalanıyor (v29'daki hakkimizda-1.png deseniyle birebir aynı). */
#post-166 .wd-rs-69a03023b30db img[src*="kariyerXrenklam.png"] {
display: block !important;
width: calc(100% - 40px) !important;
height: auto !important;
margin: 20px auto 30px !important;
}

/* 5) "formuda aynı bu şekilde" — başvuru formu da metinle aynı hizada,
sağdan/soldan 20px boşluklu. */
#post-166 form.rk-form {
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box;
}
}

/* ==========================================================================
v37 — Blog + Blog-detay sayfaları (kullanıcının "sayfa sayfa" turunda 4.
durak): Portfolyo/Portfolyo-detay ile birebir aynı banner deseni
(render_page_banner()'ın $pageClass parametresi ile) — üst başlık artık
koyu lacivert, doğru konumda, altında gereksiz yol izi yok.
Kullanıcı (verbatim): "blog sayfası aynı şekilde üst başlık beyaz bloglar
gözükmüyor sorun var / blog detayda da sorun var başlık çok yukarı
çıkmış artı olarak resim içerikler gözükmüyor / blog ve blog detay
sayfasında footerda yok bu sayfalarda genel bir sıkıntı var"

ÖNEMLİ — asıl kök neden CSS değil PHP tarafında bulundu: canlı sitede
blog.php ve blog-yazi.php'nin PHP kodu (format_rich_content()/
excerpt_from_html() içeriği NULL kabul etmiyordu — string tipi zorunluydu)
içeriği/özeti boş olan bir yazıya rastlayınca Fatal Error ile
çöküyordu; sayfa o noktadan sonrasını (kapak görseli, yazı içeriği,
"Tüm Yazılar" linki, FOOTER dahil) hiç render edemiyordu — bu yüzden
"bloglar gözükmüyor" ve "footerda yok" şikayetleri aslında AYNI kökten
kaynaklanıyordu. inc/functions.php'de format_rich_content()/
excerpt_from_html() artık NULL kabul ediyor (boş string'e çevirip devam
ediyor), yeni safe_post_date() ise bozuk/boş bir "published_at" ile
date()/strtotime() hatasını önlüyor — sayfa artık çökmeden, eksik
içerikle de olsa tam render oluyor (footer dahil).
========================================================================== */
@media (max-width: 768px) {
.rk-blog-banner > .container,
.rk-blog-yazi-banner > .container {
bottom: 4% !important;
}
.rk-blog-banner .entry-title.title,
.rk-blog-yazi-banner .entry-title.title {
color: #2d245a !important;
}
.rk-blog-banner .yoast-breadcrumb,
.rk-blog-yazi-banner .yoast-breadcrumb {
display: none !important;
}
}

/* ==========================================================================
v38 — İletişim sayfası (kullanıcının "sayfa sayfa" turunda 5. durak,
own-banner ailesi): Kariyer'deki AYNI banner deseni + bu sayfaya özel
metin/görsel/harita boşluk düzeltmesi.
Kullanıcı (verbatim): "iletişim sayfasının en üstünde resim yok / sağ
soldan boşluk bırakmamız lazım / resim ortalamak lazım / haritalar
kısmı da aynı şekilde sağ soldan boşluklu olması lazım"

Tespit: Kariyer'de olduğu gibi, İletişim'in dalga banner'ı da hiç
rk-banner-title-visible/rk-iletisim-banner class'ı almamıştı — temanın
mobil varsayılan kuralı devrede kalıp üst görseli hiç render etmiyordu
("en üstünde resim yok" tam olarak bu).
========================================================================== */
@media (max-width: 768px) {
/* 1) Banner: Kariyer ile birebir aynı desen. */
.rk-iletisim-banner .entry-title.title,
.rk-iletisim-banner .yoast-breadcrumb {
display: none !important;
}
.rk-iletisim-banner.wd-page-title.page-title {
aspect-ratio: 1173 / 1000 !important;
min-height: 0 !important;
}

/* 2) "sağ soldan boşluk bırakmamız lazım" — başlık, form üstü metin ve
şube başlık/adres/telefon blokları (#post-140 = İletişim makalesinin
kendi id'si; v29/v33/v36 ile birebir aynı 20px desen). Aynı seçici
haritaların sarmalayıcı div'ini de kapsıyor (bkz. madde 4). */
#post-140 .title-wrapper,
#post-140 .wpb_text_column > .wpb_wrapper,
#post-140 .wd-text-block {
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box;
}

/* 3) Form da aynı hizada, sağdan/soldan 20px boşluklu (Kariyer'deki
form deseniyle birebir aynı). */
#post-140 form.rk-form {
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box;
}

/* 4) "resim ortalamak lazım" — üstteki illüstrasyon görseli, metinle
aynı 20px kenar boşluğuyla ortalanıyor (v29'daki hakkimizda-1.png
deseniyle birebir aynı). v38'de bu kural eklenmişti ama görsel HÂLÂ
sağa taşıyordu ("center yapmamışsın resmi") — kök neden: görsel
sütununun kendi iç sarmalayıcısında (.vc_column-inner) masaüstü için
girilmiş sabit "margin-left:80px" satır-içi stili mobilde de
uygulanıp TÜM sütunu (dolayısıyla içindeki görseli) 80px sağa
kaydırıyordu (Hakkımızda'da v29'da düzeltilen #post-128
".wd-rs-69a006b6c6ac9 .vc_column-inner" hatasıyla BİREBİR AYNI desen,
gözden kaçmıştı). v38.1'de bu margin sıfırlanarak asıl merkezleme
sağlandı. */
#post-140 .wd-rs-69a033ca2185b .vc_column-inner {
margin-left: 0 !important;
}
#post-140 .wd-rs-69a033ca2185b img[src*="iletisim-gorsel.png"] {
display: block !important;
width: calc(100% - 40px) !important;
height: auto !important;
margin: 20px auto 30px !important;
}

/* 5) "haritalar kısmı da aynı şekilde sağ soldan boşluklu olması
lazım" — madde 2'deki kural haritaların sarmalayıcısına (.wpb_text_column
> .wpb_wrapper) zaten 20px boşluk veriyor; ama <iframe width="450">
sabit genişliği mobilde (390px) taşma yapıyordu — artık kalan alana
sığacak şekilde responsive. */
#post-140 iframe {
max-width: 100% !important;
width: 100% !important;
}
}

/* ==========================================================================
v40 — Anasayfa (index.php): "Hakkımızda/Ekibe Katıl" butonlarıyla
"REFERANSLARIMIZ" başlığı arasında dev bir boşluk vardı.
Kullanıcı (verbatim): "anasayfada bu alan arası boşluk var mobilde"

Tespit: bu iki blok arasında ARKA ARKAYA iki masaüstü boşlukçusu
(vc_empty_space) vardı — biri butonlar satırının sonunda (120px), biri
REFERANSLARIMIZ satırının başında (100px) — toplam 220px. Masaüstünde
geniş bir sayfada göze batmayan bu boşluk, 390px'lik mobil ekranda
ölçüldüğünde 302px'e (Playwright ile doğrulandı) ulaşıyor, ekranın
üçte birinden fazlasını boş bırakıyordu.
========================================================================== */
@media (max-width: 768px) {
/* Butonlar satırının sonundaki 120px boşlukçu. NOT: ham HTML'de bu
boşlukçu görsel olarak "Bizi Daha Yakından Tanıyın" satırına
(wd-rs-6998419c59bb5) yakın duruyor ama TARAYICININ GERÇEKTEN OLUŞTURDUĞU
DOM'da (Playwright ile doğrulandı — düz metin/kaynak konumu yanıltıcı
çıktı) bu satırı saran DAHA DIŞ bir satırın (wd-rs-6998040092c57, tek
"vc_empty_space" içeren geniş kapsayıcı satır) içinde; doğru seçici bu. */
#post-16 .wd-rs-6998040092c57 .vc_empty_space {
height: 20px !important;
}
/* REFERANSLARIMIZ satırının başındaki 100px boşlukçu — #wd-6998096b1f107
(REFERANSLARIMIZ başlık kutusunun kendi benzersiz id'si) içeren
wpb_wrapper'ın İLK çocuğu olan boşlukçuyu hedefliyor, başka hiçbir
boşlukçuyu etkilemiyor. */
#post-16 .wpb_wrapper:has(#wd-6998096b1f107) > .vc_empty_space:first-child {
height: 20px !important;
}
}

/* ==========================================================================
v41 — Anasayfa (index.php): Üstteki hamburger + logo çubuğu, hero
görselinin ("DİJİTAL tam hizmet modeli" görseli) ÜSTÜNDE opak/beyaz bir
şerit gibi duruyordu.
Kullanıcı (verbatim): "HEADER TRANSPARENT OLACAK"

Tespit: Header'ın kendisi (.offcanvas-navigation.oc-fixed-top) zaten
arka planı TAMAMEN ŞEFFAF (Playwright ile ölçüldü: background-color
rgba(0,0,0,0)) — sorun header'ın rengi değil, KONUMU. Header mobilde
"position: sticky" ve normal akışta 68px yer kaplıyor; hemen altındaki
içerik bu 68px'in ALTINDAN başlıyor, üstünde de sayfanın doğal beyaz
arka planı görünüyor — yani "beyaz şerit" aslında header'ın kendi rengi
değil, header ile hero görseli arasındaki BOŞLUK.

Diğer tüm sayfalarda (Hakkımızda/Kariyer/İletişim/Referanslarımız/Blog)
bu sorun zaten YOK çünkü hepsi ".wd-page-title" class'ını kullanıyor ve
bu class'a v13/v14'te zaten "margin-top: -68px" verilmiş (yukarıda satır
~213) — banner görseli bu sayede header'ın ALTINA/ARKASINA kayıyor,
şeffaf header üstünde görünüyor.

v41'İN İLK DENEMESİ HATALIYDI: hedef seçici olarak ".wd-rs-69984cf8542ca"
(eski SR7 slider satırı) kullanılmıştı — ama bu satır satır 261'de zaten
"display: none !important" ile TÜM viewport'larda gizli, sıfır
yükseklikte bir element (yerel sandbox'ta öyle görünmese de, CANLI
sitede Playwright/Chrome ile doğrulandı: height:0, class'ında
"vc_hidden" de var). Yani v41'in kuralı gerçekte hiçbir şeye
uygulanmıyordu — kullanıcı zip'i deploy ettikten SONRA "hala aynı" diye
bildirdi, bu da bunu ortaya çıkardı. CANLI siteyi doğrudan (Chrome
araçlarıyla) inceleyince, anasayfanın gerçekte görünen hero bloğunun
".rk-mobile-hero-banner" (mobil) / ".rk-desktop-hero-banner" (masaüstü)
olduğu görüldü — bunlar v21/v23/v24'te (bu oturumdan ÖNCEKİ bir
oturumda) SR7 slider'ın yerine statik olarak eklenmiş, custom.css'te
zaten karşılık gelen stilleri olan (satır ~258-370) class'lar. Yerel
sandbox'taki inc/fragments/home.html dosyası bir noktada (muhtemelen
dosya-tutarsız bir restart sırasında) BU HTML EKLEMESİNİ KAYBETMİŞ —
custom.css cache-bust ile her seferinde tam güncel teslim edildiği için
CSS tarafı hep güncel kalmış ama home.html eski haline dönmüş
(dosyanın değişiklik tarihi diğer tüm dosyalardan haftalarca eskiydi).
Bu tutarsızlık canlı site Chrome ile incelenerek fark edildi ve
inc/fragments/home.html, canlı sitedeki GERÇEK
".rk-mobile-hero-banner"/".rk-desktop-hero-banner" işaretlemesiyle
(birebir canlıdan alınan HTML) yeniden senkronize edildi.

v42 — DOĞRU çözüm: gerçek mobil hero bloğuna (.rk-mobile-hero-banner)
diğer sayfalardaki banner'larla AYNI -68px kaydırmayı veriyoruz. Bu
blok "background:#fff" olsa da İLK çocuğu olan .rk-mobile-hero-photo
(fotoğraf) üstten başlıyor, dolayısıyla yukarı kayan 68px'lik alanda
her zaman fotoğraf görünüyor, beyaz zemin hiç açığa çıkmıyor — şeffaf
header bu fotoğrafın üstünde yüzüyor. */
@media (max-width: 768px) {
#post-16 .rk-mobile-hero-banner {
margin-top: -68px !important;
}
}

/* ==========================================================================
v43 — Anasayfa (index.php), v42'nin devamı: kullanıcı "üst ikonları ve
dijital tam hizmet modeli çok üste çıktı, logonun altına geliyor" dedi
(ekran görüntüsüyle: yıldız ikonu ve üstteki diğer ikonlar artık
hamburger/logo çubuğunun ARKASINA/ALTINA giriyordu).

Sebep: v42'deki "margin-top:-68px" TÜM ".rk-mobile-hero-banner" kutusunu
(fotoğraf + ikonlar + başlık görseli + alt metin) TEK BİR KATI BLOK
olarak 68px yukarı kaydırıyor. Fotoğrafın kendisi için bu doğru (üst
68px'lik kısmı artık şeffaf header'ın ARKASINDA görünüyor, istenen tam
olarak bu) — ama ikonlar (.rk-mobile-hero-icon-wrap, fotoğrafın
%7'sinde) ve başlık görseli (.rk-mobile-hero-title, fotoğrafın %50'sinde)
da aynı 68px'i kaybederek header'ın İÇİNE/ALTINA girdi; oysa bunların
ekrandaki GÖRÜNÜR konumu v42'den ÖNCEKİYLE AYNI kalmalıydı.

Çözüm: fotoğraf kayarken ikonları ve başlığı eskisiyle AYNI ekran
konumunda tutmak için, bu iki overlay elemana +68px telafi ekliyoruz
(kendi yüzde tabanlı "top" değerlerine ekleniyor, calc() ile) — böylece
sadece fotoğraf header'ın arkasına kayıyor, ikonlar/başlık YERİNDE
kalıyor, header'ın altına girmiyor. */
@media (max-width: 768px) {
#post-16 .rk-mobile-hero-icon-wrap {
top: calc(7% + 68px) !important;
}
}

/* ==========================================================================
v44 — Anasayfa (index.php), v43'ün düzeltmesi: kullanıcı "dijital tam
hizmet modeli iconların tam ortasında olacak şekilde ayarlaman
gerekiyor" dedi — başlık görseli ikonların ALT KISMINA taşıyor,
kulenin/dalganın üstüne biniyordu, ikonların ortasında değildi.

Sebep — v43'teki HATA: ".rk-mobile-hero-title"in yüzdesel "top" değeri
(%50) FOTOĞRAFA değil, ".rk-mobile-hero-icon-wrap"E göre hesaplanıyor
(çünkü title, icon-wrap'ın İÇİNDE bir eleman ve icon-wrap zaten
"position" ile kendi konumlama bağlamını oluşturuyor — Playwright ile
doğrulandı: title'ın gerçek konumu icon-wrap'ın yüksekliğine göre
tutarlı çıktı, fotoğrafın yüksekliğine göre değil). v43'te title'a da
icon-wrap'la AYNI +68px telafisi eklenmişti — ama icon-wrap zaten KENDİ
+68px'ini alıp fotoğrafa göre doğru konuma taşındığı için, ONUN İÇİNDEKİ
title'a AYRICA +68px eklemek gereksiz bir ikinci kaymaya (fazladan 68px
aşağı) neden oldu. "top:50%" + "transform:translate(-50%,-50%)"
tekniğinde bir elemanın MERKEZİ tam olarak belirtilen top/left
yüzdesindeki noktaya oturur; yani sadece "top:50%" (fazladan telafisiz)
title'ın merkezini icon-wrap'ın TAM ORTASINA getiriyor — istenen de
buydu.

Çözüm: title'daki gereksiz "+68px" kaldırıldı, sadece icon-wrap'taki
(fotoğrafa göre hesaplanan, gerçekten gerekli olan) +68px telafi
kaldı. */
@media (max-width: 768px) {
#post-16 .rk-mobile-hero-title {
top: 50% !important;
}
}

/* ==========================================================================
v46 — Anasayfa (index.php): Mobilde "Hizmetlerimiz" bölümünün "Bize Ulaşın"
butonundan hemen sonra, orijinal renklam.com.tr'de olmayan küçük bir
"Portfolyo" ön-izleme bloğu (ikon + başlık + açıklama + 2 örnek proje
kartı: Sarıbaş Gürme, Sever Metal) görünüyor, ardından footer geliyor.
Kullanıcı (verbatim): "orjinal renklam.com.tr. de mobil anasayfada böyle
bir alan yok bunu kaldır" / "bu şekilde geliyor sonra footer geliyor".

Tespit: bu blok #post-16 içinde iki ayrı .vc_row'dan oluşuyor —
1) başlık satırı: içinde #wd-69a6c00834cb2 id'li (benzersiz) "Portfolyo"
   info-box'ı barındırıyor. Bu satırın class kombinasyonu
   (.wd-rs-698ddc8d93231.vc_custom_1770904724918) CANLIDA aynı zamanda
   "Hizmetlerimiz" başlık satırında da AYNEN kullanılıyor (WPBakery/tema
   çıktısı iki ayrı satıra aynı otomatik class'ı vermiş) — bu yüzden bare
   class seçici YANLIŞLIKLA HER İKİSİNİ de gizlerdi; onun yerine :has()
   ile SADECE Portfolyo başlığını içeren satır hedefleniyor.
2) kart satırı: .wd-rs-699ff3bea294a (benzersiz, sadece bu satırda var).
Sadece mobilde (<=768px) gizleniyor; masaüstü etkilenmiyor.
========================================================================== */
@media (max-width: 768px) {
#post-16 .vc_row:has(#wd-69a6c00834cb2) { display: none !important; }
#post-16 .wd-rs-699ff3bea294a { display: none !important; }
}

/* ==========================================================================
v47 — MASAÜSTÜ banner başlıkları (kullanıcının 9 maddelik masaüstü turu,
2026-08-29): "masaüstü versiyonda başlıklar beyaz" + sayfa sayfa liste.

KÖK NEDEN TESPİTİ: v32-v38'de (bu oturumdan ÖNCEKİ bir oturumda) MOBİL için
zaten tam bu iş yapılmıştı — render_page_banner()'a 4./5. parametrelerle
sayfaya özel bir class ekleniyor (ör. "rk-hakkimizda-banner",
"rk-portfolyo-banner"...) ve v32-v38'in @media(max-width:768px) kuralları bu
class'ları hedefliyordu. CANLI sitede bu class'lar hâlâ doğru şekilde
üretiliyor (Chrome ile 8 sayfanın hepsinde doğrulandı: .wd-page-title
elemanı her sayfada kendi "rk-XXX-banner" class'ını taşıyor) — yani mobil
hâlâ çalışıyor. Ama v32-v38'in HİÇBİRİ masaüstü (min-width:769px) için bir
karşılık YAZMAMIŞ — bu yüzden masaüstünde temanın varsayılan stili
(".entry-title.title" için beyaz renk, font-size:78px) hiç ezilmeden
kalıyordu. Kullanıcının "masaüstünde beyaz" şikayeti tam olarak bu boşluk.

(Not: yerel sandbox'taki inc/fragments/*.html ve inc/functions.php dosyaları
bu "rk-XXX-banner" class enjeksiyonunu İÇERMİYOR — bu class'lar SADECE
canlıda var. Yerel dosyalar muhtemelen bu özelliğin eklenmesinden önceki bir
noktada donmuş kalmış / bir restart sırasında geride kalmış. Bu class'ları
CANLIDA Chrome ile bizzat doğrulayıp kullandık; yerel fragment/functions.php
dosyalarına DOKUNULMADI (dokunulsaydı ve yanlışlıkla eski/class'sız bir hâl
teslim edilseydi, mobildeki ÇALIŞAN kurulum bozulurdu). İleride biri bu
fragment dosyalarını "canlıdan tazele" işlemine tabi tutarsa bu class'ları
mutlaka korumalı.)

İKİ AYRI DURUM VAR:
A) Hakkımızda / Referanslarımız / Kariyer / İletişim — sayfanın kendi içinde
   ZATEN ikinci, koyu renkli bir başlık var (h4.woodmart-title-container,
   ör. "HAKKIMIZDA"). Kullanıcı: "2 tane başlık var beyaz olanı kaldır" —
   banner'ın beyaz başlığı + breadcrumb'ı TAMAMEN gizleniyor.
B) Portfolyo / Portfolyo-detay / Blog / Blog-detay — render_page_banner()
   başlığı SAYFANIN TEK başlığı, ikinci bir başlık yok. Kullanıcı: "başlık
   beyaz onu düzenle" (kaldır değil, düzelt) — bu yüzden GİZLENMİYOR, koyu
   lacivert (#2d245a, sitede zaten kullanılan marka rengi) yapılıp okunur
   hâle getiriliyor. Blog-detay için ayrıca "çok yukarda ve çok büyük
   puntada" şikayeti vardı: kök neden, temanın 78px sabit font-size'ının
   uzun yazı başlıklarında (ör. "Sosyal Medyada Görünür Olmanızı Sağlayacak
   5 Madde") 2 satıra sarıp bannerı olması gerekenden çok daha yüksek/
   baskın göstermesiydi — font-size 42px'e düşürülünce hem "çok büyük" hem
   "çok yukarda" (bannerın kendi yüksekliği küçüldüğü için) şikayeti aynı
   anda çözülüyor. Breadcrumb (yol izi) burada da mobildeki gibi tamamen
   kaldırıldı (sadece proje/yazı başlığı kalıyor).

Her iki durumda da CANLIDA Chrome DevTools ile enjekte edilen geçici
<style> ile test edilip screenshot'la doğrulandıktan SONRA bu dosyaya
yazıldı. */
@media (min-width: 769px) {
/* Durum A: ikinci (koyu) başlığı olan sayfalar — beyaz banner başlığı ve
breadcrumb tamamen gizleniyor. */
.rk-hakkimizda-banner .entry-title.title,
.rk-hakkimizda-banner .yoast-breadcrumb,
.rk-referanslarimiz-banner .entry-title.title,
.rk-referanslarimiz-banner .yoast-breadcrumb,
.rk-kariyer-banner .entry-title.title,
.rk-kariyer-banner .yoast-breadcrumb,
.rk-iletisim-banner .entry-title.title,
.rk-iletisim-banner .yoast-breadcrumb {
display: none !important;
}

/* Durum B: tek başlığı olan sayfalar — beyaz yerine koyu lacivert, aşırı
büyük font küçültülüyor, breadcrumb kaldırılıyor. */
.rk-portfolyo-banner .entry-title.title,
.rk-portfolyo-detay-banner .entry-title.title,
.rk-blog-banner .entry-title.title,
.rk-blog-yazi-banner .entry-title.title {
color: #2d245a !important;
font-size: 42px !important;
line-height: 1.25 !important;
}
.rk-portfolyo-banner .yoast-breadcrumb,
.rk-portfolyo-detay-banner .yoast-breadcrumb,
.rk-blog-banner .yoast-breadcrumb,
.rk-blog-yazi-banner .yoast-breadcrumb {
display: none !important;
}
}

/* ==========================================================================
v48 — Anasayfa mobil hero: "DİJİTAL tam hizmet modeli" başlığı/ikonları
kule/dalga fotoğrafıyla çakışıyor şikayeti (kullanıcı 4 fotoğraf gönderip
"2. fotoğraftaki gibi olması gerekiyor" dedi — 2./4. fotoğraf istenen temiz
durumu, 1./3. fotoğraf mevcut çakışma sorununu gösteriyordu).

KÖK NEDEN (Playwright ile 390/480/600/738/768px genişliklerde ölçülüp
screenshot alınarak bulundu): ".rk-mobile-hero-icon-wrap"in "width:82%"i
"max-width:380px" ile SINIRLIYDI — bu sınır ~463px viewport genişliğinden
sonra devreye giriyor. Fotoğraf kutusu ise "aspect-ratio:21/20" ile
viewport genişliğiyle BİRLİKTE (kırpılmadan, tam yükseklikte — object-fit:
cover zaten TÜM görsel yüksekliğini gösteriyor, önceki bir oturumda
doğrulanmıştı) büyümeye devam ediyor. Sonuç: viewport 463px'i geçtikten
sonra ikon/başlık bloğu SABİT boyutta kalırken arkasındaki kule fotoğrafı
büyümeye devam ediyor — kulenin ince/uzun sivri külahı, göreceli olarak
büyüyüp sabit boyuttaki başlık kutusunun İÇİNE giriyor (390px'te sorun
yokken 738px'te "modeli" kelimesinin tam kulenin üzerine binmesi tam olarak
bu yüzdendi — kullanıcının 1./3. fotoğrafı muhtemelen geniş bir telefon/
tablet ekranında, >463px genişlikte alınmıştı).

Çözüm: "max-width:380px" → "630px" yükseltildi (768px'e kadar %82'lik oran
hiç kırpılmadan sürüyor, aynı 390px'teki ORANTILI/güvenli kompozisyon tüm
mobil aralıkta korunuyor). 390-480-600-738-768px'in hepsinde Playwright
screenshot ile doğrulandı: hiçbirinde artık başlık/ikon kule ile çakışmıyor,
390px'teki (kullanıcının onayladığı "2. fotoğraf") görünüm bozulmadı. */

/* ==========================================================================
v50 — 31.08.2026 revize listesi (madde 6, 7, 8)
========================================================================== */

/* --------------------------------------------------------------------------
madde 6: "Mobil iç sayfalarda Page Title ve içerikler çok aşağıda duruyor,
renkli dalgaya yaklaşmalılar."

ÖLÇÜM (Playwright, 390px): banner 0-333px; sayfanın kendi başlığı (h4
.woodmart-title-container) 353px; başlıktan sonraki ilk içerik 421-491px
(sayfaya göre değişen 60-70px'lik WPBakery boşluğu yüzünden). Canlı sitedeki
aynı ölçüler 390px'e ölçeklendiğinde başlık ~275px, içerik ~340px çıkıyor.

KÖK NEDEN: banner'ın hemen ardından gelen <main> normal akışta başlıyor
(masaüstünde doğru), mobilde ise dalganın soluk alt kısmı boş kalıyor;
ayrıca 2. WPBakery satırındaki masaüstü için girilmiş sabit yükseklikli
vc_empty_space mobilde de aynen uygulanıyor.
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
/* v52.1: seçici ".wd-page-title + main" idi; Politikalarımız sayfasının
banner'ı mobilde GÖRÜNMÜYOR (o sayfa üst görselini kendi içindeki
".mobil-banner-img" satırıyla basıyor), dolayısıyla orada yukarı çekecek
bir banner yokken -78px uygulanıyor ve sayfanın kendi üst görseli logonun
üstünden geçiyordu. Kural artık SADECE banner'ı gerçekten görünen
sayfalara (rk-banner-title-visible) uygulanıyor. */
.rk-banner-title-visible + main.content-layout-wrapper { margin-top: -78px; }
main.content-layout-wrapper .wpb-content-wrapper > .vc_row:nth-of-type(2) .vc_empty_space {
height: 20px !important;
}
}

/* --------------------------------------------------------------------------
madde 7: "Mobilde hamburger menü iconu renklam logosuna çok yakın duruyor,
renklam logosunu bi tık sağa kaydıralım (hamburger iconunun konumunu
değiştirmeyelim, siyaha geçince atlama yapar)."

ÖLÇÜM: hamburger sağ kenarı 66px, logo sol kenarı 71px -> arada 5px var.
Hamburger'a HİÇ dokunulmuyor (konumu sabit), sadece logoya sol boşluk
veriliyor -> arada ~21px kalıyor.
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
.container-fluid-rf.navbar .navbar-brand { margin-left: 16px !important; }
}

/* --------------------------------------------------------------------------
madde 8: "Anasayfada da iç sayfalarda da içerik sıralamalarında farklılıklar
var... eski sitede çok daha derli toplu duruyor."

KÖK NEDEN: Anasayfadaki "Hizmetlerimiz" bloklarının statik HTML'i,
masaüstündeki AYNALI (sol sütun sola, sağ sütun sağa hizalı) düzen için
"text-right" + "box-icon-align-right" class'larıyla dondurulmuş. Woodmart'ta
bu class'ları mobilde sola çeviren responsive ayar (wd-rs-*) WordPress'in
kendi ürettiği CSS'te duruyordu ve statik döküme geçmemiş; sonuç olarak
mobilde metinler sağa yaslı, ikon metnin SAĞINDA kalıyor (canlıda ikon
SOLDA ve metin sola yaslı). Ayrıca sarmalayıcı satırın masaüstü için
girilmiş 50px sağ/sol padding'i mobilde sütunu 270px'e daraltıp metni
gereksiz yere satırlara bölüyordu.
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
.wd-info-box.text-right,
.wd-info-box.text-right .info-box-content,
.wd-info-box.text-right .info-box-title,
.wd-info-box.text-right .info-box-inner {
text-align: left !important;
}
.wd-info-box.box-icon-align-right { flex-direction: row !important; }
.wd-info-box.box-icon-align-right > .box-icon-wrapper { margin-left: 0 !important; margin-right: 14px !important; }
.vc_row.vc_inner.vc_custom_1770902586113 { padding-left: 10px !important; padding-right: 10px !important; }
}

/* --------------------------------------------------------------------------
v50 ek: render_page_banner() ile üretilen banner (Blog / Blog-detay /
Portfolyo / Portfolyo-detay) mobilde 390px'lik ekranda 411px genişliyordu —
içindeki breadcrumb satırı (ör. "Anasayfa » Blog » Sosyal Medyada Görünür
Olmanızı Sağlayacak 5 Madde") sarmadığı için kutuyu dışarı itiyordu; bunun
sonucu olarak başlığın sağ kenarı ekranın dışında kalıyordu. Fragment'ten
gelen sayfalarda (Hakkımızda/İletişim...) breadcrumb kısa olduğu için sorun
görünmüyordu.
-------------------------------------------------------------------------- */
.wd-page-title { max-width: 100%; overflow: hidden; }
@media (max-width: 768px) {
.rk-blog-yazi-banner .entry-title.title,
.rk-portfolyo-detay-banner .entry-title.title {
font-size: 26px !important;
line-height: 1.25 !important;
}
.rk-blog-banner .entry-title.title,
.rk-portfolyo-banner .entry-title.title {
font-size: 32px !important;
line-height: 1.25 !important;
}
}

/* ==========================================================================
v51 — İletişim sayfası MOBİL düzeni (kullanıcının 31.08.2026 ekran
görüntüleri): istenen sıra "İLETİŞİM başlığı -> Size Nasıl Yardımcı
Olabiliriz? -> illüstrasyon görseli -> form -> şube adresleri (ortalı)".

MEVCUT DURUM / KÖK NEDEN: bu bölüm WPBakery'de İKİ SÜTUNLU bir satır
(.wd-rs-69943f93b60c8): sol sütunda (3/5) başlık + form, sağ sütunda (2/5)
illüstrasyon var. Masaüstünde yan yana doğru duruyor; mobilde sütunlar alt
alta indiği için görsel FORMDAN SONRA kalıyor. Görseli başlık ile formun
ARASINA almak, iki ayrı sütunun içindeki üç kutuyu tek bir sıralamada
toplamayı gerektiriyor — bu yüzden sütun sarmalayıcıları mobilde
"display:contents" ile şeffaflaştırılıp satırın kendisi flex kolona
çevriliyor; ardından üç kutu "order" ile sıralanıyor. (Sıralama tamamen
CSS ile yapıldı; HTML'e dokunulmadı, masaüstü düzeni hiç etkilenmiyor.)
========================================================================== */
@media (max-width: 768px) {

/* 1) Sıra: başlık -> görsel -> form */
.wd-rs-69943f93b60c8.vc_row { display: flex !important; flex-direction: column !important; }
.wd-rs-69943f93b60c8 > .wpb_column,
.wd-rs-69943f93b60c8 > .wpb_column > .vc_column-inner,
.wd-rs-69943f93b60c8 > .wpb_column > .vc_column-inner > .wpb_wrapper { display: contents !important; }
.wd-rs-69943f93b60c8 > .wpb_column > .vc_column-inner > .wpb_wrapper > .vc_empty_space { order: 0; }
.wd-rs-69943f93b60c8 .wpb_text_column { order: 1; }
.wd-rs-69943f93b60c8 .wpb_single_image { order: 2; }
.wd-rs-69943f93b60c8 .wpcf7 { order: 3; }
/* görsel sütununun kendi üst boşluğu artık gereksiz (iki boşluk üst üste
biniyordu) */
.wd-rs-69943f93b60c8 .wd-rs-69a033ca2185b .vc_empty_space { display: none !important; }

/* 2) Form: kullanıcının ekran görüntüsündeki gibi 3'lü ızgara
(Ad Soyad | İşletmenizin Adı | Telefon  /  Email | Sektör | Almak
İstediğiniz), altında tam genişlik açıklama alanı ve ortalı buton.
Alan SIRASI zaten istenen sırada olduğu için HTML değiştirilmedi; iki
sütunlu satırlar "display:contents" ile çözülüp tüm alanlar tek bir
3 sütunlu ızgaraya alındı. */
#post-140 form.rk-form {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 10px !important;
align-items: start;
}
#post-140 form.rk-form > .form-row.rk-two-col { display: contents !important; }
#post-140 form.rk-form > .form-row:not(.rk-two-col) {
grid-column: 1 / -1;
margin-bottom: 0 !important;
}
#post-140 form.rk-form .rk-two-col > div { min-width: 0; }
#post-140 form.rk-form input[type=text],
#post-140 form.rk-form input[type=email],
#post-140 form.rk-form input[type=tel],
#post-140 form.rk-form select {
padding: 13px 10px !important;
font-size: 11px !important;
font-weight: 600;
border-radius: 8px;
}
#post-140 form.rk-form select { padding-right: 24px !important; background-position: right 4px center; text-overflow: ellipsis; }
#post-140 form.rk-form textarea { border-radius: 8px; font-size: 13px !important; }

/* 3) "adres başlık adres telefon bunların hepsini centerlı yapmanı
istiyorum" — şube blokları (h2 başlık + h5 adres + h3 telefon) ortalanıyor.
Sayfanın kendi "İLETİŞİM" başlığı ve "Size Nasıl Yardımcı Olabiliriz?"
metni SOLDA kalıyor (kullanıcının görselinde de solda). */
#post-140 .wd-text-block,
#post-140 .wd-text-block h2,
#post-140 .wd-text-block h3,
#post-140 .wd-text-block h5,
#post-140 .wd-text-block p { text-align: center !important; }
}

/* --------------------------------------------------------------------------
v51.1 — "bu resim, form ve başlık altındaki metin 0'a 0 dayamışsın, bunlara
10px sağdan 10px soldan boşluk ver".

ÖLÇÜM (390px): "Size Nasıl Yardımcı Olabiliriz?" metni, illüstrasyon ve form
alanları ekran kenarından yalnızca 5px içerideydi. KÖK NEDEN: WPBakery satırı
(.vc_row) standart -15px sağ/sol margin ile geliyor; bloklara verilen 20px
padding bu -15px'i büyük ölçüde yiyordu (20 - 15 = 5px net boşluk).
Çözüm: bu satırda negatif margin mobilde sıfırlanıp bloklara net 10px
veriliyor.
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
.wd-rs-69943f93b60c8.vc_row { margin-left: 0 !important; margin-right: 0 !important; }
#post-140 .wd-rs-69943f93b60c8 .wpb_text_column > .wpb_wrapper {
padding-left: 10px !important;
padding-right: 10px !important;
}
/* Sayfanın "İLETİŞİM" başlığı da aynı 10px hizasına alındı; aksi hâlde
başlık 20px, altındaki metin 10px kalıp basamaklı görünüyordu. */
#post-140 .title-wrapper {
padding-left: 10px !important;
padding-right: 10px !important;
}
#post-140 form.rk-form {
padding-left: 10px !important;
padding-right: 10px !important;
}
#post-140 .wd-rs-69a033ca2185b img[src*="iletisim-gorsel.png"] {
width: calc(100% - 20px) !important;
margin: 20px auto 30px !important;
}
}

/* --------------------------------------------------------------------------
v52.2 — Politikalarımız sayfası MOBİL üst bölümü.
"üst resim logonun üzerinden geçiyor" + gönderilen referans görsel.

ÖLÇÜM (436px): üst görsel (.mobil-banner-img içindeki Mobil-Header.jpg)
-90px'den başlıyordu; 0-68px arası header alanının tamamen altında kalıp
logonun üzerinden geçiyordu. Kök nedenin bir kısmı v50'nin -78px kaydırması
(yukarıda düzeltildi), kalanı bu sayfaya özel masaüstü için girilmiş
"margin-top:-80px" değeri. Referans görselde üst görsel header'ın hemen
ALTINDAN başlıyor ve başlık görselin beyaz alt kısmına oturuyor.
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
/* v53.1: görselin ALT kısmı "POLİTİKALARIMIZ" başlığının üzerine geliyordu.
Görsel 40px yukarı alındı; başlığın ve altındaki listenin yeri DEĞİŞMESİN
diye başlık satırının negatif margin'i aynı miktarda (-180 -> -140)
azaltıldı — böylece başlık/liste 325/413px'te kalırken görselin dalgası
başlıktan 40px daha uzaklaşıyor. */
#post-167 .mobil-banner-img .wpb_single_image { margin-top: -40px !important; }
#post-167 .wd-rs-69b1179d788d3 { margin-top: -140px !important; }
#post-167 .wd-rs-69a835b9c2083 .liner-continer { margin-top: 30px !important; }
#post-167 .wd-rs-69b155d129e48 { margin-top: 17px !important; }
}

/* ==========================================================================
v55 — Blog liste ve blog detay sayfası (kullanıcının 31.08.2026 referans
ekran görüntüleri)
========================================================================== */

/* 1) Blog LİSTE kartı: "başlık, özet ve alt butonu bu şekilde centerlı
yaparmısın". Portfolyo kartları zaten ortalıydı, blog kartları sola
yaslıydı. */
.rk-grid-blog .rk-card-body { text-align: center; }
.rk-grid-blog .rk-card-title { color: #2d245a; font-size: 20px; line-height: 1.35; margin-bottom: 12px; }
.rk-grid-blog .rk-card-excerpt { color: #4a4a4a; font-size: 15px; line-height: 1.55; margin-bottom: 14px; }
.rk-grid-blog .rk-card-more { color: #b3122c; }

/* 2) Blog DETAY: banner artık yalnızca dalga görseli — başlık banner'ın
içinden çıkarıldı ("üst resim başlık üzerine gelmemesi gerekiyor"),
dalganın altında sola yaslı ve daha küçük puntoda yeniden basılıyor. */
.rk-blog-yazi-banner .entry-title.title,
.rk-blog-yazi-banner .yoast-breadcrumb { display: none !important; }

.rk-post-inner { max-width: 1000px; }
.rk-post-title {
font-size: 26px;
line-height: 1.32;
font-weight: 700;
color: #2d245a;
text-align: left;
margin: 0 0 18px;
}
.rk-post-body { text-align: left; max-width: 100%; margin: 0; }
.rk-post-body p { font-size: 16px; line-height: 1.75; color: #3a3a44; margin-bottom: 16px; }

/* 3) Yazının SONU: kategori rozeti + başlık (ortalı), kapak görseli ve
gezinme çubuğu. Kapak görseli önceden yazının BAŞINDAYDI. */
.rk-post-end { padding-top: 20px; padding-bottom: 10px; }
.rk-post-cat {
display: block; width: max-content; margin: 0 auto 14px;
background: #dd1872; color: #fff; font-size: 12px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; padding: 6px 14px; border-radius: 3px;
}
.rk-post-end-title {
font-size: 20px; line-height: 1.4; font-weight: 600; color: #2d245a;
text-align: center; margin: 0 0 20px;
}
.rk-post-end-cover { display: block; width: 100%; height: auto; }
.rk-post-nav {
display: flex; align-items: center; justify-content: space-between;
border-top: 1px solid #e6e6e8; border-bottom: 1px solid #e6e6e8;
padding: 14px 20px; margin-top: 26px;
}
.rk-post-nav-link, .rk-post-nav-all {
display: inline-flex; align-items: center; gap: 8px;
color: #2d245a; text-decoration: none; font-size: 15px; font-weight: 600;
}
.rk-post-nav-link:hover, .rk-post-nav-all:hover { color: #dd1872; }
.rk-post-nav-all { font-size: 20px; }
.rk-post-nav-empty { min-width: 60px; }
.rk-post-nav-next i, .rk-post-nav-prev i {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border: 1px solid #d9d9dd; border-radius: 50%; font-size: 14px;
}

@media (max-width: 768px) {
.rk-post-title { font-size: 20px; }
.rk-post-body p { font-size: 15px; line-height: 1.7; }
.rk-post-end-title { font-size: 17px; }
.rk-post-nav { padding: 12px 14px; }
}

/* --------------------------------------------------------------------------
v56 — "kariyer sayfasının içindeki başvuru formunun arka planındaki bu
background image'i kaldır, mobilde sadece".

v49'da eksik olan background-image geri eklenmişti (madde 4); masaüstünde
3B şekiller formun sağında/solunda duruyor. Mobilde ise sütun daraldığı
için şekiller formun ÜZERİNE biniyor — bu yüzden yalnızca mobilde
kaldırılıyor, masaüstü aynen kalıyor.
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
#post-166 .vc_custom_1771336569630 { background-image: none !important; }
}

/* ==========================================================================
v57 — Portfolyo liste + portfolyo detay (kullanıcının 31.08.2026 referansları
ve canlı https://renklam.com.tr/portfolyo/ sayfası)
========================================================================== */

/* 1) Kart bilgileri artık HER ZAMAN değil, SADECE üzerine gelindiğinde
görünüyor (canlıdaki davranış). Önceden kartın altında sabit bir koyu
gradyan + başlık vardı. */
.rk-grid-portfolio .rk-card { background: #0f1116; }
.rk-grid-portfolio .rk-card-link { display: block; position: relative; overflow: hidden; }
.rk-grid-portfolio .rk-card-body {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px; padding: 20px;
background: rgba(20, 18, 38, .55);
color: #fff; text-align: center;
opacity: 0; transition: opacity .28s ease;
}
.rk-grid-portfolio .rk-card-link:hover .rk-card-body,
.rk-grid-portfolio .rk-card-link:focus .rk-card-body,
.rk-grid-portfolio .rk-card.is-active .rk-card-body { opacity: 1; }
.rk-grid-portfolio .rk-card-cat {
color: #fff; opacity: .95; font-size: 14px; font-weight: 400;
letter-spacing: 0; text-transform: none; margin: 0;
}
.rk-grid-portfolio .rk-card-title { color: #fff; font-size: 22px; font-weight: 600; margin: 0; }
.rk-card-zoom {
position: absolute; top: 14px; right: 14px; z-index: 2;
color: #fff; font-size: 17px; opacity: 0; transition: opacity .28s ease;
}
.rk-grid-portfolio .rk-card-link:hover .rk-card-zoom,
.rk-grid-portfolio .rk-card.is-active .rk-card-zoom { opacity: 1; }
.rk-grid-portfolio .rk-card:hover { transform: none; box-shadow: 0 2px 14px rgba(0,0,0,.08); }

/* 2) "6 projede bir daha fazla yükle butonu" */
.rk-card-hidden { display: none !important; }
.rk-loadmore-wrap { text-align: center; margin-top: 34px; }
.rk-loadmore {
background: transparent; color: #2d245a; border: 1px solid #d3d3da;
padding: 15px 34px; border-radius: 3px; cursor: pointer;
font-family: inherit; font-size: 14px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.rk-loadmore:hover { background: #2d245a; border-color: #2d245a; color: #fff; }

/* 3) Portfolyo DETAY */
.rk-proje-inner { max-width: 1000px; }
.rk-proje-title {
font-size: 26px; line-height: 1.32; font-weight: 700; color: #2d245a;
text-align: left; margin: 0;
}
.rk-proje-cover { display: block; width: 100%; height: auto; }
.rk-proje-body { text-align: center; max-width: 100%; margin: 0; }
.rk-proje-body p { font-size: 16px; line-height: 1.75; color: #3a3a44; margin-bottom: 18px; }
.rk-proje-btn-wrap { text-align: center; margin: 26px 0 10px; }
.rk-proje-btn {
display: inline-block; background: #2d245a; color: #fff; text-decoration: none;
font-weight: 700; font-size: 15px; padding: 16px 34px; border-radius: 3px;
}
.rk-proje-btn:hover { background: #1d1740; color: #fff; }
.rk-proje-nav { margin-top: 22px; }

.rk-related-title {
font-size: 22px; font-weight: 700; color: #2d245a; margin: 30px 0 16px; text-align: left;
}
.rk-related-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rk-related-item { position: relative; display: block; overflow: hidden; background: #0f1116; }
.rk-related-item img { display: block; width: 100%; height: auto; }
.rk-related-overlay {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
background: rgba(20, 18, 38, .55); color: #fff; text-align: center;
opacity: 0; transition: opacity .28s ease;
}
.rk-related-item:hover .rk-related-overlay { opacity: 1; }
.rk-related-overlay .rk-card-cat { color: #fff; font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; margin: 0; }
.rk-related-overlay .rk-card-title { color: #fff; font-size: 20px; font-weight: 600; margin: 0; }

@media (max-width: 768px) {
.rk-proje-title { font-size: 20px; }
.rk-proje-body p { font-size: 15px; line-height: 1.7; }
.rk-proje-btn { display: block; width: 100%; box-sizing: border-box; }
.rk-related-list { grid-template-columns: 1fr; gap: 16px; }
.rk-related-title { font-size: 19px; }
.rk-grid-portfolio .rk-card-title { font-size: 20px; }
}

/* ==========================================================================
v58 — Portfolyo detay: başlık üstü boşluk + "İlgili Projeler" carousel
========================================================================== */

/* v58 + v59: "üst başlıktan biraz boşluk bırakman lazım" / "üstten boşluk
vermemişsin title için" — proje başlığı hem üstteki menü/logo şeridine hem de
ALTINDAKİ kapak görseline yapışıktı (altta yalnızca ~5px kalıyordu). Başlık
artık iki yandan da nefes alıyor: mobilde üstten 48px / alttan 32px,
masaüstünde 60px / 40px. */
.rk-proje-head { padding-top: 60px; padding-bottom: 40px; }
@media (max-width: 768px) {
.rk-proje-head { padding-top: 48px; padding-bottom: 32px; }
}

/* İlgili Projeler carousel'i */
.rk-related { position: relative; }
.rk-related-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.rk-related-dots { display: none; }
.rk-related-arrow { display: none; }

@media (max-width: 768px) {
/* Tek sütun, yatay kaydırmalı (swipe) carousel */
.rk-related-list {
display: flex;
grid-template-columns: none;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.rk-related-list::-webkit-scrollbar { display: none; }
.rk-related-item {
flex: 0 0 100%;
scroll-snap-align: start;
}
.rk-related-arrow {
display: flex; align-items: center; justify-content: center;
position: absolute; top: 50%; transform: translateY(-50%);
width: 38px; height: 38px; border-radius: 50%;
border: none; background: rgba(255,255,255,.9); color: #2d245a;
box-shadow: 0 2px 10px rgba(0,0,0,.18); font-size: 16px; cursor: pointer; z-index: 3;
}
.rk-related-prev { left: 10px; }
.rk-related-next { right: 10px; }
.rk-related-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.rk-related-dot { width: 8px; height: 8px; border-radius: 50%; background: #d3d3da; transition: background .2s ease; }
.rk-related-dot.is-active { background: #2d245a; }
/* Mobilde hover yok — bilgi katmanı sürekli görünür olmasın diye
dokunulduğunda (:active) gösteriliyor. */
.rk-related-item:active .rk-related-overlay { opacity: 1; }
}

/* ==========================================================================
v60 — Anasayfa mobil revizeleri (31.08.2026)
========================================================================== */
@media (max-width: 768px) {

/* madde 1: "bu metni 60-80px kadar yukarıya almanı istiyorum" — hero
görselinin altındaki tanıtım metni, görselin beyaza dönen alt kısmının
üzerine 70px çekildi (görselin o bölgesi zaten beyaz). */
.rk-mobile-hero-content {
margin-top: -70px;
background: transparent;
position: relative;
z-index: 2;
}

/* madde 2: "burada renklam logosu olmaması gerekiyor, üstteki resim ve
alttaki başlık ortalı olmalı, resim 10px sağdan 10px soldan boşluklu
olmalı". WPBakery iç satırının -15px yan margin'i görseli ekranın
dışına taşırıyordu (x:-5, genişlik 450 / ekran 440). */
.wd-rs-6998040092c57.vc_row,
.wd-rs-6998419c59bb5.vc_row { margin-left: 0 !important; margin-right: 0 !important; }
.wd-rs-699841d7c6981 .wpb_text_column:has(img[src*="logo-300x96"]) { display: none !important; }
.wd-rs-699841d7c6981 img[src*="logo-300x96"] { display: none !important; }
.wd-rs-699841ca0125d .wpb_single_image,
.wd-rs-699841ca0125d .vc_figure,
.wd-rs-699841ca0125d img { text-align: center; margin-left: auto; margin-right: auto; }
.wd-rs-699841d7c6981 h1 { text-align: center !important; }
}

/* --------------------------------------------------------------------------
v61 — "hizmetlerimiz ile gif arasında boşluk çok fazla, 90px yukarı çekelim".
GIF dosyasının kendi içinde altta geniş bir boşluk var; ayrıca bulunduğu
sütunun alt boşluğu ekleniyordu. Seçici, GIF sütununun HEMEN ARDINDAN gelen
satırı hedefliyor — bu yalnızca mobilde (GIF oraya taşındığında) geçerli
olduğu için "Portfolyo" gibi aynı sınıfları paylaşan diğer satırlar
etkilenmiyor.
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
.wd-rs-69980b3ddc526 + .vc_row { margin-top: -90px !important; }
}

/* --------------------------------------------------------------------------
v63 — Anasayfa hero metni: "bazı yazılar bold bazıları normal".
İki ayrı sorun vardı:
1) İşaretleme hatalıydı — mobilde "<b>Ajansımız Balıkesir'</b>" şeklinde
   TÜM ifade kalın işaretlenmişti; referansta yalnızca şehir adları kalın.
   Masaüstünde de <b> etiketlerinin içinde fazladan boşluk vardı
   ("<b>İstanbul </b> ve <b> İzmir </b>"), kelime araları bozuk çıkıyordu.
2) Temanın gövde fontu ayarı 700 (kalın) olduğu için hero paragrafının
   TAMAMI kalın render oluyor, <b> ile normal metin arasında fark
   kalmıyordu. Hero paragrafı 400'e alındı; vurgular 700'de kaldı.
   (Sitenin geri kalanı temanın kendi 700 ayarında bırakıldı — canlı site
   de öyle.)
-------------------------------------------------------------------------- */

/* ==========================================================================
v64 — 31.08.2026 revize turu. MASAÜSTÜ ve MOBİL kuralları bilerek ayrı
media query bloklarına yazıldı; hiçbir kural iki kırılımı birden
etkilemiyor.
========================================================================== */

/* ---------- MASAÜSTÜ (>= 769px) ---------- */
@media (min-width: 769px) {

/* M1 — "Portfolyo sayfasındaki page title diğer sayfalardaki gibi 33px
olsun." (v46'da 42px'e ayarlanmıştı.) */
.rk-portfolyo-banner .entry-title.title { font-size: 33px !important; }

/* M2 — Portfolyo detay: banner geri geldi (PHP tarafında), banner'ın kendi
beyaz başlığı/breadcrumb'ı gizli; sayfa başlığı banner'ın ALTINDA,
container içinde ve referanstaki gibi büyük puntoda. */
.rk-portfolyo-detay-banner .entry-title.title,
.rk-portfolyo-detay-banner .yoast-breadcrumb { display: none !important; }
.rk-proje-title { font-size: 40px; }
.rk-proje-head { padding-top: 46px; padding-bottom: 34px; }

/* M2 — "bu resim neden bu kadar tam ekran şeklinde geliyor": kapak görseli
full-bleed idi, container hizasına alındı. 1160px = .rk-container'ın
(1200px - 2x20px padding) İÇ genişliği; başlık, metin ve görsel aynı sol
kenardan (x=140) başlasın diye bu değer kullanıldı. */
.rk-proje-cover { max-width: 1160px; margin-left: auto; margin-right: auto; }
.rk-proje-inner, .rk-post-inner { max-width: 1200px; }

/* M4 — "en altta önerilen projeler neden böyle full width, container
hizasında olsun": gezinme çubuğu ve İlgili Projeler bloğu container
genişliğine alındı. */
.rk-proje-nav,
.rk-post-nav,
.rk-related { max-width: 1160px; margin-left: auto; margin-right: auto; }

/* M5 — Blog detay: yazı başlığı "page title yok" denecek kadar küçüktü
(26px, içerikteki ara başlıklarla aynı). Banner görselini kesmeden,
banner'ın altında büyük punto. */
.rk-post-title { font-size: 40px; margin-bottom: 26px; }

/* M6 — Blog detay: yazı sonundaki kapak görseli full-bleed idi. */
.rk-post-end-cover { max-width: 1160px; margin-left: auto; margin-right: auto; }
.rk-post-end { max-width: 1160px; margin-left: auto; margin-right: auto; }
}

/* ---------- MOBİL (<= 768px) ---------- */
@media (max-width: 768px) {

/* M2 (mobil karşılığı) — Portfolyo detayda banner İSTENMİYORDU; PHP artık
her zaman basıyor, mobilde tamamen gizleniyor. Böylece masaüstü düzeltmesi
mobili etkilemiyor. */
.rk-portfolyo-detay-banner { display: none !important; }

/* M8 — "politikalar sayfası mobil kısmı üst background logonun altına kadar
inmiş, tam ekran kaplamıyor": bu sayfanın üst görseli diğer sayfalardaki
banner gibi -68px ile header'ın ALTINA kaymıyordu (v53'te -40px'e
ayarlanmıştı). Diğer sayfalarla aynı -68px'e getirildi; başlık ve liste
yerinden oynamasın diye başlık satırının negatif margin'i aynı miktarda
(28px) telafi edildi. */
#post-167 .mobil-banner-img .wpb_single_image { margin-top: -68px !important; }
#post-167 .wd-rs-69b1179d788d3 { margin-top: -112px !important; }

/* M9 — "menü sticky'ye döndüğünde menü ile logo birbirinden ayrılıyor":
kaydırma sırasında header'ın kendisi ve içindeki logo/hamburger kutuları
koyu bir zemin alıp iki ayrı blok gibi görünüyordu. Canlı sitede header
her durumda şeffaf; tüm durumlar için şeffaflık zorlandı. */
.offcanvas-navigation .container-fluid-rf.navbar,
.offcanvas-navigation .container-fluid-rf.navbar.rk-nav-scrolled,
.offcanvas-navigation .container-fluid-rf.navbar .navbar-brand,
.offcanvas-navigation .container-fluid-rf.navbar .menu-icon-etc,
.offcanvas-navigation .container-fluid-rf.navbar .navbar-toggler,
.offcanvas-navigation .container-fluid-rf.navbar .enwb-oc-before-menu-icon {
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
}

/* ==========================================================================
v65 — 31.08.2026, v64 sonrası geri bildirim
========================================================================== */

/* ---- HER İKİ KIRILIM ---- */

/* "mobil menüde sticky header'da logo ile hamburger ayrı geliyor, aralarında
boşluk var" / masaüstünde kaydırınca koyu kutu içinde beyaz logo çıkıyor.

KÖK NEDEN: Woodmart teması sayfa kaydırılınca header'ın FIXED bir KOPYASINI
(".whb-clone") oluşturup ".whb-sticked" ile görünür yapıyor; bu kopya kendi
koyu zeminini ve ayrı "sticky logo"sunu (renklam-stickylogo.png, beyaz)
getiriyor. Sitenin gerçek header'ı bu değil — mobilde
".offcanvas-navigation.oc-fixed-top", masaüstünde ".whb-general-header".
Kopya tamamen devre dışı bırakıldı; orijinal header de sticky durumda
"position:fixed"e geçmiyor. (v7'deki kural yalnızca ORİJİNAL satırı ve
yalnızca mobilde gizliyordu, kopyayı hiç kapsamıyordu.) */
/* v67 GERİ ALINDI: Bu üç kural sticky header'ı bozuyordu —
".whb-main-header{position:static}" header'ı normal akışa sokup sayfanın
üstünde BEYAZ bir şerit bırakıyor ve banner'ı aşağı itiyordu;
".wd-sticky-logo{display:none}" ise sticky durumda logoyu tamamen
kaldırdığı için koyu kutuda yalnızca hamburger kalıyordu ("sticky header
sadece background olarak beyaz gözüküyor"). Temanın kendi sticky davranışı
aynen geri getirildi — kullanıcının "böyle gözükmesi lazım" dediği görünüm
zaten buydu. */

/* ---- MASAÜSTÜ (>= 769px) ---- */
@media (min-width: 769px) {

/* "portfolio başlığı 33px olacaktı" — liste sayfasının banner başlığı v64'te
33px'e alınmıştı; DETAY sayfasının başlığı 40px kalmıştı, o da 33px yapıldı. */
.rk-proje-title { font-size: 33px; }

/* "portfolio detay sayfasındaki resim gerektiğinden çok fazla büyük,
çözünürlük bozuluyor": kapak görselleri 1080x1080; 1160px genişlikte
gösterilince BÜYÜTÜLÜYOR ve bulanıklaşıyordu. Artık hiçbir kapak kendi
doğal boyutunun üzerine çıkmıyor. */
.rk-proje-cover { max-width: 720px; }
}

/* ---- KAPAK GÖRSELLERİ: ASLA BÜYÜTME (her iki kırılım) ----
"Blog'daki büyük resim konusu hala düzelmemiş, çok büyük bir resim var":
blog kapakları 300x300'lük küçük resimler; "width:100%" ile 1160px'e
gerilince ~4 kat büyütülüp tamamen bulanıklaşıyordu. width:auto ile her
görsel en fazla kendi doğal boyutunda gösteriliyor. */
.rk-post-end-cover {
width: auto !important;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 769px) {
.rk-post-end-cover { max-width: 720px; }
}

/* ==========================================================================
v66 — Canlı site (renklam.com.tr) Chrome ile ÖLÇÜLEREK birebir eşleştirildi.

Ölçüm (masaüstü 1440px):
  Portfolyo detay : banner 350px · başlık h4 55px/700 #2d245a sola yaslı,
                    banner'ın hemen altında · içerik görseli 1222px geniş
                    (x=109) · açıklama ORTALI · buton #2d225a, 18px/25px
                    padding, 16px/700 · "İlgili Projeler" 22px/700 sola yaslı
  Blog detay      : banner 372px, içinde 78px "Blog" başlığı · kategori
                    rozeti + yazı başlığı 32px/500 ORTALI · kapak görseli
                    1080px (doğal boyut) ortalı · sonra içerik
Mobil (430px)     : header ŞEFFAF, hamburger x=16, logo x=71 (yani aralarında
                    ~5px var; koyu kutu YOK) — bizdeki koyu kutular ve
                    "bembeyaz header" temanın sticky KOPYASINDAN geliyordu,
                    v65'te kapatıldı, canlıda da böyle bir kopya yok.
========================================================================== */

/* ---- Blog detay: kapak görseli artık yazının BAŞINDA ---- */
.rk-post-head { padding-top: 20px; padding-bottom: 0; }
.rk-post-cat {
display: block; width: max-content; margin: 0 auto 14px;
background: #dd1872; color: #fff; font-size: 12px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; padding: 6px 14px; border-radius: 3px;
}
.rk-post-cover {
display: block;
width: 100%;
height: auto;
margin: 22px auto 0;
}

@media (min-width: 769px) {
/* Blog detay */
.rk-blog-yazi-banner .entry-title.title {
display: block !important;
font-size: 78px !important;
line-height: 1.2 !important;
color: #2d245a !important;
}
.rk-post-title {
font-size: 32px;
font-weight: 500;
color: #4a4a4a;
text-align: center;
margin: 0 0 10px;
}
.rk-post-cover { max-width: 1080px; }

/* Portfolyo detay: başlık canlıdaki gibi 55px */
.rk-proje-title { font-size: 55px; line-height: 1.2; }
.rk-proje-head { padding-top: 40px; padding-bottom: 24px; }
/* İçerik görseli container genişliğinde (canlıda 1222px) */
.rk-proje-cover { max-width: 1160px; }
.rk-related-title { font-size: 22px; }
}

@media (max-width: 768px) {
/* Mobilde banner'ın "Blog" başlığı gizli kalsın (dalga görseli sade dursun),
   yazı başlığı zaten hemen altında. */
.rk-blog-yazi-banner .entry-title.title,
.rk-blog-yazi-banner .yoast-breadcrumb { display: none !important; }
.rk-post-title { font-size: 24px; font-weight: 500; color: #4a4a4a; text-align: center; margin: 0 0 8px; }
.rk-post-cover { max-width: 100%; }
}

/* ==========================================================================
v67 — 31.08.2026 son tur
========================================================================== */

/* (1) Portfolyo LİSTE sayfasının banner başlığı: 33px. Bu kural dosyanın en
sonunda ve seçicisi daha güçlü ("html body" öneki) — daha önce eklenen
42px'lik kuralın hiçbir koşulda öne geçmemesi için. */
html body .rk-portfolyo-banner .entry-title.title { font-size: 33px !important; }

@media (min-width: 769px) {
/* (2) "şu yatay görüntüyü yakalayamıyorsak page title center yap":
canlıdaki geniş içerik görselini üretebilmek için projelere ayrı bir
"detay görseli" yüklenmesi gerekiyor (admin panelinde alan hazır).
O gelene kadar proje başlığı ortalandı. */
.rk-proje-title { text-align: center; }

/* (3) "fotoğraf boyutu hala ufak, container hizasında büyük olmalı":
blog kapak görseli doğal boyutuyla (1080px) sınırlıydı, artık container
genişliğinde. */
.rk-post-cover { max-width: 1160px; width: 100%; }
.rk-post-end-cover { max-width: 1160px; width: 100% !important; }
}

@media (max-width: 768px) {
.rk-proje-title { text-align: center; }
.rk-post-cover { width: 100%; max-width: 100%; }
.rk-post-end-cover { width: 100% !important; max-width: 100%; }
}

/* ==========================================================================
v68 — Son iki madde. İkisi de kullanıcının CANLI /yeni/ kurulumu tarayıcıyla
ölçülerek doğrulandı.
========================================================================== */

/* (1) "mobilde menü sticky olduğunda logo ve menü birleşik olmalı, ayrılıyor"
ÖLÇÜM: /yeni/ üzerinde mobil header'ın kendisi ve tüm çocukları ŞEFFAF
(rgba(0,0,0,0)) — yani ekran görüntüsündeki iki koyu kutu bizim header'ımız
DEĞİL. Bunlar Woodmart'ın kaydırmada oluşturduğu FIXED header kopyası
(".whb-clone"): kendi koyu zemini, kendi menü ikonu ve beyaz "sticky
logo"suyla bizim header'ımızın üstüne biniyor; aradaki boşluk da o kopyanın
kendi iç düzeninden geliyor.
v65'te kopyayı tüm genişliklerde kapatmıştım, ama bu sefer MASAÜSTÜ sticky
header'ı da götürüp beyaz şerit bırakmıştı (v67'de geri alındı). Doğrusu:
kopya SADECE MOBİLDE kapatılıyor — masaüstündeki sticky header aynen kalıyor. */
@media (max-width: 768px) {
.whb-clone { display: none !important; }
}

/* (2) "masaüstü versiyonda portfolyo başlığı hala 33px değil"
ÖLÇÜM (canlı /yeni/, 1440px): Portfolyo banner başlığı GERÇEKTEN 33px'ti —
ama diğer sayfaların başlıkları (HAKKIMIZDA, KARİYER, İLETİŞİM,
REFERANSLARIMIZ, POLİTİKALARIMIZ) 55px. "Diğer sayfalarla aynı olsun"
isteği bu yüzden 33px'te karşılanmıyordu. Portfolyo (ve tutarlılık için
Blog) başlığı da 55px'e çekildi — artık tüm sayfa başlıkları birebir aynı. */
@media (min-width: 769px) {
html body .rk-portfolyo-banner .entry-title.title,
html body .rk-blog-banner .entry-title.title { font-size: 55px !important; }
}

/* ==========================================================================
v69 — "mobilde sticky header'da hamburger menü ve logo bitişik olmuyor"

ÖLÇÜM (430px): header flex; ".menu-icon-etc" 16-66px (margin-right: 5px),
".navbar-brand" 87-218px (margin-left: 16px). Yani aradaki boşluk
5 + 16 = 21px. Kaydırma sırasında her iki öğe de koyu bir zemin aldığı için
bu 21px, iki AYRI koyu kutu gibi görünüyor; referans görselde ise tek parça
bir kutu var. İki margin de sıfırlandı — öğeler artık bitişik, dolayısıyla
koyu zemin tek parça görünüyor.

NOT: 16px'lik sol boşluğu ilk revize listesinin 7. maddesinde ("hamburger
ikonu logoya çok yakın, logoyu bir tık sağa kaydıralım") ben eklemiştim.
Sticky durumdaki koyu kutuları ikiye bölen şey tam olarak oydu; bu yüzden
geri alındı.
========================================================================== */
@media (max-width: 768px) {
.container-fluid-rf.navbar .menu-icon-etc { margin-right: 0 !important; }
.container-fluid-rf.navbar .navbar-brand { margin-left: 0 !important; }
}