/* ============================================================================
   WIAPEX · Ortak stil dosyası
   Tasarım sistemi: /DESIGN.md — token adları ve kurallar oradan gelir.
   Framework yok. Vanilla CSS.
   ========================================================================== */

/* ------------------------------------------------------------- Manrope ---
   Kendi sunucumuzda barındırılıyor, Google Fonts'tan çekilmiyor.
   Sebep 1 (KVKK): Google Fonts, ziyaretçinin IP adresini Google sunucularına
   iletir. Formunda KVKK onayı olan bir sitede bu tutarsız durur.
   Sebep 2 (hız): bir DNS çözümlemesi ve bir TLS el sıkışması eksiliyor.
   Lisans: SIL Open Font License — self-host serbesttir.
   Manrope değişken bir yazı tipi: tek dosya 200-800 aralığının tamamını verir,
   bu yüzden 300/400/500 için ayrı dosya gerekmiyor. Türkçe için latin ve
   latin-ext alt kümeleri yeterli (ğ Ğ ş Ş İ latin-ext'te, ı ü ö ç â latin'de). */
@font-face{
  font-family:Manrope;
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url(../fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:Manrope;
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url(../fonts/manrope-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* --- Marka: logodan alındı. Gradient mesh'in beş durağı bu sırayla. --- */
  --mint:#7ee0ce;
  --teal:#45c7d9;
  --indigo:#3d3a8c;
  --purple:#8b5cd6;
  --pink:#f0619f;

  /* --- Primary = CTA. Bant başına tek dolu buton. --- */
  --primary:#6e3fd9;
  --primary-deep:#5730b0;
  --primary-press:#43248a;
  --primary-soft:#8b6ce6;
  --primary-subdued:#e6ddfb;

  /* --- Ink: asla saf siyah, daima mor-lacivert tonlu --- */
  --ink:#171238;
  --ink-2:#3a3560;
  --ink-mute:#6b6790;

  --canvas:#ffffff;
  --canvas-soft:#f8f7fc;
  --canvas-mint:#effbf8;
  --dark-900:#141034;

  --hairline:#e6e4f0;
  --hairline-strong:#d8d4ea;
  --hairline-input:#c4bfdd;
  --hairline-on-dark:#d6d2e6;

  /* --- Oracle kırmızısı YALNIZCA Oracle atıflarında. CTA rengi değildir. --- */
  --oracle:#c74634;
  --oracle-on-dark:#ff8a75;

  --positive:#0f6b57;

  --mesh-purple-glow:rgba(139,92,214,.5);
  --mesh-teal-glow:rgba(69,199,217,.34);
  --mesh-pink-glow:rgba(240,97,159,.28);

  /* --- Koyu yüzeylerde metin --- */
  --on-dark-2:#d7d3f0;
  --on-dark-mute:#c7c3e4;
  --on-dark-subtle:#b8b3dc;

  /* --- İkon tonları --- */
  --icon-mint:#1c9e88;
  --icon-teal:#1b93a6;
  --teal-deep:#17798a;   /* beyaz metin altında AA geçen tek teal: 5.1:1 */
  --icon-purple:#6e3fd9;
  --icon-pink:#d43d80;
  --icon-indigo:#3d3a8c;

  /* --- Spacing: 8px tabanı --- */
  --sp-xs:4px;  --sp-sm:8px;  --sp-md:12px; --sp-lg:16px;
  --sp-xl:24px; --sp-2xl:32px; --sp-huge:64px;

  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:9999px;

  /* Tonlu gölgeler YALNIZCA açık yüzeylerde. Koyu zeminde renkli gölge "glow"a
     dönüşür ve AI üretimi arayüzlerin bilinen tik'idir. --sh-dark nötr siyah. */
  --sh-1:0 1px 3px rgba(23,18,56,.08);
  --sh-2:0 8px 24px rgba(23,18,56,.08), 0 2px 6px rgba(23,18,56,.04);
  --sh-dark:0 24px 60px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);

  --container:1200px;
  --prose:68ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:Manrope,'SF Pro Display',system-ui,-apple-system,sans-serif;
  font-size:15px;
  font-weight:300;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- a11y --- */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-md) 0;z-index:300}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--r-xs)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------- tipografi --- */
