/* ============================================================================
   KABUK (chrome) — duyuru seridi + nav + mega menu + mobil panel + altlik.
   TUM sayfalarda yuklenir (main.ejs). Kaynak: home.css (anasayfa v3) — Faz 2 ile
   buraya TASINDI, kopyalanmadi: kural tek yerde, sapma riski yok.
   Plan: arch/plans/20260806-faz2-chrome-yayilimi.json

   IKI TUKETICI:
   - Anasayfa: chrome.css + home.css (style.css yuklenmez)
   - Diger 87 sayfa: style.css (Tailwind) + chrome.css
   Bu yuzden BURADA GLOBAL ELEMENT SECICISI YOK. Global *, html, body, a, ul, img
   kurallari home.css icinde KALDI — Tailwind taban katmaniyla carpisirdi.
   Kabugun ihtiyac duydugu resetler kabuk kapsayicilarina DARALTILDI (asagida).
   ========================================================================== */
/* Onest @import KALDIRILDI — main.ejs icinde <link> + preconnect ile yukleniyor
   (her sayfada render-blocking @import zinciri olusmasin diye). */

/* Marka fontu — kelime işareti mercan #E54C4C ile YALNIZ markada kullanılır */
@font-face{font-family:Neon;src:url("/Neon.ttf") format("truetype");font-weight:400;font-display:swap}
/* PALET: zipchat.ai'dan ÖLÇÜLDÜ (piksel + computed style, 2026-08-03).
   Arayüz nötr paleti izler; Chatinbox mercanı yalnız marka işaretinde. */
:root{
  --ink:#111827;          /* metin · birincil buton · duyuru şeridi */
  --ink-2:#4B5563;        /* gövde metni */
  --ink-3:#6B7280;        /* sönük metin · kolon başlıkları */
  --ink-4:#9CA3AF;        /* en sönük */
  --line:rgba(0,0,0,.06);
  --line-soft:rgba(0,0,0,.04);
  --cream:#F3EFE9;        /* kart dolgusu */
  --sky:#B6E8FF;          /* gradyan ucu */
  --peri:#D7E6FF;         /* gradyan ortası */
  --warm:#F2EEE9;         /* hero alt sıcak ton */
  --footcard:#F3F7FF;
  --tag-fg:#0369A1;  --tag-bg:rgba(182,232,255,.42);
  --new-fg:#048A01;  --new-bg:#E9FFC5;
  --paper:#fff;
  --coral:var(--ink);     /* eski mercan çağrıları mürekkebe düşer */
  --container:1224px;     /* nav kabuğu */
  --content:1128px;       /* İÇERİK — 24px padding düşünce 1080, zipchat ile aynı */
  --r-lg:28px;
  --r-md:16px;
}

/* ---- kabuk-ici resetler (global DEGIL: Tailwind sayfalarinda govdeyi etkilemez) ----
   Sira onemli: bu blok kabuk kurallarindan ONCE gelir, sonraki ozel kurallar kazanir. */
