/* ==========================================================================
   OLASIS kurumsal sunum sitesi
   Tasarim yonu: tulip.co (koyu endustriyel platform). Kullanici 23 Agustos
   2026'da dort gercek referans arasindan bunu secmedi, "bilemedim" dedi ve
   karar bize birakildi; gerekce: diger uc referans (Katana, ScanTrust, Logo)
   musteri logosu ve yorum rozetine yaslaniyor, Olasis yeni marka oldugu icin
   o kozlar yok. Tulip urunun kendisine yaslanir, kategorisi de birebir ayni.

   Kadranlar: varyans 4 (cogunlukla duzenli, iki asimetrik an),
   hareket 3 (yalniz amacli), yogunluk 5 (sanayi alicisi dolu ister).
   ========================================================================== */

@import url("yazitipi/yazitipi.css");

/* --- Renk: koyu zemin. Notr griler marka lacivertine dogru hafif egik,
       reflex olarak sicak degil. Saf siyah/beyaz yok: derinlik icin. --- */
:root {
  --zemin:        oklch(0.19 0.028 258);   /* koyu lacivert */
  --zemin-2:      oklch(0.23 0.030 258);   /* bir tik acik katman */
  --zemin-3:      oklch(0.27 0.028 258);   /* kenarlik ve ayrac */
  --ak:           oklch(0.97 0.006 258);   /* ana metin, saf beyaz degil */
  --ak-sonuk:     oklch(0.78 0.014 258);   /* ikincil metin, 4.5:1 uzeri */
  --ak-silik:     oklch(0.63 0.016 258);   /* yalniz buyuk/etiket metin */
  --vurgu:        oklch(0.84 0.155 88);    /* amber, tek vurgu */
  --vurgu-koyu:   oklch(0.72 0.150 78);
  --acik-zemin:   oklch(0.975 0.004 258);  /* acik bolumler */
  --acik-metin:   oklch(0.24 0.026 258);
  --acik-sonuk:   oklch(0.44 0.020 258);
  --acik-kenar:   oklch(0.90 0.008 258);

  --olcek-1: 0.25rem;  --olcek-2: 0.5rem;   --olcek-3: 0.75rem;
  --olcek-4: 1rem;     --olcek-6: 1.5rem;   --olcek-8: 2rem;
  --olcek-12: 3rem;    --olcek-16: 4rem;    --olcek-24: 6rem;

  --kose: 10px;
  --kose-kucuk: 6px;
  --en: 1180px;

  /* Zayif CSS egrileri yerine guclu ozel egri */
  --yumusa: cubic-bezier(0.23, 1, 0.32, 1);

  --z-sabit: 100;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--ak);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.12; text-wrap: balance; font-weight: 700; }
h1 { font-size: clamp(2.2rem, 5.2vw, 4rem); letter-spacing: -0.032em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); letter-spacing: -0.024em; }
h3 { font-size: 1.18rem; letter-spacing: -0.012em; }
p  { margin: 0; text-wrap: pretty; }

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

.kap { width: 100%; max-width: var(--en); margin: 0 auto; padding: 0 var(--olcek-6); }
.olcu { max-width: 68ch; }          /* okunur satir uzunlugu */
.mono { font-family: "IBM Plex Mono", ui-monospace, "Consolas", monospace; }

/* Klavye kullanicisi hover'i hic gormez: odak ayri ve her zaman gorunur */
:focus-visible {
  outline: 2px solid var(--vurgu);
  outline-offset: 3px;
  border-radius: var(--olcek-1);
}

/* --------------------------------- ust bar ------------------------------ */
.ust {
  position: sticky; top: 0; z-index: var(--z-sabit);
  background: color-mix(in oklch, var(--zemin) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--zemin-3);
}
.ust-ic {
  display: flex; align-items: center; gap: var(--olcek-8);
  height: 68px;
}
.marka {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 1.32rem; font-weight: 700; letter-spacing: -0.03em;
  text-decoration: none; color: var(--ak);
}
.marka-nokta { width: 6px; height: 6px; border-radius: 50%; background: var(--vurgu); }
.ust-menu { display: flex; gap: var(--olcek-6); margin-left: auto; }
.ust-menu a {
  text-decoration: none; color: var(--ak-sonuk); font-size: 0.95rem;
  padding: 6px 0; border-bottom: 1px solid transparent;
  transition: color 160ms var(--yumusa), border-color 160ms var(--yumusa);
}
.ust-menu a:hover { color: var(--ak); border-bottom-color: var(--vurgu); }
@media (max-width: 900px) { .ust-menu { display: none; } }