h1,h2,h3,h4{margin:0;font-weight:300;color:var(--ink)}
.d-xxl{font-size:clamp(2.25rem,5vw,3.5rem);line-height:1.03;letter-spacing:-.045em}
.d-xl {font-size:clamp(1.875rem,3.6vw,3rem); line-height:1.12;letter-spacing:-.03em}
.d-lg {font-size:clamp(1.375rem,2.2vw,2rem); line-height:1.15;letter-spacing:-.025em}
.d-md {font-size:1.375rem;line-height:1.2;letter-spacing:-.02em}
.h-sm {font-size:1.125rem;line-height:1.4;letter-spacing:-.01em}
.lead{font-size:1.0625rem;line-height:1.6;color:var(--ink-2);max-width:var(--prose)}
.prose{max-width:var(--prose)}
.prose p{color:var(--ink-2);font-size:1.0625rem;line-height:1.7;margin:0 0 var(--sp-lg)}
.prose p:last-child{margin-bottom:0}
.mute{color:var(--ink-mute)}
.tnum{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.eyebrow{
  font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--primary-deep);margin:0 0 var(--sp-lg)
}
/* Hero'daki eyebrow metinleri brief'te sayfa sayfa belirlendi, korunuyor.
   Ancak H1 üstünde "küçük + harf aralıklı + BÜYÜK HARF" biçimi, AI üretimi
   SaaS hero'larının standart kalıbı. Metni tutup biçimi sadeleştiriyoruz:
   normal yazım, harf aralığı yok. Bölüm içi eyebrow'lar (h2 üstü) değişmez. */
.hero .eyebrow{
  font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--primary-deep);margin-bottom:var(--sp-md)
}
.eyebrow-long{text-transform:none;letter-spacing:.01em;font-size:14px;font-weight:400}
.mt-sm{margin-top:var(--sp-lg)}
.mt-md{margin-top:20px}
.mt-lg{margin-top:28px}
.mb-lg{margin-bottom:48px}

/* -------------------------------------------------------------- layout --- */
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--sp-xl)}
section{padding:clamp(56px,8vw,96px) 0}
.soft{background:var(--canvas-soft)}
.mintbg{background:var(--canvas-mint)}
.grid{display:grid;gap:var(--sp-xl)}
@media(min-width:768px){.g2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.g3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:768px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.g4{grid-template-columns:repeat(4,1fr)}}
.split{display:grid;gap:var(--sp-2xl)}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:var(--sp-huge)}}
@media(min-width:900px){.split-wide{grid-template-columns:1.05fr .95fr;gap:var(--sp-huge)}}

/* ------------------------------------------------------------ butonlar --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:16px;font-weight:400;line-height:1;
  padding:13px 22px;border-radius:var(--r-pill);border:1px solid transparent;
  cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
  min-height:44px;text-decoration:none;white-space:nowrap
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-deep)}
.btn-primary:active{background:var(--primary-press);transform:translateY(1px)}
.btn-secondary{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-secondary:hover{background:var(--primary-subdued)}
.btn-on-dark{background:#fff;color:var(--primary-deep)}
.btn-on-dark:hover{background:var(--primary-subdued)}
.btn-ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.08)}
/* 44px, DESIGN.md'deki dokunma hedefi tabanı. Header CTA'sı da buna uyar. */
.btn-sm{font-size:14px;padding:10px 18px;min-height:44px}
.btn .ar{transition:transform .16s ease}
.btn:hover .ar{transform:translateX(3px)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-md)}

/* -------------------------------------------------------------- header --- */
/* JS yok: eskiden scroll ile gelen gölge artık daima açık. */
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline);box-shadow:0 1px 12px rgba(23,18,56,.04)}
.hdr .wrap{display:flex;align-items:center;gap:var(--sp-lg);min-height:72px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo:hover{text-decoration:none}
.logo-word{font-size:1.5rem;font-weight:400;letter-spacing:-.03em;color:var(--teal)}

/* Header'daki küçük Oracle Partner göstergesi. İlk ekranda daima görünür. */
.hdr-oracle{
  display:none;align-items:center;gap:7px;
  border:1px solid var(--hairline);border-radius:var(--r-pill);
  padding:5px 12px 5px 6px;margin-left:var(--sp-lg)
}
@media(min-width:1280px){.hdr-oracle{display:inline-flex}}
.hdr-oracle .om{
  background:var(--oracle);color:#fff;font-size:12px;font-weight:600;letter-spacing:.06em;
  padding:3px 7px;border-radius:var(--r-xs)
}
.hdr-oracle span{font-size:12px;color:var(--ink-2);white-space:nowrap}

.nav{display:none;margin-left:auto;gap:var(--sp-lg);align-items:center}
@media(min-width:1024px){.nav{display:flex}}
.nav > a,.nav .dd-btn{color:var(--ink-2);font-size:15px;font-weight:400}
.nav > a:hover{color:var(--primary);text-decoration:none}
.nav a[aria-current="page"]{color:var(--primary-deep);font-weight:500}

/* --- Çözümler mega menü: native <details>. Enter/Space açar, Escape kapatır. --- */
.dd{position:relative}
.dd-btn{
  display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 0;
  font-family:inherit;font-size:15px;font-weight:400;color:var(--ink-2);cursor:pointer;
  list-style:none
}
.dd-btn::-webkit-details-marker{display:none}
.dd-btn:hover{color:var(--primary)}
.dd-btn .cv{transition:transform .16s ease}
.dd[open] .dd-btn .cv{transform:rotate(180deg)}
.dd-panel{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid var(--hairline);border-radius:var(--r-xl);
  box-shadow:var(--sh-2);padding:var(--sp-xl);width:min(680px,92vw);z-index:120
}
.dd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-xs) var(--sp-xl)}
.dd-grid a{
  display:block;padding:9px 10px;border-radius:var(--r-md);
  color:var(--ink-2);font-size:14px;line-height:1.4
}
.dd-grid a:hover{background:var(--canvas-soft);color:var(--primary-deep);text-decoration:none}
.dd-all{
  display:inline-flex;align-items:center;gap:6px;margin-top:var(--sp-lg);
  padding-top:var(--sp-lg);border-top:1px solid var(--hairline);
  font-size:14px;color:var(--primary);width:100%
}