.ci-announce,.ci-navwrap,.ci-mobilepanel,.ci-footzone{
  font-family:'Onest',-apple-system,system-ui,sans-serif;
  font-size:16px;line-height:1.6;color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* :where() ZORUNLU — kapsami sifir ozgullukle sarar.
   Neden: ".ci-navwrap a{color:inherit}" ozgullugu (0,2,1) olur ve ".ci-btn-primary
   {color:#fff}" (0,1,0) kuralini EZER — nav CTA koyu zemin uzerinde koyu yazi olur,
   yani gorunmez (2026-08-06 ekran goruntusuyle yakalandi). Orijinal global "a{}"
   kurali (0,0,1) idi; :where ile ayni davranisi kapsam icinde birebir korur. */
:where(.ci-announce,.ci-navwrap,.ci-mobilepanel,.ci-footzone) *{box-sizing:border-box;margin:0;padding:0}
:where(.ci-announce,.ci-navwrap,.ci-mobilepanel,.ci-footzone) a{color:inherit;text-decoration:none}
:where(.ci-navwrap,.ci-mobilepanel,.ci-footzone) ul{list-style:none}
:where(.ci-navwrap,.ci-footzone) img{max-width:100%}
.ci-navwrap a:focus-visible,.ci-navwrap button:focus-visible,
.ci-mobilepanel a:focus-visible,.ci-footzone a:focus-visible,
.ci-announce button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.ci-wrap{max-width:var(--content);margin:0 auto;padding:0 24px}
.ci-navwrap .ci-wrap,.ci-nav{max-width:var(--container)}

/* ============ tipografi (kabuk + govde paylasir) ============ */
.ci-d1,.ci-d2{font-weight:500;letter-spacing:-.04em}
.ci-d1{font-size:60px;line-height:1.04}
.ci-d2{font-size:48px;line-height:1.08}
.ci-d3{font-size:clamp(22px,2vw,28px);line-height:1.24;font-weight:500;letter-spacing:-.04em;color:var(--ink-3)}
.ci-lead{font-size:18px;line-height:1.44;color:var(--ink-2)}
.ci-muted{color:var(--ink-3)}

/* ============ duyuru ============ */
.ci-announce{background:var(--ink);color:#D1D5DB;font-size:13.5px;position:relative;z-index:60}
.ci-announce .ci-wrap{display:flex;align-items:center;justify-content:center;gap:10px;min-height:42px}
.ci-announce .pill{
  border:1px solid rgba(233,255,197,.6);color:#E9FFC5;border-radius:99px;
  padding:2px 10px;font-size:11.5px;font-weight:600;letter-spacing:.01em;
}
.ci-announce a{color:#fff;font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ci-announce .x{
  position:absolute;right:28px;top:50%;transform:translateY(-50%);
  color:#7C8B9A;font-size:16px;line-height:1;background:none;border:0;cursor:pointer;padding:4px 8px;
}
.ci-announce .x:hover{color:#fff}

/* ============ nav — yüzen hap ============ */
.ci-navwrap{position:sticky;top:14px;z-index:50;padding:14px 24px 0}
.ci-nav{
  position:relative;
  max-width:var(--container);margin:0 auto;height:64px;padding:0 10px 0 22px;
  display:flex;align-items:center;gap:34px;
  background:rgba(255,255,255,.48);backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border:1px solid rgba(255,255,255,.9);border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(11,27,43,.04),0 8px 28px -18px rgba(11,27,43,.22);
}
.ci-brand{display:inline-flex;align-items:center;gap:7px;flex:none}
.ci-brand img{width:30px;height:30px;display:block}
.ci-brand .word{font-family:Neon,'Onest',system-ui,sans-serif;font-size:26px;line-height:1;color:#E54C4C;font-weight:400;letter-spacing:0}
.ci-navlinks{display:flex;gap:4px;margin:0 auto}
.ci-navlinks>li{position:static}
.ci-navlinks>li>a{
  display:block;padding:9px 14px;border-radius:12px;font-size:16px;font-weight:500;color:var(--ink);
  transition:background .15s ease,color .15s ease;
}
.ci-navlinks>li:hover>a{background:rgba(11,27,43,.045);color:var(--ink)}
.ci-navtools{display:flex;align-items:center;gap:8px}
.ci-iconbtn.burger{display:none;background:none;border:0;cursor:pointer}
.ci-iconbtn{
  width:38px;height:38px;border-radius:99px;display:grid;place-items:center;
  border:1px solid transparent;color:var(--ink-2);transition:background .15s ease;
}
.ci-iconbtn:hover{background:rgba(11,27,43,.05)}
.ci-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  border-radius:24px;font-weight:500;font-size:16px;padding:8px 16px;border:1px solid transparent;
  transition:background .15s ease,border-color .15s ease,color .15s ease;cursor:pointer;
}
.ci-btn-primary{background:var(--ink);color:#fff;border-radius:24px}
.ci-btn-primary:hover{background:#000}
.ci-btn-quiet{background:rgba(255,255,255,.72);border-color:#fff;color:var(--ink);border-radius:32px}
.ci-btn-quiet:hover{background:#fff}
.ci-btn-lg{font-size:18px;padding:0 24px;height:52px;border-radius:32px}

/* --- mega menü --- */
/* FORMAT A (Ürün/Çözümler/Kaynaklar): başlık & ok + açıklama; FORMAT B (Kanallar): markalı renkli kartlar */
.ci-mega{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-6px);
  width:880px;padding-top:12px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear;
}
.ci-mega-inner{
  padding:14px;
  background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(24px);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  border:1px solid rgba(11,27,43,.06);border-radius:var(--r-lg);
  box-shadow:0 2px 6px rgba(11,27,43,.05),0 26px 60px -30px rgba(11,27,43,.4);
}
.ci-navlinks>li:hover .ci-mega,.ci-navlinks>li:focus-within .ci-mega{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.ci-mega-grid{display:grid;grid-template-columns:1fr 1fr 236px;grid-template-rows:auto auto;gap:10px}
.ci-mega-card{
  position:relative;
  background:rgba(243,239,233,.7);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:16px;display:flex;gap:12px;align-items:flex-start;transition:background .18s ease;
}
.ci-mega-card:hover{background:rgba(243,239,233,1)}
.ci-mega-card .arrow{position:absolute;top:16px;right:16px;color:var(--ink);opacity:.55;transition:transform .18s ease,opacity .18s ease}
.ci-mega-card:hover .arrow{opacity:1;transform:translateX(3px)}
.ci-mega-ico{
  width:32px;height:32px;border-radius:9px;background:#fff;border:1px solid var(--line-soft);
  display:grid;place-items:center;flex:none;color:var(--ink-2);
}
.ci-mega-card h5{font-size:14.5px;font-weight:600;margin-bottom:3px;padding-right:26px}
.ci-mega-card p{font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.ci-mega-side{grid-column:3;grid-row:1 / span 2;padding:8px 6px 6px 20px;border-left:1px solid var(--line-soft)}
.ci-mega-side h6{font-size:12px;color:var(--ink-4);font-weight:500;margin-bottom:12px}
.ci-mega-side li a{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:14.5px;font-weight:500}
.ci-mega-side li a:hover{color:var(--coral)}
.ci-dotmark{width:18px;height:18px;border-radius:5px;background:var(--cream);border:1px solid var(--line-soft);flex:none;display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--ink-3)}
.ci-mega-side .all{margin-top:10px;font-size:13.5px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;display:inline-block}
/* Kanallar: tek sırada markalı renkli kartlar */
.ci-chanrow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.ci-chancard{
  border-radius:16px;padding:16px 16px 18px;border:1px solid rgba(255,255,255,.7);
  display:flex;flex-direction:column;gap:26px;transition:transform .18s ease;
}
.ci-chancard:hover{transform:translateY(-2px)}
.ci-chanbadge{
  width:40px;height:40px;border-radius:11px;background:#fff;display:grid;place-items:center;
  box-shadow:0 2px 5px rgba(16,24,39,.10);
}
.ci-chancard .nm{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.ci-c-wa{background:linear-gradient(160deg,rgba(37,211,102,.16),rgba(37,211,102,.05))}
.ci-c-ig{background:linear-gradient(160deg,rgba(220,39,67,.14),rgba(188,24,136,.05))}
.ci-c-ph{background:linear-gradient(160deg,rgba(76,125,240,.16),rgba(76,125,240,.05))}
.ci-c-web{background:linear-gradient(160deg,rgba(17,24,39,.09),rgba(17,24,39,.03))}
.ci-c-mp{background:linear-gradient(160deg,rgba(245,130,13,.16),rgba(245,130,13,.05))}

/* --- mobil menü paneli (mock'ta yoktu; burger'a işlev) --- */
.ci-mobilepanel{
  max-width:var(--container);margin:10px auto 0;padding:18px 20px 20px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(11,27,43,.08);border-radius:var(--r-lg);
  box-shadow:0 2px 6px rgba(11,27,43,.05),0 26px 60px -30px rgba(11,27,43,.4);
}
.ci-mobilepanel h6{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);margin:16px 0 6px}
.ci-mobilepanel h6:first-child{margin-top:0}
.ci-mobilepanel ul{display:flex;flex-wrap:wrap;gap:2px 4px}
.ci-mobilepanel li a{display:inline-block;padding:8px 10px;border-radius:10px;font-size:15px;font-weight:500;color:var(--ink)}
.ci-mobilepanel li a:hover{background:rgba(11,27,43,.05)}
.ci-mobilepanel .cta{margin-top:16px;display:flex}
.ci-mobilepanel .cta .ci-btn{flex:1}
@media(min-width:993px){.ci-mobilepanel{display:none !important}}

/* ---- kapanis CTA (altlik partial'i her sayfada basar, bu yuzden kabukta) ---- */
.ci-ctarow{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.ci-micro{margin-top:15px;font-size:13.5px;color:var(--ink-2)}
.ci-micro span+span:before{content:"·";margin:0 8px;color:var(--ink-4)}
.ci-finalzone{margin-bottom:78px}
.ci-finalgrid{max-width:820px}
.ci-finalgrid .ci-d2{max-width:16ch}

/* ============ footer ============ */
.ci-footzone{background:linear-gradient(180deg,#fff 0%,#EDF2FF 22%,#D7E6FF 58%,#B6E8FF 100%);padding:96px 0 64px;position:relative;overflow:hidden}
.ci-footcard{
  background:var(--footcard);border:1px solid rgba(255,255,255,.7);border-radius:var(--r-lg);
  padding:48px;display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr 1fr;gap:40px;
  position:relative;z-index:2;
}
.ci-footcard .ci-brand{display:inline-flex;margin-bottom:16px}
.ci-footcard .about{font-size:14px;line-height:1.65;color:var(--ink-3);max-width:30ch;margin-bottom:20px}
.ci-legal{display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--ink-3)}
.ci-legal a:hover{color:var(--coral)}
.ci-fcol h6{font-size:12.5px;font-weight:500;color:var(--ink-4);margin-bottom:16px}
.ci-fcol li a{display:block;padding:5px 0;font-size:14.5px;color:var(--ink-2)}
.ci-fcol li a:hover{color:var(--coral)}
.ci-fcol .new{font-size:10.5px;font-weight:600;color:var(--new-fg);background:var(--new-bg);border-radius:99px;padding:1px 7px;margin-left:6px;vertical-align:1px}
/* footer 1. kolonunda "AI'a sor" (zipchat düzeni) */
.ci-askmini{margin-top:22px}
.ci-askmini .lb{font-size:13.5px;color:var(--ink-2);margin-bottom:10px}
.ci-askmini .icons{display:flex;gap:8px}
.ci-askmini .icons a{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--ink-2);
}
.ci-askmini .icons a:hover{border-color:rgba(0,0,0,.2)}
.ci-copyline{margin-top:24px;font-size:12.5px;color:var(--ink-4)}
/* Filigran: bulut işareti + kelime, marka fontuyla */
.ci-wmark{display:flex;align-items:center;justify-content:center;gap:18px;margin:34px 0 0;user-select:none}
.ci-wmark img{width:clamp(64px,11vw,150px);height:auto;opacity:.5}
.ci-wmark .txt{
  font-family:Neon,'Onest',system-ui,sans-serif;font-weight:400;letter-spacing:0;
  font-size:clamp(70px,13vw,175px);line-height:.9;color:rgba(255,255,255,.62);
}


/* ============ responsive — kabuk ============ */
/* 1025-1200 bandi: masaustu nav duruyor ama sigmiyordu — bosluklar daralir. */
@media(max-width:1200px){
  .ci-navlinks>li>a{padding:9px 10px}
  .ci-nav{gap:20px}
}
@media(max-width:1040px){
  .ci-navlinks>li>a{padding:9px 8px;font-size:15.5px}
  .ci-nav{gap:14px;padding:0 8px 0 16px}
}
@media(max-width:1080px){
  .ci-footcard{grid-template-columns:1fr 1fr 1fr;gap:32px}
}
@media(max-width:992px){
  .ci-navlinks,.deskonly{display:none}
  .ci-iconbtn.burger{display:grid}
  .ci-nav{gap:12px;padding:0 8px 0 16px}
  .ci-navtools{margin-left:auto}
  .ci-brand img{width:26px;height:26px}
  .ci-brand .word{font-size:22px}
  .ci-brand{gap:5px}
  .ci-nav .ci-btn-primary{font-size:14px;padding:10px 15px}
}
@media(max-width:900px){
  .ci-footcard{grid-template-columns:1fr 1fr;padding:32px 24px}
  .ci-d1{font-size:44px}
  .ci-d2{font-size:36px}
}
@media(max-width:768px){
  .ci-navwrap{top:8px;padding:8px 16px 0}
  .ci-d1{font-size:36px;letter-spacing:-.033em}
  .ci-d2{font-size:32px;letter-spacing:-.033em}
  .ci-lead{font-size:16px}
}
@media(max-width:639px){ .ci-d1{font-size:32px} }
@media(max-width:560px){
  .ci-announce .ci-wrap{min-height:42px;padding:8px 44px 8px 16px;flex-wrap:wrap;gap:4px 8px}
  .ci-announce .x{right:16px}
  .ci-footcard{grid-template-columns:1fr}
  .ci-d2{font-size:28px}
}
@media(max-width:479px){ .ci-d1{font-size:28px} }
/* 380px alti: kelime isareti gizlenir, bulut isareti kalir */
@media(max-width:380px){
  .ci-brand .word{display:none}
  .ci-d1{font-size:26px}
}