/* ============================================================
   QUAREST — Ortak Stil Dosyası
   Stil Guide: Quarest Website V2.0 · Design System & Style Guide v1.0
   Kaynak: _temp/style-guides/quarest-stil-guide-V2.html
   Tamamen koyu sistem — krem/açık bölüm YOKTUR.
   ============================================================ */

:root{
  /* ── Zeminler ── */
  --q-black:#060608;        /* Primary — hero, header, footer, ana zemin */
  --q-black-blue:#07090E;   /* Secondary — teknoloji, video, büyük bloklar */
  --q-black-soft:#0C0C10;   /* Kartlar, accordion, iç paneller */
  --q-graphite:#171A20;     /* UI Neutral — border, divider, hover, input */
  /* ── Marka ── */
  --q-orange:#C55301;
  --q-orange-bright:#E07B2E;
  --q-copper:#D9A05B;
  /* ── Teknoloji ── */
  --q-electric:#4C8DFF;
  --q-navy-deep:#0F2D6A;
  /* ── Metin ── */
  --q-white:#FFFFFF;
  --q-body:#C9CDD3;
  --q-muted:#8A9098;
  /* ── Açık bölüm (istisna — bkz. .sec-light) ── */
  --q-cream:#F7F4F2;
  --q-cream-warm:#FAF3EE;
  --q-ink:#17171A;
  --q-ink-soft:#63636A;
  --q-line-light:#E3DEDA;
  --q-orange-deep:#A94501;  /* açık zeminde okunaklı turuncu (kontrast 5.4:1) */
  /* ── Tipografi ── */
  --font-serif:'Instrument Serif', Georgia, serif;
  --font-sans:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,monospace;
  /* ── Şekil (radius) ── */
  --r-card:20px; --r-btn:16px; --r-input:16px; --r-sm:12px; --r-pill:100px;
  /* ── Hareket ── */
  --dur:300ms; --ease:cubic-bezier(.16,1,.3,1);
  /* ── Efekt (ağır gölge yok — yalnızca glow) ── */
  --glow-orange:0 0 40px rgba(224,123,46,.25);
  --glow-blue:0 0 40px rgba(76,141,255,.22);
  /* ── Layout ── */
  --container:1160px;
  --sec-pad:120px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--q-black);color:var(--q-body);line-height:1.6;font-size:18px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}

.wrap{max-width:var(--container);margin:0 auto;padding:0 32px}
section{padding:var(--sec-pad) 0;position:relative}
@media(max-width:980px){:root{--sec-pad:80px}}
@media(max-width:640px){:root{--sec-pad:56px}.wrap{padding:0 20px}body{font-size:16px}}