.hdr-cta{margin-left:auto;display:flex;gap:10px;align-items:center}
@media(min-width:1024px){.hdr-cta{margin-left:var(--sp-lg)}}
.menu-btn{display:inline-flex;background:none;border:1px solid var(--hairline);border-radius:var(--r-md);padding:9px;cursor:pointer;color:var(--ink);list-style:none}
.menu-btn::-webkit-details-marker{display:none}
@media(min-width:1024px){.mob{display:none}}

/* --- Mobil menü: native <details>. Panel sticky header'a göre konumlanır. --- */
#mnav{
  position:absolute;left:0;right:0;top:100%;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  background:#fff;box-shadow:var(--sh-2);
  padding:var(--sp-md) 0 var(--sp-xl);max-height:calc(100vh - 72px);overflow-y:auto
}
#mnav a{display:block;padding:11px var(--sp-xl);color:var(--ink-2);font-size:16px}
#mnav a:hover{background:var(--canvas-soft);text-decoration:none}
#mnav .mgroup{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);padding:var(--sp-lg) var(--sp-xl) var(--sp-sm)}
#mnav .msub a{padding-left:calc(var(--sp-xl) + 14px);font-size:15px}
#mnav .moracle{display:flex;align-items:center;gap:8px;padding:var(--sp-lg) var(--sp-xl) 0;margin-top:var(--sp-sm);border-top:1px solid var(--hairline)}
#mnav .moracle .om{background:var(--oracle);color:#fff;font-size:12px;font-weight:600;letter-spacing:.06em;padding:3px 7px;border-radius:var(--r-xs)}
#mnav .moracle span{font-size:12px;color:var(--ink-2)}

/* ---------------------------------------------------- hero + mesh --- */
.hero{position:relative;overflow:hidden;padding-top:clamp(48px,7vw,80px);padding-bottom:clamp(48px,7vw,88px)}
/* GENİŞLİK AÇIKÇA VERİLMELİ. <svg> "replaced element" olduğu için mutlak
   konumlandırmada left+right ikilisi genişliği belirlemez; tarayıcı right'ı yok
   sayıp genişliği viewBox oranından (yükseklik x 2) hesaplar. Alçak hero'larda
   bu genişlik yetmiyor ve sağda beyaz şerit kalıyordu.
   max-width:none da şart — global svg{max-width:100%} kuralı aksi hâlde kırpar. */
.mesh{
  position:absolute;top:-15%;left:-10%;width:120%;height:135%;
  max-width:none;z-index:0;pointer-events:none
}
.hero .wrap{position:relative;z-index:1}
.hero-in{max-width:760px}
.hero h1{margin-bottom:var(--sp-xl)}
.hero .lead{font-size:1.1875rem;margin-bottom:var(--sp-2xl)}
.hero-split{display:grid;gap:var(--sp-2xl);align-items:center}
@media(min-width:1080px){
  .hero-split{grid-template-columns:1fr 1fr;gap:var(--sp-huge)}
  .hero-split .hero-in{max-width:none}
}
/* Alt sayfa hero'su: aynı mesh, daha sade ve alçak. */
.hero-sub{padding-top:clamp(32px,4vw,52px);padding-bottom:clamp(40px,5vw,64px)}
.hero-sub .mesh{opacity:.62;height:118%}
.hero-sub .hero-in{max-width:800px}

/* Başlık vurgusu düz renk. Gradient metin dekoratiftir ve AI üretimi
   arayüzlerin bilinen tik'idir; renk zaten mesh'te duruyor. */
.grad{color:var(--primary-deep)}

/* ------------------------------------------------ Oracle Partner rozeti --- */
/* TODO: Resmî Oracle Partner görseli temin edildiğinde bu tipografik rozetin
   yerine assets/images/oracle-partner.svg konulabilir. Sahte Oracle logosu
   çizilmedi; bilerek tipografik bir rozet kullanıldı. */
.oracle-chip{
  display:inline-flex;align-items:center;gap:10px;background:#fff;
  border:1px solid var(--hairline);border-radius:var(--r-pill);
  padding:7px 16px 7px 8px;margin-bottom:var(--sp-xl);box-shadow:var(--sh-1);
  max-width:100%;flex-wrap:wrap
}
.oracle-chip .mark{
  background:var(--oracle);color:#fff;font-size:12px;font-weight:600;letter-spacing:.07em;
  padding:4px 8px;border-radius:var(--r-xs)
}
.oracle-chip b{color:var(--oracle);font-weight:600;font-size:13px}
.oracle-chip span{font-size:13px;color:var(--ink-2)}

