/* =====================================================================
   RAVENFIN AİLESİ — ortak arayüz dili (N144, 2026-10-18)
   Kaynak: kardes-uygulamalar-demo.html (kullanıcı onayı). Oddra / Addra / Divra'da
   uygulamanın kendi <style>'ından SONRA yüklenir; yalnız görünümü değiştirir —
   yerleşim, metin, veri ve JS davranışına dokunmaz.
   Uygulama vurgu rengi: <html data-app="oddra|addra|divra">.
   ===================================================================== */
:root{
  --radius:16px; --radius-sm:12px;
  --app-acc:#F4B544; --app-acc-rgb:244,181,68; --hero-rgb:46,170,120;
  --pos:#7FC8A0; --neg:#F0857C; --watch:#AEB6FF; --warn:#F2B04A;
  /* grafik serileri — koyu zemin #063631'e karşı doğrulandı (dataviz validate_palette) */
  --c-aqua:#199e70; --c-blue:#3987e5; --c-mag:#d55181; --c-gold:#c98500;
}
html[data-app="oddra"]{--app-acc:#8CCBF2; --app-acc-rgb:140,203,242; --hero-rgb:140,203,242}
html[data-app="addra"]{--app-acc:#FFE6CB; --app-acc-rgb:255,230,203}
html[data-app="divra"]{--app-acc:#7FC8A0; --app-acc-rgb:127,200,160}

body{background:radial-gradient(120% 420px at 100% 0%,rgba(140,203,242,.10),transparent 65%) no-repeat,var(--bg);-webkit-tap-highlight-color:transparent}

/* ---------- ust bar: ortak gecis standardi (2026-10-30) ---------- */
html[data-app] .top{padding:calc(10px + var(--safe-t)) 0 8px}
html[data-app] .top > .wrap{height:46px;min-height:46px;gap:16px}
/* Uygulama gecis onceligi: RavenFin, Oddra, Addra, Divra. */
html[data-app] .top a[href="/mobil.html"]{order:1}
html[data-app] .top a[href="/oddra.html"]{order:2}
html[data-app] .top a[href="/addra.html"]{order:3}
html[data-app] .top a[href="/divra.html"]{order:4}
html[data-app] .top button.iconbtn{order:5}

/* Ana marka: tum ekranlarda ortak logo yuksekligi. */
html[data-app] .top .brand{align-items:center;gap:9px;min-height:34px}
html[data-app] .top .brand > img,html[data-app] .top .brand > svg{display:block;flex:0 0 auto;width:auto;height:34px;object-fit:contain}
html[data-app="oddra"] .top .brand > svg{height:38px}
html[data-app] .top .brand .slogan{font-size:12.5px;font-weight:300;line-height:1.4;margin-bottom:2px}
html[data-app] .top a.iconbtn,html[data-app] .top a.oddra-git{display:grid;place-items:center;flex:0 0 30px;width:30px;min-width:30px;height:30px;padding:0;border:0;background:none;box-shadow:none}
html[data-app] .top a.iconbtn > img,html[data-app] .top a.iconbtn > svg,html[data-app] .top a.oddra-git > svg{display:block;width:30px;height:30px;object-fit:contain;border-radius:0}
html[data-app] .top a[href="/addra.html"] > img{content:url("/icons/addra-sembol-krem.svg")}
html[data-app] .top a[href="/divra.html"] > img{content:url("/icons/divra-sembol-renk.svg")}

/* ---------- üst bar ---------- */
.top{background:rgba(2,43,41,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);margin-bottom:14px}
.iconbtn{border-radius:11px;background:var(--card);border-color:var(--line)}

/* ---------- kart / başlık ---------- */
.card{border-radius:var(--radius)}
.sec-h h3{font-size:16px;font-weight:700}
.sk-load{border-radius:var(--radius)}

/* ---------- hero: sinyal kartı gradyanı ---------- */
.hero{background:linear-gradient(140deg,rgba(var(--hero-rgb),.30),rgba(6,54,49,.6) 62%),var(--card);border-color:rgba(var(--hero-rgb),.42)}
.pil{background:var(--bg2);border-radius:var(--radius-sm);padding:10px 11px}

/* ---------- segment ---------- */
.seg{background:var(--bg2);border-radius:12px;padding:4px;gap:4px}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{background:var(--card2);color:var(--cream2);box-shadow:inset 0 1px 0 var(--line2)}
.seg.seg-k{padding:3px;gap:3px}

/* ---------- chip / filtre (hap biçimi; seçili = krem) ---------- */
.chip,.filtre button{border-radius:999px;border:1px solid var(--line2);background:var(--card);color:var(--muted);font-weight:600}
.chip[aria-pressed="true"],.filtre button[aria-pressed="true"]{background:var(--cream);color:var(--bg);border-color:var(--cream)}

/* ---------- butonlar ---------- */
.btn-p,.fab{background:var(--app-acc);color:#1d1503}
.btn-p:disabled{opacity:.4}
.btn-s{background:var(--card2);border:1px solid var(--line2);color:var(--cream2)}
.geri-k,.geri-btn{border-radius:10px}

/* ---------- etiketler: hap + renk tonu (durum yine metinle yazılı) ---------- */
/* Addra .etk ve Divra .etiket/.durum-e; Oddra'nın kendi .etiket'i (altın küçük etiket) KAPSAM DIŞI */
.etk{padding:2px 8px;border-radius:999px;font-weight:800;letter-spacing:.3px;background:rgba(140,203,242,.14);color:var(--blue)}
.etk.al{background:rgba(127,200,160,.16);color:var(--pos)}
.etk.sat{background:rgba(240,133,124,.16);color:var(--neg)}
html[data-app="divra"] .etiket,.durum-e{padding:0 8px;border-radius:999px;border:0;font-weight:800;letter-spacing:.3px}
html[data-app="divra"] .etiket,.durum-e.ac{background:rgba(140,203,242,.14);color:var(--blue)}
html[data-app="divra"] .etiket.poz{background:rgba(127,200,160,.16);color:var(--pos)}
html[data-app="divra"] .etiket.neg{background:rgba(240,133,124,.16);color:var(--neg)}
.durum-e{background:rgba(255,230,203,.08);color:var(--muted)}
.durum-e.uy{background:rgba(242,176,74,.17);color:var(--warn)}

/* ---------- form ---------- */
.inp{border-radius:11px;background:var(--bg2)}
.inp:focus{border-color:var(--app-acc)}

/* ---------- alt pencere (bottom-sheet) ---------- */
.alt-sayfa{background:rgba(0,10,9,.6)}
.alt-sayfa .ic{background:var(--card);border:1px solid var(--line2);border-bottom:0;border-radius:22px 22px 0 0}
.alt-sayfa .tutamak{border-radius:99px}
/* Addra + Divra kartlari ve alt pencereleri: Oddra N152 mavi-yeşil gradyanı (2026-10-25 kullanıcı) */
html[data-app="addra"] .alt-sayfa .ic,html[data-app="divra"] .alt-sayfa .ic,
html[data-app="addra"] .card,html[data-app="addra"] .oz,html[data-app="addra"] .kart-l,html[data-app="addra"] .onizleme,html[data-app="divra"] .card{background:linear-gradient(90deg,rgba(140,203,242,.30),rgba(6,54,49,.6) 62%),var(--card);border-color:rgba(140,203,242,.42)}

/* ---------- alt navigasyon: uygulama vurgulu üst çizgi ---------- */
nav.alt{background:rgba(1,36,32,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
nav.alt a{position:relative;font-size:11px;font-weight:650;color:var(--faint)}
nav.alt a[aria-current="page"]{color:var(--cream2)}
nav.alt a[aria-current="page"] svg{color:var(--app-acc)}
nav.alt a[aria-current="page"]::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--app-acc)}

/* ---------- toast ---------- */
.toast{background:var(--cream);color:var(--bg);border-radius:12px}

/* ---------- üst bar: kardeş bağlantıları eklenince dar ekran ---------- */
.brand{overflow:hidden}
html[data-app="addra"] .slogan{display:none}
@media (min-width:460px){html[data-app="addra"] .slogan{display:inline}}
@media (max-width:359px){.top .wrap{gap:6px}.top .iconbtn{width:36px;height:36px}.brand img{height:26px}}

/* Masaustu genisligi: telefon duzeni ve Oddra Dunya korunur. */
@media (min-width:761px){
  html[data-app="addra"] .wrap,html[data-app="divra"] .wrap{max-width:760px}
  html[data-app="addra"] .alt-sayfa .ic{max-width:760px}
  html[data-app="addra"] .fab{right:calc(50% - 364px)}
}

/* ---------- ekran başlığı + bölüm başlığı (N147, demo düzeni) ---------- */
.ekran-bas{margin:6px 2px 14px}
.eyebrow{color:var(--muted);font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:4px}
.ekran-baslik{font-size:28px;line-height:1.12;font-weight:750;letter-spacing:-.6px;color:var(--cream2)}
.ekran-slogan{font-size:14px;font-weight:650;color:var(--gold);margin-top:6px}
.sh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:20px 2px 9px}
.sh h2{font-size:16px;font-weight:700;color:var(--cream2)}
.sh .more{color:var(--blue);font-size:12.5px;font-weight:600;white-space:nowrap}
@media (max-width:374px){.ekran-baslik{font-size:24px}}
html[data-app="addra"] #portfoylerIcerik > div{background:linear-gradient(90deg,rgba(140,203,242,.30),rgba(6,54,49,.6) 62%),var(--card)!important;border-color:rgba(140,203,242,.42)!important}