/*
Theme Name: İzmir Reklam Ajansı
Template: bisasoft
Author: Bisasoft
Description: İzmir Reklam Ajansı (120-0349) müşteri teması — "Spotlight". Wix/Shopify pazarlama sayfası grameri: dönüşümlü blok + görsel kanıt, kağıt/beyaz/siyah bant ritmi, tek vurgu rengi sarı. SEO, KVKK, form ve kabuk ana temadan gelir.
Version: 0.1.0
Text Domain: izmir-reklam-ajansi
*/

/* ──────────────────────────────────────────────────────────
 * SPOTLIGHT — tasarım dili
 *
 * Kaynak: design-lab/src/themes/billboard-spotlight (2026-08-20'de wix.com ve
 * shopify.com/tr ölçülerek kuruldu).
 *
 * Grameri dört kural taşıyor:
 *   · Dönüşümlü sol/sağ blok + büyük görsel — sayfanın baskın ritmi
 *   · İşin kendisi görsel olur (SERP ekranı, Reels, trafik grafiği) — stok
 *     fotoğraf değil
 *   · Zemin bantları sırayla: kağıt → beyaz → SİYAH → beyaz → SİYAH → kağıt...
 *   · Tek vurgu rengi sarı; sarı olan her şey ya çağrı ya işaret
 *
 * Köşe yumuşaklığı referanslardan bir tık DAHA SIKI: her yapı 0.9rem
 * (buton, kart, giriş alanı, panel), çip 0.55rem. Yalnızca gerçekten daire
 * olan şeyler daire kalır (avatar, tarayıcı noktaları, işaret rozetleri).
 * ────────────────────────────────────────────────────────── */

:root {
  /*
   * Renkler theme.json'daki token'lardan TURETILIR, burada yeniden yazilmaz.
   * Boylece palet tek kaynakta kalir: musteri rengi degistirince tum tasarim
   * birlikte doner. (Kontrolcunun `ham-hex` kurali bunu zorluyor — ilk yazimda
   * hex'leri buraya kopyalamistim, dogrusu bu.)
   */
  --ink: var(--wp--preset--color--koyu);
  --ink-2: var(--wp--preset--color--koyu-2);
  --paper: var(--wp--preset--color--zemin);
  --murekkep: var(--wp--preset--color--murekkep);
  --sari: var(--wp--preset--color--vurgu);
  --sari-acik: var(--wp--preset--color--vurgu-koyu);
  --beyaz: var(--wp--preset--color--beyaz);
  --cizgi: rgba(17, 17, 17, 0.08);
  --govde: rgba(17, 17, 17, 0.55);
  --soluk: rgba(17, 17, 17, 0.4);
  --r: 0.9rem;             /* her yapının köşesi */
  --r-chip: 0.55rem;
  /* Ana temanin kapsayici genisligi — .bs-kap bu degiskeni okur */
  --bs-kap: 1280px; /* kaynak: max-w-7xl */
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--govde);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  color: var(--murekkep);
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

/* ── BÖLÜM STİLLERİ ARTIK BURADA DEĞİL ────────────────────
 * Sayfa bölümleri Tailwind ile yazılıyor (bkz. veri/anasayfa-uret.py).
 * Sebep: tasarım kaynağı da Tailwind; sınıfları elle CSS'e çevirmek hem
 * yavaştı hem sessiz hata üretiyordu. Buradaki ~370 satır o çevirinin
 * kalıntısıydı ve kaldırıldı.
 *
 * Burada SADECE Tailwind ile ifade edilemeyen şeyler kalır:
 * hareket (dönen kelime, kayan şerit, açılır cevap) ve ana temanın
 * kabuk sınıflarına (bs-*) yapılan marka uyarlamaları.
 * ────────────────────────────────────────────────────────── */

/* ── Dönen kelime — açılış başlığındaki tek hareket ────────
 * Shopify sloganını yerinde döndürüyor; buradaki karşılığı üç hizmet.
 * Hareketi sevmeyen kullanıcıda durur (prefers-reduced-motion).
 * ────────────────────────────────────────────────────────── */