/* ------------------------------------------------------ metrik şeridi --- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;margin-top:clamp(40px,6vw,64px)}
@media(min-width:768px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:#fff;padding:var(--sp-xl)}
.stat b{display:block;font-size:1.75rem;font-weight:300;letter-spacing:-.03em;line-height:1.1;margin-bottom:6px}
.stat .ok{color:var(--oracle)}
.stat span{font-size:13px;color:var(--ink-mute);line-height:1.4;display:block}

/* ------------------------------------------------------- koyu bantlar --- */
.dark{background:var(--dark-900);color:#fff;position:relative;overflow:hidden}
.dark .wrap{position:relative;z-index:1}
.dark h2,.dark h3,.dark h4{color:#fff}
.dark .lead,.dark .prose p{color:var(--on-dark-mute)}
.dark .eyebrow{color:var(--mint)}
.dark strong{color:#fff;font-weight:400}
.glow-purple::after{
  content:"";position:absolute;right:-12%;top:-40%;width:60%;height:180%;
  background:radial-gradient(closest-side,var(--mesh-purple-glow),transparent 72%);
  filter:blur(28px);pointer-events:none
}
.glow-teal::before{
  content:"";position:absolute;left:-15%;bottom:-55%;width:70%;height:150%;
  background:radial-gradient(closest-side,var(--mesh-teal-glow),transparent 70%);filter:blur(30px);pointer-events:none
}
.glow-pink::after{
  content:"";position:absolute;right:-10%;top:-45%;width:55%;height:140%;
  background:radial-gradient(closest-side,var(--mesh-pink-glow),transparent 70%);filter:blur(30px);pointer-events:none
}

.ob-badge{display:inline-flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);padding:8px 18px 8px 10px;margin-bottom:var(--sp-xl)}
.ob-badge .mark{background:var(--oracle);color:#fff;font-weight:600;font-size:12px;letter-spacing:.06em;padding:5px 10px;border-radius:var(--r-xs)}
.ob-badge span{font-size:13px;color:var(--on-dark-2)}
.ob-list{list-style:none;margin:var(--sp-xl) 0 0;padding:0;display:grid;gap:var(--sp-lg)}
.ob-list li{display:flex;gap:14px;align-items:flex-start;color:var(--on-dark-mute);font-size:15px;line-height:1.5}
.ob-list .ck{flex-shrink:0;width:22px;height:22px;border-radius:var(--r-pill);background:rgba(126,224,206,.16);display:grid;place-items:center;margin-top:1px}
.ob-list b{display:block;color:#fff;font-weight:500;margin-bottom:2px}
.apex-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl);padding:var(--sp-2xl)}
.apex-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-lg);padding:14px 0;border-bottom:1px solid rgba(255,255,255,.09);font-size:14px;color:var(--on-dark-subtle)}
.apex-row:last-child{border-bottom:0;padding-bottom:0}
.apex-row b{color:#fff;font-weight:400;text-align:right}
.apex-row .ora{color:var(--oracle-on-dark)}

/* ------------------------------------------------- mimari şeması (HTML) --- */
/* Görsele gömülmedi; erişilebilir HTML/CSS ile kuruldu. */
.arch{list-style:none;margin:var(--sp-2xl) 0 0;padding:0;display:grid;gap:var(--sp-md)}
@media(min-width:860px){.arch{grid-template-columns:repeat(4,1fr);gap:var(--sp-sm);align-items:stretch}}
.arch li{
  position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-lg);padding:var(--sp-lg) var(--sp-md);text-align:center
}
.arch li b{display:block;color:#fff;font-weight:500;font-size:14px;margin-bottom:4px}
.arch li span{display:block;font-size:12px;color:var(--on-dark-subtle);line-height:1.45}
.arch li::after{
  content:"";position:absolute;left:50%;bottom:-14px;width:2px;height:10px;
  background:rgba(255,255,255,.28);transform:translateX(-50%)
}
.arch li:last-child::after{display:none}
@media(min-width:860px){
  .arch li::after{left:auto;right:-10px;bottom:auto;top:50%;width:10px;height:2px;transform:translateY(-50%)}
}
.arch .core{background:rgba(199,70,52,.12);border-color:rgba(255,138,117,.4)}
.arch .core b{color:var(--oracle-on-dark)}

/* ------------------------------------------------------------- kartlar --- */
/* İkon başlığın ÜSTÜNDE değil YANINDA. Başlık üstüne yuvarlak kare ikon kutusu
   her AI üreticisinin çıkardığı evrensel "feature card" şablonudur. */
.card{
  background:#fff;border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--sp-2xl);
  display:grid;grid-template-columns:auto 1fr;column-gap:var(--sp-md);align-items:center;
  align-content:start;
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease
}
.card:hover{box-shadow:var(--sh-2);transform:translateY(-2px);border-color:var(--hairline-strong)}
.card h3{grid-column:2;grid-row:1;margin:0}
.card h3 a{color:inherit}
.card h3 a:hover{color:var(--primary-deep);text-decoration:none}
.card p{grid-column:1 / -1;grid-row:2;margin:var(--sp-md) 0 0;color:var(--ink-2);font-size:14px;line-height:1.5}
.card .more{grid-column:1 / -1;grid-row:3;margin-top:var(--sp-lg);font-size:14px;color:var(--primary);display:inline-flex;align-items:center;gap:6px}
.ico{grid-column:1;grid-row:1;display:block;background:none;border-radius:0}
.ico svg{width:22px;height:22px;stroke-width:1.5;display:block}
.i-mint{color:var(--icon-mint)}
.i-teal{color:var(--icon-teal)}
.i-purp{color:var(--icon-purple)}
.i-pink{color:var(--icon-pink)}
.i-ind {color:var(--icon-indigo)}

/* Ortak modül nitelikleri rozeti (çözümler sayfası) */
.card .traits{grid-column:1 / -1;grid-row:4;margin-top:var(--sp-lg);display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0}
.card .traits li{font-size:12px;color:var(--ink-mute);background:var(--canvas-soft);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:4px 10px}

/* --------------------------------------------------------- karşılaştırma --- */
.compare{display:grid;gap:var(--sp-lg)}
.cmp{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--sp-xl)}
.cmp-t{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;letter-spacing:.02em;margin-bottom:var(--sp-md)}
.cmp-bad .cmp-t{color:var(--ink-mute)}
.cmp-good .cmp-t{color:var(--primary-deep)}
.cmp ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cmp li{font-size:13px;padding:6px 12px;border-radius:var(--r-pill);background:var(--canvas-soft);color:var(--ink-2);border:1px solid var(--hairline)}
.cmp-good li{background:var(--primary-subdued);border-color:transparent;color:var(--primary-deep)}
.cmp-bad li{text-decoration:line-through;opacity:.75}