/* ── Bölüm zeminleri (3 koyu katman) ── */
.sec-dark{background:var(--q-black);color:#fff}
.sec-soft{background:var(--q-black-blue);color:#fff}
.sec-tech{background:radial-gradient(ellipse 70% 55% at 82% 0%,rgba(15,45,106,.38),transparent 62%),var(--q-black-blue);color:#fff}

/* ── Açık (krem) bölüm ──
   ⚠️ V2 guide "tamamen koyu sistem" der; bu Ömür'ün açık talebiyle konulmuş İSTİSNADIR.
   Yeni bölüm açarken varsayılan koyudur — .sec-light'ı ancak Ömür isterse kullan. */
.sec-light{background:var(--q-cream);color:var(--q-ink)}
.sec-light.warm{background:var(--q-cream-warm)}
/* Açık zeminde kartlar: beyaz, ince çizgi, gölge yok */
.sec-light .card{background:#fff;border-color:var(--q-line-light)}
.sec-light .card:hover{border-color:var(--q-copper)}
.sec-light .card h4{color:var(--q-ink)}
.sec-light .card p{color:var(--q-ink-soft)}
.sec-light .card .icon{border-color:var(--q-orange);color:var(--q-orange)}
/* Kısa bakır ayraç çizgisi (başlık ↔ metin arası) */
.rule{display:block;width:44px;height:1px;background:var(--q-copper);margin:18px 0}
.sec-light .rule{background:var(--q-orange);opacity:.55}
.sec-light h1,.sec-light h2,.sec-light h3{color:var(--q-ink)}
.sec-light h2 em,.sec-light h3 em{color:var(--q-orange)}
.sec-light .eyebrow{color:var(--q-orange-deep)}
.sec-light .eyebrow::before{background:var(--q-orange-deep)}
.sec-light .lead{color:#4E4E56}
.sec-light .serif{color:var(--q-ink)}
.sec-light .serif em{color:var(--q-orange)}
.sec-light .mono{color:var(--q-orange-deep)}

/* Marka üst etiketi (kicker'ın üstünde) — İngilizce olduğu için doğrudan büyük harf yazılır */
.tagline{display:block;font-size:13px;font-weight:600;letter-spacing:.18em;color:var(--q-ink);margin-bottom:12px}
.sec-dark .tagline,.sec-soft .tagline,.sec-tech .tagline{color:var(--q-white)}

/* Teknoloji grid dokusu */
.grid-bg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(76,141,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(76,141,255,.05) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 55% 25%,black,transparent);mask-image:radial-gradient(ellipse 70% 70% at 55% 25%,black,transparent)}

/* ── Tipografi ──
   Instrument Serif : hero + duygusal vurgu cümleleri (asla kalın değil)
   Inter            : bölüm başlıkları, kart başlıkları, gövde, UI
   Büyük harf (uppercase) hiçbir yerde kullanılmaz.                        */
/* Kicker/eyebrow BÜYÜK HARF (Ömür kararı).
   ⚠️ İngilizce metinlerde `text-transform` Türkçe kuralı uygular ve "i" → "İ" olur
   (ARCHİTECTURE gibi). Bu yüzden İngilizce olanlar HTML'de doğrudan büyük harf yazılır
   ve `.en` sınıfıyla dönüşüm kapatılır. */
.eyebrow{font-size:13px;font-weight:600;color:var(--q-copper);margin-bottom:16px;display:flex;align-items:center;gap:12px;letter-spacing:.18em;text-transform:uppercase}
.eyebrow.en,.plat-arch.en,.pe-arch.en{text-transform:none}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--q-copper);flex-shrink:0}
.eyebrow.blue{color:var(--q-electric)}
.eyebrow.blue::before{background:var(--q-electric)}
.eyebrow.mid{justify-content:center}

h1{font-family:var(--font-serif);font-weight:400;font-size:clamp(38px,4.6vw,64px);line-height:1.15;letter-spacing:-.02em;color:var(--q-white)}
h1 em{font-style:italic;color:var(--q-orange-bright)}

/* Bölüm başlıkları da Instrument Serif (Ömür kararı — müşteri dokümanındaki
   "Başlık Fontu: Instrument Serif → büyük bölüm başlıkları" maddesi esas alındı;
   aynı dokümanın "Section Title: Inter 600" satırı geçersiz sayıldı). */
h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(30px,3.3vw,46px);line-height:1.15;letter-spacing:-.02em;color:var(--q-white);margin-bottom:14px}
h2 em{font-style:italic;color:var(--q-copper)}

h3{font-family:var(--font-serif);font-weight:400;font-size:clamp(24px,2.6vw,32px);line-height:1.18;letter-spacing:-.02em;color:var(--q-white)}
h3 em{font-style:italic;color:var(--q-copper)}

/* Kart başlıkları Inter 600 kalır (guide: "Kart Başlığı Inter 22–24px Weight 600") */
.card h4,.qcard h4,.tamam2 h3,.sys-card h4,.plat h4,.mc-title h4,.pb-txt h4,.yol h4,.prensip h4,
.karar-col .ctit,.adim h5,.vid-card .cap h5,.site-footer h6{
  font-family:var(--font-sans);font-weight:600}

/* Duygusal vurgu cümlesi — Instrument Serif */
.serif{font-family:var(--font-serif);font-weight:400;letter-spacing:-.02em;line-height:1.2;color:var(--q-white)}
.serif em{font-style:italic;color:var(--q-copper)}
.serif.warm em{color:var(--q-orange-bright)}

.lead{color:var(--q-muted);max-width:660px;font-size:17px}
.mono{font-family:var(--font-mono);color:var(--q-electric);font-size:14px;font-weight:500}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.center .eyebrow{justify-content:center}

/* ── Butonlar (Inter 600 · radius 16) ──
   Buton yazıları BÜYÜK HARF (Ömür kararı — guide'ın genel "uppercase yok" kuralının
   tek istisnası; kural diğer tüm metinlerde geçerli).
   ⚠️ Türkçe: doğru dönüşüm (i→İ, ı→I) için sayfanın <html lang="tr"> olması ŞART.
   Yeni sayfalarda bunu atlama, yoksa "İNCELE" yerine "INCELE" çıkar. */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;padding:15px 30px;border-radius:var(--r-btn);border:1px solid transparent;transition:all var(--dur) var(--ease);white-space:nowrap}