.ir-donen { display: inline-block; min-width: 6ch; }
.ir-donen[data-gecis="1"] { animation: ir-don 0.4s cubic-bezier(0.22,1,0.36,1); }
@keyframes ir-don {
  from { transform: translateY(60%); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .ir-donen[data-gecis="1"] { animation: none; } }

/* Blok görselinin mobilde ezilmemesi için */

/* ── EKRANA GİRİŞ ANİMASYONU ───────────────────────────────
 * Tasarımda her bölüm kaydırıldıkça yumuşakça beliriyor (framer-motion).
 * Burada aynı etki IntersectionObserver + CSS ile; kütüphane yok.
 *
 * SSR/SEO güvenliği: içerik DOM'da ve GÖRÜNÜR başlar. JS çalışmazsa
 * hiçbir şey gizli kalmaz — `data-goster` yalnız JS varsa devreye girer.
 * ────────────────────────────────────────────────────────── */
[data-beliris="hazir"] { opacity: 0; transform: translateY(14px); }
[data-beliris="acik"] {
  opacity: 1; transform: none;
  transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
@media (prefers-reduced-motion: reduce) {
  [data-beliris] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Izgara öğeleri sırayla belirir — yapısal gecikme */
[data-beliris-sira="1"] { transition-delay: 0.07s; }
[data-beliris-sira="2"] { transition-delay: 0.14s; }
[data-beliris-sira="3"] { transition-delay: 0.21s; }

/* ── Kabuk düğmeleri — marka kararı ────────────────────────
 * Tasarımda BİRİNCİL çağrı siyah, sarı ise ikincil vurgu (adımlar bandı,
 * kapanış paneli). Ana temanın varsayılanı çağrıyı vurgu rengine bağlıyor;
 * burada markaya göre ters çeviriyoruz.
 * ────────────────────────────────────────────────────────── */
.bs-ust__cagri.bs-cagri--dolu {
  background: var(--murekkep);
  color: var(--beyaz);
  border-radius: var(--r);
}
.bs-ust__cagri.bs-cagri--dolu:hover { background: var(--ink); color: var(--beyaz); }

/* ── ÜST ŞERİT — kaynak bileşene birebir ──────────────────
 * shared/Topbar.tsx ölçüldü: yalnız masaüstü, iki katmanlı gradient zemin,
 * her ikon yuvarlatılmış kutu içinde, sosyal ikonlar hover'da beyaza dönüp
 * hafifçe büyüyor.
 * ────────────────────────────────────────────────────────── */
.bs-serit {
  display: none;                       /* mobilde YOK — kaynak `hidden lg:block` */
  position: relative; overflow: hidden;
  color: rgba(255,255,255,0.9);
  background: linear-gradient(to right, var(--murekkep), var(--ink));
}
@media (min-width: 1024px) { .bs-serit { display: block; } }
/* Üstteki ışık katmanı — düz siyahı kırar */
.bs-serit::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(255,255,255,0.05), transparent, rgba(255,255,255,0.05));
}
.bs-serit__ic { position: relative; min-height: 0; padding-block: 0.6rem; font-size: 0.875rem; }
.bs-serit__sol { gap: 1.5rem; }
.bs-serit a { color: rgba(255,255,255,0.9); }
.bs-serit a:hover { color: var(--beyaz); }

/* İkon kutuları */
.bs-serit__isaret {
  padding: 0.375rem; border-radius: 0.5rem;
  background: rgba(255,255,255,0.1); transition: background-color 0.2s;
}
.bs-serit a:hover .bs-serit__isaret { background: rgba(255,255,255,0.2); }
.bs-serit__isaret .bs-ikon { width: 0.875rem; height: 0.875rem; }

/* Takip bölümü */
/* Kaynak iki ayri bosluk kullaniyor: yazi<->ikon grubu 1rem (gap-4),
 * ikonlar arasi 0.5rem (gap-2). Isaretlememiz duz oldugu icin farki
 * yazinin sag bosluguyla kuruyoruz. */
.bs-serit__sosyal { gap: 0.5rem; padding-left: 0; margin-left: 0; border-left: 0; }
.bs-serit__takip { margin-inline-end: 0.5rem; }
.bs-serit__takip {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgba(255,255,255,0.8);
}
.bs-serit__hesap {
  padding: 0.5rem; border-radius: 0.5rem; background: rgba(255,255,255,0.1);
  transition: background-color 0.2s, transform 0.2s;
}
.bs-serit__hesap:hover { background: var(--beyaz); transform: scale(1.1); }
.bs-serit__hesap:hover .bs-ikon { color: var(--murekkep); }
.bs-serit__hesap .bs-ikon { width: 1rem; height: 1rem; }

/* ── NAVBAR — kaynak bileşene birebir ──────────────────────
 * shared/Navbar.tsx ölçüldü. Karakteristik dört hareket:
 *   · üçlü denge: logo (esner) — menü (orta) — çağrı (esner, sağa yaslı)
 *   · menü öğesinin altında SOLDAN AÇILAN sarı çizgi
 *   · alt menüsü olanda chevron hover'da 180° döner
 *   · çağrı düğmesindeki ok hover'da sağa kayar
 * ────────────────────────────────────────────────────────── */

.bs-ust {
  border-bottom: 1px solid rgba(226,232,240,0.7); /* slate-200/70 */
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: box-shadow 0.3s;
}
.bs-ust[data-kaydi="1"] { box-shadow: 0 10px 30px -12px rgba(0,0,0,0.18); }
.bs-ust__ic { height: auto; padding-block: 0.875rem; }

/* Logo ve çağrı iki yanda esner, menü tam ortada kalır */
.bs-ust__marka { flex: 1; }
.bs-ust__sag { flex: 1; justify-content: flex-end; }
/* Yatay logo (2026-09-16, ~5:1): kare logoda yazı okunmuyordu. Mobilde
 * menü düğmesine yer kalsın diye bir tık küçük. */
.bs-logo { height: 2.5rem; }
@media (min-width: 1024px) { .bs-logo { height: 3rem; } }

/* Menü */
.bs-ust__menu { gap: 1.75rem; }
.bs-ust__menu > li > a {
  position: relative; padding-block: 0.375rem;
  font-size: 0.875rem; font-weight: 500; color: var(--wp--preset--color--gri);
  transition: color 0.2s;
}
.bs-ust__menu > li > a:hover { color: var(--murekkep); }

/* Soldan açılan sarı alt çizgi — kaynağın imzası */
.bs-ust__menu > li > a::before {
  content: ""; position: absolute; inset-inline: 0; bottom: -0.1rem; height: 2px;
  border-radius: 999px; background: var(--sari);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.bs-ust__menu > li > a:hover::before { transform: scaleX(1); }

/* Alt menüsü olanın oku — hover'da ters döner */
.bs-ust__menu .menu-item-has-children > a::after {
  content: ""; width: 0.42rem; height: 0.42rem; margin-left: 0.1rem;
  border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
  transform: rotate(45deg) translateY(-1px); opacity: 0.6;
  transition: transform 0.3s;
}
.bs-ust__menu .menu-item-has-children:hover > a::after { transform: rotate(-135deg) translateY(2px); }

/* Alt menü paneli */
.bs-ust__menu .sub-menu {
  /* kaynak sola hizalar; ana temanin ortalamasini geri al */
  left: 0; transform: none;
  width: 16rem; margin-top: 0.75rem; padding: 0.5rem;
  border-radius: 1rem; background: var(--beyaz);
  box-shadow: 0 0 0 1px rgba(226,232,240,0.7), 0 25px 50px -12px rgba(0,0,0,0.25);
}
.bs-ust__menu .sub-menu a {
  min-height: 0; padding: 0.625rem 0.75rem; border-radius: 0.75rem;
  font-size: 0.875rem; line-height: 1.25rem; /* text-sm; govde 1.6'yi miras alip 44px oluyordu */
  color: var(--wp--preset--color--gri-acik); transition: all 0.2s;
}
.bs-ust__menu .sub-menu a:hover { background: rgba(17,17,17,0.1); color: var(--murekkep); }

/* Çağrı düğmesi — siyah, gölgeli, oklu */
/* Mobil "Ara" düğmesi masaüstü çağrısıyla AYNI görünür: sarı vurgu
 * (ana tema varsayılanı) bu markanın başlığında yabancı duruyor,
 * kaynak tasarımda başlıktaki tek dolu düğme koyu. */
.bs-ust__cagri.bs-cagri--dolu,
.bs-ust__ara.bs-cagri--dolu {
  gap: 0.375rem; padding: 0.625rem 1.25rem; border-radius: 0.75rem;
  background: var(--murekkep); color: var(--beyaz);
  box-shadow: 0 10px 20px -8px rgba(17,17,17,0.35);
}
.bs-ust__ara.bs-cagri--dolu { padding-inline: 0.9rem; }
.bs-ust__cagri.bs-cagri--dolu:hover,
.bs-ust__ara.bs-cagri--dolu:hover { background: rgba(17,17,17,0.9); color: var(--beyaz); transform: translateY(-2px); }
.bs-cagri__ok { width: 1rem; height: 1rem; transition: transform 0.2s; }
.bs-ust__cagri:hover .bs-cagri__ok { transform: translateX(2px); }

/* Kaynakta navbar'da telefon YOK — logo · menü · çağrı, üçü bir arada.
 * Ana tema varsayılan olarak telefon koyuyor; burada kapatıyoruz.
 * Telefon zaten üst şeritte ve yüzen düğmede var.
 *
 * İki seçici kullanılıyor (0,2,0): ana temanın `lg:inline-flex` yardımcısı
 * bu dosyadan SONRA yüklenen tw.css'te ve tek sınıf (0,1,0) — düz
 * `.bs-ust__tel` yazınca onu yenemiyor. */
.bs-ust .bs-ust__tel { display: none; }

/* Cagri tek satirda kalmali; sikisinca "Hemen Teklif / Alin" diye kiriliyordu */
.bs-ust__cagri.bs-cagri--dolu { white-space: nowrap; }

/* Blok cagri dugmesi — kaynakta maddelerin/rakamlarin altinda, mt-9 */

/* ── ALT BİLGİ ─────────────────────────────────────────────
 * Logo TERS ÇEVRİLMEZ: markanın logosu zaten sarı plaka üzerine siyah
 * yazı; brightness(0)+invert(1) uygulanınca plaka da yazı da beyaza
 * dönüp okunmaz bir kare kalıyor. Kaynak tasarımda da logoOnDark:false.
 * ────────────────────────────────────────────────────────── */
.bs-alt .bs-logo--ters { filter: none; }

/* Alt bilgi marka dili — kaynak Footer.tsx:
 *   · üstte ince sarı çizgi (ortada güçlü, kenarlarda kaybolan)
 *   · seyrek nokta deseni (çok soluk, zemine derinlik verir)
 *   · logo BEYAZ KART içinde: logo sarı plaka + siyah yazı, koyu zeminde
 *     kart olmadan kenarı kayboluyor
 *   · sütun başlıklarının altında kısa gradyan çizgi
 */
.bs-alt { position: relative; overflow: hidden; }
.bs-alt::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; opacity: 0.7;
  background: linear-gradient(to right, transparent, var(--sari), transparent);
}
.bs-alt::after {
  content: ""; position: absolute; inset: 0; opacity: 0.03; pointer-events: none;
  background-image: radial-gradient(circle at 2px 2px, var(--beyaz) 1px, transparent 0);
  background-size: 40px 40px;
}
.bs-alt > .bs-kap { position: relative; z-index: 1; }
.bs-alt__marka .bs-logo {
  height: 3.5rem; padding: 1rem; border-radius: 1.8rem;  /* kaynak: rounded-2xl */
  background: rgba(255,255,255,0.95); box-sizing: content-box;
}
/* Sutun basligi — kaynak `Footer.tsx`: `text-lg font-bold` + altinda
 * 4rem'lik gradyan cubuk. Ana tema bunu KUCUK BUYUK HARF (0.78rem, harf
 * araligi acik) yaziyor; marka dili buyuk ve duz baslik istiyor. */
.bs-alt__baslik {
  position: relative; padding-bottom: 0.75rem;
  font-size: 1.125rem; font-weight: 700; line-height: 1.4;
  text-transform: none; letter-spacing: normal; color: var(--beyaz);
}
.bs-alt__baslik::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 4rem; height: 3px;
  background: linear-gradient(to right, rgba(255,255,255,0.6), transparent);
}