/* ------------------------------------------- özellik / fayda listeleri --- */
.feat{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-sm)}
@media(min-width:700px){.feat{grid-template-columns:repeat(2,1fr);column-gap:var(--sp-xl)}}
@media(min-width:1040px){.feat-3{grid-template-columns:repeat(3,1fr)}}
.feat li{
  display:flex;gap:10px;align-items:flex-start;
  font-size:14.9px;color:var(--ink-2);line-height:1.5;
  padding:9px 0;border-bottom:1px solid var(--hairline)
}
.feat li::before{
  content:"";flex-shrink:0;width:6px;height:6px;margin-top:8px;border-radius:var(--r-pill);
  background:var(--primary-soft)
}
.benefit{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-md)}
@media(min-width:760px){.benefit{grid-template-columns:repeat(2,1fr);gap:var(--sp-lg)}}
.benefit li{
  display:flex;gap:12px;align-items:flex-start;
  background:#fff;border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:var(--sp-lg) var(--sp-xl);font-size:15px;color:var(--ink-2);line-height:1.5
}
.benefit .ck{flex-shrink:0;width:20px;height:20px;margin-top:1px;color:var(--icon-mint)}

/* ------------------------------------------------ çözüm sayfası ek yapı --- */
.crumb{font-size:13px;color:var(--ink-mute);margin:0 0 var(--sp-lg)}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumb a{color:var(--ink-mute)}
.crumb a:hover{color:var(--primary)}
.crumb .sep{opacity:.55}
.crumb [aria-current="page"]{color:var(--ink-2)}

/* Her çözüm sayfasındaki Oracle altyapı kutusu */
.techbox{
  background:var(--dark-900);color:#fff;border-radius:var(--r-xl);
  padding:clamp(24px,4vw,40px);position:relative;overflow:hidden
}
.techbox h3{color:#fff;margin-bottom:var(--sp-md)}
.techbox p{margin:0;color:var(--on-dark-mute);font-size:15px;line-height:1.6;max-width:64ch}
.techbox .tb-badge{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:var(--sp-lg);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-pill);padding:6px 14px 6px 8px
}
.techbox .tb-badge .mark{background:var(--oracle);color:#fff;font-weight:600;font-size:12px;letter-spacing:.06em;padding:3px 8px;border-radius:var(--r-xs)}
.techbox .tb-badge span{font-size:12px;color:var(--on-dark-2)}

/* İlgili çözümler */
.related{display:grid;gap:var(--sp-md)}
@media(min-width:700px){.related{grid-template-columns:repeat(3,1fr)}}
.related a{
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-md);
  background:#fff;border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:var(--sp-lg) var(--sp-xl);color:var(--ink-2);font-size:15px;
  transition:border-color .16s,box-shadow .16s
}
.related a:hover{border-color:var(--hairline-strong);box-shadow:var(--sh-1);text-decoration:none;color:var(--primary-deep)}
.related .ar{color:var(--primary)}