.btn .arr{transition:transform var(--dur) var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-sm{padding:11px 22px;font-size:13px;letter-spacing:.07em}
/* Uzun büyük harf etiketler dar ekranda taşmasın */
@media(max-width:640px){.btn{font-size:13.5px;letter-spacing:.05em;padding:14px 24px;white-space:normal;text-align:center}.btn-sm{font-size:12.5px;padding:11px 18px}}

.btn-primary{background:var(--q-orange);color:#fff}
.btn-primary:hover{background:var(--q-orange-bright);box-shadow:var(--glow-orange)}

/* Seviye 2 — şeffaf + Copper border */
.btn-secondary,.btn-outline-light{background:transparent;color:var(--q-white);border-color:var(--q-copper)}
.btn-secondary:hover,.btn-outline-light:hover{color:var(--q-copper);box-shadow:0 0 30px rgba(217,160,91,.15)}

/* Nötr / ikincil eylem */
.btn-ghost,.btn-outline-dark{background:transparent;color:var(--q-body);border-color:var(--q-graphite)}
.btn-ghost:hover,.btn-outline-dark:hover{border-color:var(--q-copper);color:var(--q-white)}

/* Teknoloji bağlamı — mavi yalnızca vurgu, asla dolgu değil */
.btn-tech{background:transparent;color:var(--q-body);border-color:var(--q-graphite)}
.btn-tech:hover{border-color:var(--q-electric);color:var(--q-white);box-shadow:var(--glow-blue)}

/* Seviye 3 — satın alma */
/* turuncu çerçeveli buton — açık zeminli bölümlerde ikincil eylem */
.btn-outline-orange{background:transparent;color:var(--q-orange);border-color:var(--q-orange)}
.btn-outline-orange:hover{background:var(--q-orange);color:#fff}
.btn-buy{background:linear-gradient(120deg,var(--q-orange),var(--q-orange-bright));color:#fff}
.btn-buy:hover{filter:brightness(1.08);box-shadow:0 0 44px rgba(224,123,46,.3)}

.btn-link{background:none;border:none;color:var(--q-orange);padding:0;border-radius:0;border-bottom:1px solid var(--q-orange);font-size:15px}

/* ── Input ── */
.inp{background:var(--q-black-soft);border:1px solid var(--q-graphite);border-radius:var(--r-input);color:var(--q-body);font-family:var(--font-sans);font-size:16px;padding:15px 18px;width:100%;outline:none;transition:border-color var(--dur) var(--ease)}
.inp:focus{border-color:var(--q-copper)}

/* ── Kartlar (tek amaç · maks. 3 bilgi seviyesi · nefes alan iç boşluk) ── */
.card{background:var(--q-black-soft);border:1px solid var(--q-graphite);border-radius:var(--r-card);padding:32px 30px;transition:border-color var(--dur) var(--ease)}
.card:hover{border-color:var(--q-copper)}
.card .icon{width:52px;height:52px;border:2px solid var(--q-orange);border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--q-orange);font-size:22px;margin-bottom:22px}
.card h4{font-family:var(--font-sans);font-size:22px;font-weight:600;letter-spacing:-.02em;text-transform:none;margin-bottom:8px;color:var(--q-white)}
.card p{font-size:15px;color:var(--q-muted)}
.card .tag{font-size:14px;color:var(--q-copper);margin-bottom:10px}
.card-dark{background:var(--q-black-soft);border-color:var(--q-graphite)}

/* Teknoloji kartı — Navy Deep daima gradyan içinde */
.card-tech{background:linear-gradient(165deg,rgba(15,45,106,.25),var(--q-black-soft) 55%);border-color:var(--q-graphite)}
.card-tech:hover{border-color:var(--q-electric)}
.card-tech .icon{border-color:var(--q-electric);color:var(--q-electric)}
.card-tech .tag{color:var(--q-electric)}
.card-tech .num{font-family:var(--font-mono);font-size:13px;color:var(--q-electric);margin-bottom:14px}

/* ── Spec şeridi ── */
.spec{display:flex;border:1px solid var(--q-graphite);border-radius:var(--r-card);overflow:hidden;flex-wrap:wrap;background:var(--q-black-soft)}
.spec>div{flex:1;min-width:150px;padding:18px 22px;border-right:1px solid var(--q-graphite)}
.spec>div:last-child{border-right:none}
.spec .k{font-family:var(--font-mono);font-size:12px;color:var(--q-muted);letter-spacing:.04em;text-transform:none;margin-bottom:6px}
.spec .v{font-size:15px;font-weight:600;color:#fff}
.spec .v.o{color:var(--q-copper)}
.spec .v.b{color:var(--q-electric)}

/* ── Grid yardımcıları (8pt) ── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ── Ürün ışık halkası (glow — gölge değil) ── */
.halo-stage{position:relative;padding-bottom:34px}
.halo-stage img{position:relative;z-index:2;margin:0 auto}
.halo{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:72%;height:56px;border-radius:50%;z-index:1}
.halo.orange{box-shadow:0 -10px 70px 16px rgba(224,123,46,.34);border-top:2px solid rgba(224,123,46,.8)}
.halo.blue{box-shadow:0 -10px 70px 16px rgba(76,141,255,.34);border-top:2px solid rgba(76,141,255,.8)}

/* ═══════════════════════════════════════════════════════════════
   FOOTER — ortak standart (Excel "footer" sekmesi)
   Dört accordion grubu · masaüstünde açık, mobilde kapalı (main.js).
   Tüm sayfalar bu dosyayı yüklediği için footer CSS'i burada tek yerde durur.
   ═══════════════════════════════════════════════════════════════ */
.site-footer{background:#03070d;color:var(--q-muted);padding:56px 0 0;border-top:1px solid var(--q-graphite)}
.site-footer .tm{font-family:var(--font-sans);font-size:.62em;font-weight:400;vertical-align:super;letter-spacing:0}
/* ⚠️ ™ hiçbir yerde blok olmamalı. Sitede birçok yerde `X span{display:block}`
   biçiminde geniş kurallar var (footer bağlantıları, kart alt metinleri…);
   bunlar iç içe geçmiş `<span class="tm">`i de yakalayınca ™ kelimesinden
   kopup kendi satırına düşüyor. Tek satırlık koruma — ™ için başka bir
   display değeri anlamlı değil, bu yüzden !important güvenli. */
.tm{display:inline!important}

.footer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 34px;padding-bottom:46px;align-items:start}

/* Başlığın tamamı tıklanabilir olsun — yalnızca "+" ikonuna bağlı kalmasın ([M47]) */
.f-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:14px;min-height:48px;padding:4px 0}
.f-group>summary::-webkit-details-marker{display:none}
.site-footer h6{font-size:14px;font-weight:600;color:#fff;letter-spacing:-.01em;margin:0}
.f-chev{width:8px;height:8px;flex:0 0 auto;border-right:1.5px solid var(--q-copper);border-bottom:1.5px solid var(--q-copper);
  transform:rotate(45deg);transition:transform var(--dur) var(--ease)}
.f-group[open]>summary .f-chev{transform:rotate(225deg)}

/* Okunabilir gövde — mikro metin yasak ([M48]) */
.f-links{padding:10px 0 4px}
.f-links li{margin-bottom:2px}
.f-links a,.f-links>li>span{display:block;padding:7px 0;font-size:14px;line-height:1.5;color:var(--q-body);
  transition:color var(--dur) var(--ease)}
.f-links a:hover{color:var(--q-copper)}
.f-links [data-page-pending]{color:#6E747C;cursor:default}

.footer-brandline{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:34px 0 30px;border-top:1px solid var(--q-graphite)}
.f-brand .logo-img{height:48px}
.f-social{display:flex;gap:15px;margin-top:16px}
.f-social a{display:flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;color:#fff;font-size:18px;transition:color var(--dur) var(--ease)}
.f-social .qi{width:1em;height:1em}
.f-social a:hover{color:var(--q-copper)}
.footer-motto{max-width:480px;text-align:right;font-size:clamp(22px,2.4vw,34px);line-height:1.18;color:var(--q-body);font-weight:300}
.footer-motto strong{display:block;color:var(--q-orange-bright);font-weight:500}

/* Sabit alt satır: iddia · diller · telif ([O44] her dil kendi yazımıyla) */
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 28px;
  border-top:1px solid var(--q-graphite);padding:20px 0;font-size:13px;color:var(--q-muted)}
.f-claim{font-family:var(--font-serif);font-size:16px;color:var(--q-body)}
.f-lang{display:flex;flex-wrap:wrap;gap:6px 20px}
.f-lang li+li{position:relative}
.f-lang li+li::before{content:"·";position:absolute;left:-11px;color:var(--q-graphite)}
.f-lang a,.f-lang span{font-size:13px;color:var(--q-muted);display:inline-flex;align-items:center;min-height:32px}
.f-lang a:hover{color:var(--q-copper)}
.f-lang [aria-current]{color:var(--q-copper)}
.f-lang [data-page-pending]{color:#6E747C;cursor:default}
.f-copy{font-size:12px}

@media(max-width:900px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 26px}
  .footer-motto{font-size:22px;max-width:300px}
}
@media(max-width:640px){
  .site-footer{padding-top:36px}
  /* Mobilde dört grup da kapalı gelir ([M46]); açık/kapalı ayrımı görünür kalsın diye ayırıcı çizgi */
  .footer-grid{grid-template-columns:1fr;gap:0;padding-bottom:24px}
  .f-group{border-bottom:1px solid var(--q-graphite)}
  .f-group>summary{min-height:56px}
  .f-links{padding:2px 0 12px}
  .f-links a,.f-links>li>span{font-size:15px;padding:9px 0}
  .footer-brandline{flex-direction:column;align-items:flex-start;gap:22px;padding:26px 0 24px}
  .f-brand .logo-img{height:38px}
  .footer-motto{text-align:left;font-size:20px;max-width:none}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:10px;padding:18px 0 26px}
  .f-claim{font-size:15px}
}

/* ═══════════════════════════════════════════════════════════════
   MENÜ ÜST BAŞLIKLARI — kategori, URL değil (Excel image202 · [G14])
   Bağlantı değildir, sayfa değiştirmez; bir accordion başlığıdır.
   Panel yalnızca TIKLAMA ile açılır (Ömür kararı, 9 Eyl 2026) — kaynak bu
   yapıya accordion diyor ve "aynı anda tek başlık açık" kuralını koyuyor;
   mobil menü de zaten tıklamayla çalışıyor. main.js `.mega-open` sınıfını
   ve `aria-expanded` durumunu yönetir.
   ═══════════════════════════════════════════════════════════════ */
.main-nav>li>.nav-top{
  font-family:var(--font-sans);font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;color:var(--q-body);background:none;border:0;padding:8px 0;cursor:pointer;
  transition:color var(--dur) var(--ease)}
.main-nav>li:hover>.nav-top,.main-nav>li:focus-within>.nav-top,
.main-nav>li.mega-open>.nav-top{color:var(--q-copper)}
/* Bulunulan bölümün üst başlığı — menu-uret.py `data-current` veriyor */
.main-nav>li>.nav-top{position:relative}
.main-nav>li>.nav-top[data-current]{color:#fff}
/* Alt çizgi mutlak konumlu — başlığın yüksekliğini değiştirmez, satır kaymaz */
.main-nav>li>.nav-top[data-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:2px;border-radius:2px;background:var(--q-copper)}
/* Panel yalnızca tıklamayla açılır; odak tek başına açmaz (hover'ın klavye
   karşılığı olurdu). Klavyede Enter/Space butonu tetikler, Escape kapatır. */
.main-nav>li.mega-open>.dropdown{opacity:1;visibility:visible;transform:translateY(0)}
@media(max-width:1180px){.main-nav>li>.nav-top{font-size:12.5px;letter-spacing:.05em}}
@media(max-width:1080px){.main-nav>li>.nav-top{font-size:12px;letter-spacing:.04em}}
@media(max-width:1020px){
  .mobile-open .main-nav>li>.nav-top{font-size:17px;padding:10px 0;text-align:left}
}
body.chrome-light .main-nav>li>.nav-top{color:#4A5665}
body.chrome-light .main-nav>li:hover>.nav-top,body.chrome-light .main-nav>li:focus-within>.nav-top{color:#B4661F}

/* ═══════════════════════════════════════════════════════════════
   ™ ESNEK KUTU DÜZELTMESİ
   Esnek/ızgara kutularda `<span class="tm">` ayrı bir öğe olur ve
   kutunun `gap`i ™'i kelimesinden koparır ("Q7 Platform  ™").
   Öğe olmasını engelleyemeyiz; boşluğu geri alıyoruz.
   ⚠️ Yeni bir esnek bileşene ™ eklenirse buraya da eklenmeli —
   `_temp/ai-notes/check-tm.cjs` yakalar.
   ═══════════════════════════════════════════════════════════════ */
.plat-kicker>.tm,.tek-kicker>.tm{margin-inline-start:-14px}
.plat-chip>.tm{margin-inline-start:-10px}
.ku-gecis>.tm,.td-btn>.tm{margin-inline-start:-12px}
.td-band>.tm{margin-inline-start:-10px}