/* Kaynak olculeri: alt bilgi py-14/lg:py-20, sosyal kutular 3rem,
 * iletisim kutulari 2.75rem, telif ayraci mt-16/pt-8. Ana temanin
 * varsayilanlari bir tik daha sikisik. */
.bs-alt { padding-block: 3.5rem; }
@media (min-width: 1024px) { .bs-alt { padding-block: 5rem; } }
.bs-alt__tanit { margin-top: 1.5rem; max-width: 28rem; font-size: 1rem; opacity: 0.9; }
.bs-alt__sosyal a { width: 3rem; height: 3rem; border-radius: 1.8rem; }  /* kaynak: rounded-2xl */
.bs-alt__sosyal a .bs-ikon { width: 1.25rem; height: 1.25rem; }
.bs-alt__kutu { width: 2.75rem; height: 2.75rem; }
.bs-alt__kutu .bs-ikon { width: 1.25rem; height: 1.25rem; }
.bs-alt__telif {
  margin-top: 4rem; padding-top: 2rem;
  border-top-color: rgba(255,255,255,0.2); font-size: 0.875rem;
}

/* ── HAREKET — Tailwind ile ifade edilemeyen üç davranış ───
 * Kaynakta bunları framer-motion yapıyor; burada saf CSS + küçük JS.
 * ────────────────────────────────────────────────────────── */

/* Logo şeridi sonsuz kayar. İçerik iki kez basılır; -50%'de başa döner. */
.ir-kayan { animation: ir-kay 34s linear infinite; }
@keyframes ir-kay { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* SSS: açık soruda artı işareti 45° dönüp sarıya boyanır (kaynakla aynı) */
.ir-soru[data-acik="1"] .ir-soru__isaret {
  transform: rotate(45deg);
  background: var(--sari);
}

@media (prefers-reduced-motion: reduce) {
  .ir-kayan { animation: none; }
}

/* Yazi sonu yazar kutusu (kur.php ir_yazar_kutusu) — kim yazdi, neye dayanarak */
.ir-yazar { margin-top: 3rem; padding: 1.25rem 1.5rem; border-radius: 0.9rem; background: #FAFAF8; border-left: 4px solid #FFCE00; font-size: 0.95rem; }
.ir-yazar hr { display: none; }
.ir-yazar p { margin: 0; }
.ir-yazar__baslik { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.6; margin-bottom: 0.25rem !important; }
.ir-yazar__not { margin-top: 0.5rem !important; font-size: 0.85rem; opacity: 0.75; }