/* Süreç akışı */
.flow{list-style:none;margin:0;padding:0;counter-reset:fl;display:grid;gap:var(--sp-md)}
@media(min-width:900px){.flow{grid-template-columns:repeat(5,1fr)}}
.flow li{
  counter-increment:fl;background:#fff;border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--sp-lg)
}
.flow li::before{
  content:counter(fl,decimal-leading-zero);display:block;
  font-size:12px;font-feature-settings:"tnum";color:var(--primary);margin-bottom:8px
}
.flow li b{display:block;font-weight:500;font-size:14px;margin-bottom:4px}
.flow li span{font-size:13px;color:var(--ink-mute);line-height:1.45}

/* --------------------------------------------------- yapay zekâ ekranı --- */
.mock{background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-dark);overflow:hidden;color:var(--ink)}
.mock-light{box-shadow:var(--sh-2);border:1px solid var(--hairline)}
.mock-bar{display:flex;align-items:center;gap:7px;padding:12px var(--sp-lg);background:var(--canvas-soft);border-bottom:1px solid var(--hairline)}
.mock-bar i{width:9px;height:9px;border-radius:var(--r-pill);background:var(--hairline-on-dark);display:block}
.mock-bar .ttl{margin-left:8px;font-size:12px;color:var(--ink-mute)}
.mock-body{padding:var(--sp-xl)}
.prompt{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--hairline-input);border-radius:var(--r-lg);padding:12px 16px;margin-bottom:var(--sp-md)}
/* Gradient'in teal ucunda beyaz metin 2.0:1 kalıyordu; koyu uçlarla AA geçiyor.
   --teal beyaz metin ALTINDA asla kullanılmaz. */
.prompt .sp{width:22px;height:22px;border-radius:var(--r-pill);flex-shrink:0;background:linear-gradient(135deg,var(--teal-deep),var(--primary));display:grid;place-items:center;color:#fff;font-size:12px;margin-top:1px}
.prompt p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.5}
.gen-state{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--positive);margin-bottom:var(--sp-md)}
.ai-reply{background:var(--canvas-soft);border-radius:var(--r-md);padding:var(--sp-lg);margin-bottom:var(--sp-lg)}
.ai-reply .tag{display:inline-block;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--primary-deep);background:var(--primary-subdued);padding:3px 9px;border-radius:var(--r-pill);margin-bottom:10px}
.ai-reply p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.5}
/* Görünüm seçimi: JS yok, radio + :checked. Radyolar görünmez ama odaklanabilir
   ve panellerle kardeş oldukları için ~ ile onları kontrol edebiliyorlar. */
.vt{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.viewtabs{display:flex;gap:6px;margin-bottom:var(--sp-md);flex-wrap:wrap}
.viewtabs label{
  display:inline-flex;align-items:center;
  font-size:12px;font-weight:400;padding:6px 13px;
  border-radius:var(--r-pill);border:1px solid var(--hairline);background:#fff;
  color:var(--ink-2);cursor:pointer;min-height:32px
}
.vpane{display:none}
#vt-grafik:checked ~ .vp-grafik,
#vt-tablo:checked  ~ .vp-tablo{display:block}
#vt-grafik:checked ~ .viewtabs label[for="vt-grafik"],
#vt-tablo:checked  ~ .viewtabs label[for="vt-tablo"]{
  background:var(--primary-subdued);border-color:transparent;color:var(--primary-deep);font-weight:500
}
#vt-grafik:focus-visible ~ .viewtabs label[for="vt-grafik"],
#vt-tablo:focus-visible  ~ .viewtabs label[for="vt-tablo"]{
  outline:2px solid var(--primary);outline-offset:2px
}
.chart{display:flex;align-items:flex-end;gap:10px;height:120px;margin:var(--sp-md) 0 10px}
.bar{flex:1;border-radius:var(--r-sm) var(--r-sm) var(--r-xs) var(--r-xs);background:linear-gradient(180deg,var(--purple),var(--teal));opacity:.9}
.chart-x{display:flex;gap:10px;font-size:12px;color:var(--ink-mute)}
.chart-x span{flex:1;text-align:center}
.mtable{width:100%;border-collapse:collapse;margin-top:var(--sp-md);font-size:13px}
.mtable th{text-align:left;font-weight:500;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);padding:0 0 9px;border-bottom:1px solid var(--hairline)}
.mtable td{padding:9px 0;border-bottom:1px solid var(--hairline);color:var(--ink-2)}
.mtable td:last-child,.mtable th:last-child{text-align:right}
.mtable tr:last-child td{border-bottom:0}
.up{color:var(--positive);font-size:12px}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-md);list-style:none;padding:0}
.filters li{font-size:12px;color:var(--ink-mute);background:var(--canvas-soft);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:4px 10px}
.mock-foot{display:flex;flex-wrap:wrap;gap:8px;padding:var(--sp-md) var(--sp-xl) var(--sp-xl);border-top:1px solid var(--hairline);margin-top:var(--sp-md)}
.mock-foot span{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);
  border:1px solid var(--hairline);border-radius:var(--r-pill);padding:6px 13px
}