/* --------------------------------- dugmeler ----------------------------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: 0.98rem; font-weight: 600; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background-color 160ms var(--yumusa), border-color 160ms var(--yumusa),
              color 160ms var(--yumusa), transform 120ms var(--yumusa);
}
.dugme-ana { background: var(--vurgu); color: oklch(0.20 0.03 258); }
.dugme-ana:hover { background: var(--vurgu-koyu); }
.dugme-yan { background: transparent; color: var(--ak); border-color: var(--zemin-3); }
.dugme-yan:hover { border-color: var(--ak-silik); background: var(--zemin-2); }
.dugme:active { transform: scale(0.975); }
.dugme[disabled], .dugme[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; transform: none;
}
@media (prefers-reduced-motion: reduce) { .dugme { transition: none; } .dugme:active { transform: none; } }

/* --------------------------------- kahraman ----------------------------- */
.kahraman { padding: var(--olcek-24) 0 var(--olcek-16); position: relative; overflow: hidden; }
.kahraman::before {
  /* fabrika zemini izlenimi: ince izometrik izgara, dekoratif */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(oklch(0.34 0.03 258 / 0.5) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.34 0.03 258 / 0.5) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 90% at 70% 0%, #000 20%, transparent 72%);
}
.kahraman > * { position: relative; }
.kahraman-etiket {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ak-silik); margin-bottom: var(--olcek-6);
}
.kahraman-etiket::before {
  content: ""; width: 22px; height: 1px; background: var(--vurgu);
}
.kahraman h1 { max-width: 17ch; }
.kahraman h1 em { font-style: normal; color: var(--vurgu); }
.kahraman-alt { margin-top: var(--olcek-6); font-size: 1.12rem; color: var(--ak-sonuk); max-width: 56ch; }
.kahraman-dugmeler { display: flex; gap: var(--olcek-3); margin-top: var(--olcek-8); flex-wrap: wrap; }

/* --------------------------------- kanit seridi ------------------------- */
.kanit {
  border-top: 1px solid var(--zemin-3); border-bottom: 1px solid var(--zemin-3);
  background: var(--zemin-2);
}
.kanit-izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.kanit-oge { padding: var(--olcek-8) var(--olcek-6); border-right: 1px solid var(--zemin-3); }
.kanit-oge:last-child { border-right: 0; }
.kanit-sayi {
  font-family: "IBM Plex Mono", monospace; font-size: 1.85rem; font-weight: 500;
  color: var(--vurgu); letter-spacing: -0.02em;
}
.kanit-metin { margin-top: 6px; font-size: 0.93rem; color: var(--ak-sonuk); }
@media (max-width: 720px) { .kanit-oge { border-right: 0; border-bottom: 1px solid var(--zemin-3); } }

/* --------------------------------- bolumler ----------------------------- */
.bolum { padding: var(--olcek-24) 0; }
.bolum-acik { background: var(--acik-zemin); color: var(--acik-metin); }
.bolum-acik h2 { color: var(--acik-metin); }
.bolum-acik .bolum-alt { color: var(--acik-sonuk); }
.bolum-basi { margin-bottom: var(--olcek-12); }
.bolum-alt { margin-top: var(--olcek-4); color: var(--ak-sonuk); font-size: 1.05rem; }