/* ------------------------------------------- Hero: platform modül haritası ---
   Modüller üstte, hepsinin oturduğu Oracle Database altta. Kompozisyonun
   kendisi sitenin ana argümanını anlatıyor: ayrı yazılımlar değil, tek zemin. */
.platform{
  background:#fff;border:1px solid var(--hairline);border-radius:var(--r-xl);
  padding:var(--sp-xl);box-shadow:var(--sh-2)
}
.platform-top{
  display:flex;align-items:center;margin:0 0 var(--sp-lg);
  padding-bottom:var(--sp-md);border-bottom:1px solid var(--hairline)
}
.platform-top .pt-mark{
  display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;
  color:var(--ink);letter-spacing:-.01em
}

.modgrid{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-sm);grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.modgrid{grid-template-columns:repeat(3,1fr)}}
.modgrid li{
  display:flex;align-items:center;gap:9px;
  background:var(--canvas-soft);border:1px solid var(--hairline);border-radius:var(--r-md);
  padding:12px 13px;font-size:13px;color:var(--ink-2);line-height:1.3;
  transition:border-color .16s ease,background .16s ease
}
.modgrid li:hover{background:#fff;border-color:var(--hairline-strong)}
.modgrid svg{width:17px;height:17px;flex-shrink:0;stroke-width:1.6}


/* Eski hero ürün ekranı kompozisyonu (alt sayfalarda kullanılabilir) */
.appshot{display:grid;gap:var(--sp-md)}
.shot{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--sp-lg);box-shadow:var(--sh-2)}
.shot .shot-t{font-size:13px;font-weight:500;letter-spacing:0;color:var(--ink-mute);margin-bottom:var(--sp-md)}
.shot-row{display:grid;gap:var(--sp-md)}
@media(min-width:560px){.shot-row{grid-template-columns:1fr 1fr}}
.kpi{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--ink-2);padding:7px 0;border-bottom:1px solid var(--hairline)}
.kpi:last-child{border-bottom:0}
.kpi b{font-weight:400;color:var(--ink);font-feature-settings:"tnum"}
.alert{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ink-2);padding:7px 0}
.alert .dotw{flex-shrink:0;width:7px;height:7px;border-radius:var(--r-pill);margin-top:6px;background:var(--pink)}
.alert .dotm{flex-shrink:0;width:7px;height:7px;border-radius:var(--r-pill);margin-top:6px;background:var(--icon-mint)}
.minichart{display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:var(--sp-sm)}
.minichart i{flex:1;background:linear-gradient(180deg,var(--purple),var(--teal));border-radius:var(--r-xs);opacity:.85;display:block}
.devicebar{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-md)}
.devicebar span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-mute);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:4px 10px}

/* ------------------------------------------------------------ sektörler --- */
.sect{display:grid;gap:2px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden}
@media(min-width:640px){.sect{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.sect{grid-template-columns:repeat(3,1fr)}}
.sec-i{background:#fff;padding:var(--sp-xl);display:flex;gap:14px;align-items:flex-start;transition:background .16s;color:inherit}
.sec-i:hover{background:var(--canvas-soft);text-decoration:none}
.sec-i b{display:block;font-weight:500;font-size:15px;margin-bottom:3px;color:var(--ink)}
.sec-i p{margin:0;font-size:13px;color:var(--ink-mute);line-height:1.45}
.sec-i .n{font-size:12px;color:var(--primary);font-feature-settings:"tnum";padding-top:3px;flex-shrink:0;width:20px}
/* Sektör şeridinin sonundaki davet kutusu. Sektör iddiası değil, çağrıdır;
   bu yüzden numarası yok ve zemini farklı. İki sütun kaplayarak ızgarada
   boş hücre kalmasını da önler. */
.sec-cta{background:var(--canvas-soft);justify-content:space-between;align-items:center}
.sec-cta:hover{background:var(--primary-subdued)}
.sec-cta b{color:var(--primary-deep)}
.sec-cta .ar{color:var(--primary);flex-shrink:0;font-size:18px}
@media(min-width:640px){.sec-cta{grid-column:span 2}}

.sector-block{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px);border-top:1px solid var(--hairline)}
.sector-block:first-of-type{border-top:0}
.chips{list-style:none;margin:var(--sp-lg) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:13px;padding:6px 12px;border-radius:var(--r-pill);background:var(--primary-subdued);color:var(--primary-deep)}

/* ---------------------------------------------------------- referanslar --- */
.refnote{
  background:var(--canvas-soft);border:1px dashed var(--hairline-input);
  border-radius:var(--r-lg);padding:var(--sp-2xl);text-align:center
}
.refnote p{margin:0;color:var(--ink-mute);font-size:15px}
.refcard{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--sp-2xl)}
.refcard .rlogo{height:38px;margin-bottom:var(--sp-lg);display:flex;align-items:center}
.refcard .rname{font-weight:500;font-size:16px;margin-bottom:3px}
.refcard .rsec{font-size:12px;color:var(--ink-mute);margin-bottom:var(--sp-md)}
.refcard .rsol{list-style:none;margin:0 0 var(--sp-md);padding:0;display:flex;flex-wrap:wrap;gap:6px}
.refcard .rsol li{font-size:12px;background:var(--canvas-soft);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:4px 10px;color:var(--ink-2)}
.refcard blockquote{margin:var(--sp-lg) 0 0;padding:var(--sp-lg);background:var(--canvas-soft);border-radius:var(--r-md);font-size:14px;color:var(--ink-2);line-height:1.6;font-style:italic}

/* --------------------------------------------------------------- değerler --- */
.values{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-md)}
.values li{
  border:1px solid var(--hairline);border-radius:var(--r-pill);
  padding:9px 18px;font-size:14px;color:var(--ink-2);background:#fff
}

/* ------------------------------------------------- demo talebi kartı --- */
/* Form alanı yok: talep hazır doldurulmuş bir e-postaya devrediliyor. */
.form{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-xl);padding:clamp(24px,4vw,40px);box-shadow:var(--sh-2)}
.form > p{font-size:15px;color:var(--ink-2);margin:0}
.asklist{list-style:none;margin:var(--sp-lg) 0 var(--sp-xl);padding:0;display:grid;gap:11px}
.asklist li{position:relative;padding-left:26px;font-size:14px;color:var(--ink-2);line-height:1.5}
.asklist li::before{
  content:"";position:absolute;left:8px;top:9px;width:6px;height:6px;
  border-radius:var(--r-pill);background:var(--primary)
}
.cta-row{display:grid;gap:10px;margin:0}
@media(min-width:520px){.cta-row{grid-template-columns:1fr auto}}
.form .btn{width:100%;justify-content:center}
.form .fine{font-size:12px;color:var(--ink-mute);margin:var(--sp-md) 0 0;text-align:center;line-height:1.5}
.form-trust{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:var(--sp-lg);padding-top:var(--sp-lg);border-top:1px solid var(--hairline)
}
.form-trust .om{background:var(--oracle);color:#fff;font-size:12px;font-weight:600;letter-spacing:.06em;padding:3px 7px;border-radius:var(--r-xs)}
.form-trust span{font-size:12px;color:var(--ink-mute)}
.cinfo{display:grid;gap:var(--sp-lg);margin-top:var(--sp-2xl)}
.cinfo a,.cinfo p{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2);font-size:15px;margin:0}
.cinfo a:hover{color:var(--primary)}
.cinfo .ci{flex-shrink:0;width:34px;height:34px;border-radius:var(--r-md);background:var(--canvas-soft);border:1px solid var(--hairline);display:grid;place-items:center;color:var(--primary)}
.cinfo .ph{color:var(--ink-mute)}

/* -------------------------------------------------------------- footer --- */
footer{background:#fff;border-top:1px solid var(--hairline);padding:var(--sp-huge) 0 var(--sp-2xl)}
.f-grid{display:grid;gap:var(--sp-2xl);margin-bottom:var(--sp-huge)}
@media(min-width:768px){.f-grid{grid-template-columns:1.6fr repeat(3,1fr)}}
.f-col .f-h{font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:var(--sp-lg)}
.f-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.f-col a{color:var(--ink-2);font-size:14px}
.f-col a:hover{color:var(--primary)}
.f-about p{font-size:14px;color:var(--ink-mute);max-width:38ch;margin:var(--sp-lg) 0 var(--sp-xl);line-height:1.6}
.f-oracle{display:inline-flex;align-items:center;gap:8px;margin-bottom:var(--sp-lg);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:5px 12px 5px 6px}
.f-oracle .om{background:var(--oracle);color:#fff;font-size:12px;font-weight:600;letter-spacing:.06em;padding:3px 7px;border-radius:var(--r-xs)}
.f-oracle span{font-size:12px;color:var(--ink-2)}
.f-social{display:flex;gap:10px}
.f-social a{width:36px;height:36px;border-radius:var(--r-md);border:1px solid var(--hairline);display:grid;place-items:center;color:var(--ink-2)}
.f-social a:hover{border-color:var(--primary);color:var(--primary)}
.f-bot{border-top:1px solid var(--hairline);padding-top:var(--sp-xl);display:flex;flex-wrap:wrap;gap:var(--sp-lg);justify-content:space-between;font-size:13px;color:var(--ink-mute)}

/* --------------------------------------------------------------- motion --- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
}