/* akis: numaralandirma GERCEK bir sira oldugu icin var, susleme degil */
.akis { display: grid; gap: var(--olcek-8); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.akis-adim { border-top: 2px solid var(--acik-kenar); padding-top: var(--olcek-4); }
.akis-adim:first-child { border-top-color: var(--vurgu-koyu); }
.akis-no {
  font-family: "IBM Plex Mono", monospace; font-size: 0.82rem;
  color: var(--acik-sonuk); letter-spacing: 0.06em;
}
.akis-adim h3 { margin: var(--olcek-2) 0 var(--olcek-2); }
.akis-adim p { color: var(--acik-sonuk); font-size: 0.97rem; }

/* ozellik listesi: kart yerine ayrac; kart ancak yukselti anlam tasiyorsa */
.ozellikler { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ozellik { padding: var(--olcek-8) var(--olcek-6) var(--olcek-8) 0; border-top: 1px solid var(--zemin-3); }
.ozellik h3 { margin-bottom: var(--olcek-2); }
.ozellik p { color: var(--ak-sonuk); font-size: 0.97rem; }

/* ekran gosterimi */
.ekran {
  border: 1px solid var(--zemin-3); border-radius: var(--kose);
  overflow: hidden; background: var(--zemin-2);
}
.ekran img, .ekran video { width: 100%; display: block; }
.ekran-video { background: #000; aspect-ratio: 16 / 9; height: auto; }
.ekran-basi {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--zemin-3);
  font-size: 0.85rem; color: var(--ak-silik);
}
.ekran-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--zemin-3); }
.ekran-ikili { display: grid; gap: var(--olcek-6); grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.ekran-ikili + .ekran-ikili { margin-top: var(--olcek-6); }

/* dogruluk bolumu: ne soz verilir / ne verilmez */
.iki-sutun { display: grid; gap: var(--olcek-12); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.liste { list-style: none; margin: 0; padding: 0; }
.liste li {
  padding: var(--olcek-3) 0 var(--olcek-3) var(--olcek-8);
  border-bottom: 1px solid var(--acik-kenar); position: relative; font-size: 0.98rem;
}
.liste li::before {
  position: absolute; left: 0; top: var(--olcek-3);
  font-family: "IBM Plex Mono", monospace; font-size: 0.8rem;
}
.liste-var li::before { content: "VAR"; color: oklch(0.52 0.13 150); }
.liste-yok li::before { content: "YOK"; color: oklch(0.55 0.14 32); }

/* sss */
.sss details {
  border-bottom: 1px solid var(--zemin-3); padding: var(--olcek-4) 0;
}
.sss summary {
  cursor: pointer; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: var(--olcek-4);
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; color: var(--vurgu); font-weight: 400; }
.sss details[open] summary::after { content: "\2212"; }
.sss p { margin-top: var(--olcek-3); color: var(--ak-sonuk); font-size: 0.97rem; }

/* iletisim */
.iletisim { background: var(--zemin-2); border: 1px solid var(--zemin-3); border-radius: var(--kose); padding: var(--olcek-12); }
.alan { display: block; margin-bottom: var(--olcek-4); }
.alan > span { display: block; font-size: 0.9rem; color: var(--ak-sonuk); margin-bottom: 6px; }
.alan input, .alan textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 0.97rem;
  color: var(--ak); background: var(--zemin); border: 1px solid var(--zemin-3);
  border-radius: var(--kose-kucuk);
  transition: border-color 160ms var(--yumusa);
}
.alan input::placeholder, .alan textarea::placeholder { color: var(--ak-silik); }
.alan input:hover, .alan textarea:hover { border-color: var(--ak-silik); }
.alan input:focus-visible, .alan textarea:focus-visible { border-color: var(--vurgu); outline-offset: 1px; }
.alan-hata { color: oklch(0.70 0.15 32); font-size: 0.88rem; margin-top: 5px; }
.form-ikili { display: grid; gap: var(--olcek-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* alt bilgi */
.alt { border-top: 1px solid var(--zemin-3); padding: var(--olcek-12) 0; color: var(--ak-silik); font-size: 0.92rem; }
.alt-ic { display: flex; justify-content: space-between; gap: var(--olcek-8); flex-wrap: wrap; }

/* --- giris hareketi: yalniz bir kez, amac bolum sinirini belli etmek --- */
@media (prefers-reduced-motion: no-preference) {
  .beliren { opacity: 0; transform: translateY(14px); }
  .beliren.gorundu {
    opacity: 1; transform: none;
    transition: opacity 420ms var(--yumusa), transform 420ms var(--yumusa);
  }
}

/* --- kahraman ikili duzen: solda soz, sagda urunun kendisi.
       Gorsel saga tasar (kirpilir): Tulip'in izometrik ciziminin yaptigi isi
       burada GERCEK ekran yapiyor, uydurma kutu cizmiyoruz. --- */
.kahraman-ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--olcek-12); align-items: center; }
.kahraman-gorsel {
  border: 1px solid var(--zemin-3); border-radius: var(--kose);
  overflow: hidden; background: var(--zemin-2);
  box-shadow: 0 24px 60px oklch(0.10 0.02 258 / 0.45);
  margin-right: calc(-1 * var(--olcek-16));
}
.kahraman-gorsel img { width: 100%; display: block; }
@media (max-width: 1000px) {
  .kahraman-ic { grid-template-columns: 1fr; gap: var(--olcek-8); }
  .kahraman-gorsel { margin-right: 0; }
  .kahraman h1 { max-width: none; }
}

/* --- satir ici style yerine sinif: CSP'de style-src 'unsafe-inline'
       acmak zorunda kalmamak icin --- */
.ekran-genis { margin-bottom: var(--olcek-6); }
.liste-basi  { margin-bottom: var(--olcek-4); }
.iletisim    { max-width: 640px; }
.dugme-tam   { width: 100%; }
.gizli       { display: none; }
.marka-alt   { font-size: 1.1rem; }
.alt-not     { margin-top: 6px; }