/* ============================================================
   isgRadar — Ana sayfa yönlendirme hero'su (mavi tema)
   Tüm sınıflar "rd-" ön ekiyle kapsüllenmiştir; şablon CSS'iyle
   çakışmaz. index.html'de şablon CSS'inden SONRA yüklenir.
   Bu dosyayı yalnızca index.html yükler.

   Yerleşim: TEK EKRAN (100dvh), her genişlikte scroll yok.
   Üst bar fotoğrafların üzerinde yüzer; güven şeridi akışta, 56px.
   Sayfada görünür başlık bandı YOKTUR — bilinçli tasarım kararı.
   ============================================================ */

/* isgRadar mavi tema — KİLİTLİ. Bu değerler değiştirilmeyecek. */
:root{
  --rd-bg:      #ECEEEA;
  --rd-panel:   #F4F5F2;
  --rd-panel-2: #E3E6E1;
  --rd-ink:     #101619;
  --rd-muted:   #5C6771;
  --rd-line:    rgba(16,22,25,.16);

  /* açık zeminde kullanılan vurgu renkleri */
  --rd-a1:      #0B3C6B;   /* OSGB   — derin lacivert */
  --rd-a2:      #1268B3;   /* Uzman  — canlı mavi */
  --rd-a3:      #0E7C8A;   /* Firma  — petrol mavi */

  /* fotoğraf üzerinde kullanılan açık karşılıkları */
  --rd-a1-on:   #8CC4F0;
  --rd-a2-on:   #A8D8FF;
  --rd-a3-on:   #8FE0E8;

  --rd-sweep:   #1268B3;
  --rd-scrim:   rgba(8,20,34,.62);   /* fotoğraf perdesi (eski) */

  /* --rd-a1'in rgb bileşenleri — rgba() perdelerinde kullanmak için.
     Yeni renk DEĞİL, kilitli #0B3C6B'nin aynısı. */
  --rd-navy-rgb: 11, 60, 107;

  /* renk olmayan yardımcı değerler */
  --rd-topbar:  62px;
  --rd-trust-h: 56px;
  --rd-pad-x:   44px;
}

html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }

/* Ekranda görünmez, ekran okuyucuya açık. h1 için kullanılır. */
.rd-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
    border: 0;
}

.rd-hero {
    position: relative;
    height: 100vh;            /* eski tarayıcı fallback */
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--rd-a1);
    color: var(--rd-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Üst bar ----
   Tamamen saydam, fotoğrafların üzerine biner. Okunabilirlik, panellerin
   üst perdesinden gelir (.rd-strip::after birinci katman).
   Logo bir görsel değil (ikon fontu + metin), rengi doğrudan verilir. */
.rd-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    min-height: var(--rd-topbar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem clamp(1rem, 3vw, 2rem);
    background: transparent;
    border: 0;
    box-shadow: none;
}
/* Header perdesi: opak bant DEGIL, asagi dogru sifira sonen bir katman.
   Header'in kutusundan 44px TASAR — sonme bolgesi metnin altinda kalir, boylece
   mobilde menu iki satira sardiginda da linkler perdenin guclu bolgesinde durur.
   Panelin kendi ust perdesi tek basina yetmiyordu (375px'te ~2:1 olcuIdu). */
.rd-topbar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: -44px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(var(--rd-navy-rgb), .92) 0%,
        rgba(var(--rd-navy-rgb), .80) 42%,
        rgba(var(--rd-navy-rgb), .45) 72%,
        rgba(var(--rd-navy-rgb), 0) 100%);
}
/* Marka kilidi: uygulamadaki logonun aynisi — yuvarlak rozet + Lucide "Radar"
   ikonu + ISG RADAR buyuk harf. Koyu zemin varyanti (LoginPage'deki gibi). */
.rd-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -.02em;
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(0,0,0,.45);
    text-decoration: none;
}
.rd-brand-badge {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}
.rd-brand-badge svg { width: 18px; height: 18px; display: block; }
.rd-nav { display: flex; align-items: center; gap: .35rem .9rem; flex-wrap: wrap; justify-content: flex-end; }
.rd-link {
    color: rgba(255,255,255,.86);
    text-shadow: 0 1px 3px rgba(0,0,0,.45);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 500;
    padding: .35rem .3rem;
    white-space: nowrap;
    transition: color .2s;
}
.rd-link:hover, .rd-link:focus-visible { color: #FFFFFF; }
.rd-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--rd-a2);
    color: #FFFFFF;
    font-weight: 700;
    font-size: .92rem;
    padding: .5rem .95rem;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: filter .15s ease;
}
.rd-btn:hover, .rd-btn:focus-visible { filter: brightness(1.08); color: #FFFFFF; }

/* ---- Üç dikey şerit ---- */
.rd-strips {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}
.rd-strip {
    position: relative;
    isolation: isolate;          /* mix-blend-mode panel dışına taşmasın */
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none;
    transition: flex-grow .45s cubic-bezier(.4, 0, .2, 1);
}
/* hairline ayraç — paneller arasında, kenarlarda değil */
.rd-strip + .rd-strip { border-left: 1px solid rgba(255,255,255,.08); }

/* Şerit focus halkası rengi (açık karşılıklar) — sırayla a1/a2/a3. */
.rd-strip--osgb  { --rd-a-on: var(--rd-a1-on); }
.rd-strip--uzman { --rd-a-on: var(--rd-a2-on); }
.rd-strip--firma { --rd-a-on: var(--rd-a3-on); }

/* KATMAN 1 — Fotoğraf.
   Filtre ÖNCE fotoğrafa uygulanır, marka rengi SONRA üstüne biner; sıra bu yüzden
   ayrı katman gerektirir (tek katmanda background-blend-mode kullanılsaydı filter
   blend'den sonra çalışıp grade'i silerdi).
   NOT: url() bu dosyaya (css/) göre çözülür — görseller ../images/ altında.
   Şerit görselleri tanıtım sitesine ait; login slaytlarından bağımsızdır. */
.rd-strip-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 32%;
    /* Önce GERÇEK siyah-beyaz + geniş ton aralığı; renk sonra hafifçe biner. */
    filter: grayscale(1) contrast(1.35) brightness(.72);
    transform: scale(1.06);
    transition: filter .5s ease, transform .7s ease;
}
/* Yatay (16:9) çekimler dar/dikey şeritte cover ile sert kırpılır; masaüstünde
   görünen pencere genişliğin ~%30'udur. Dikey bias üçünde ortak (%32); yatay
   konum özneyi çerçevede tutmak için panel bazında ayarlıdır. */
.rd-strip--osgb  .rd-strip-media { background-image: url('../images/osgb.jpg');   background-position: 38% 32%; }
.rd-strip--uzman .rd-strip-media { background-image: url('../images/uzman.webp'); background-position: 55% 32%; }
.rd-strip--firma .rd-strip-media { background-image: url('../images/firma.webp'); background-position: 66% 32%; }

/* KATMAN 2 — Marka rengi grade'i: üç bağımsız çekimi tek seriye indirger. */
.rd-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--rd-a1);
    mix-blend-mode: color;
    opacity: .42;
    transition: opacity .5s ease;
}

/* KATMAN 3 — Okunabilirlik perdesi. Üç panelde BİREBİR aynı.
   Üstteki ince perde saydam header'ın linklerini taşır,
   alttaki yoğun perde metin bloğunu taşır. */
.rd-strip::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(to bottom,
            rgba(var(--rd-navy-rgb), .55) 0%,
            transparent 18%),
        linear-gradient(to top,
            rgba(var(--rd-navy-rgb), .96) 0%,
            rgba(var(--rd-navy-rgb), .72) 22%,
            rgba(var(--rd-navy-rgb), .15) 52%,
            transparent 72%);
}

/* ---- Şerit içi metin ---- */
.rd-strip-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .55rem;
    min-height: 240px;
    /* alt şerit artık bindirilmiş; metin onun üstünde kalsın */
    padding: 0 var(--rd-pad-x) calc(var(--rd-trust-h) + 22px);
}
.rd-quote {
    margin: 0;
    color: rgba(255,255,255,.62);
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    font-size: 17px;
    line-height: 1.45;
}
.rd-strip-title {
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(30px, 2.5vw, 42px);
    line-height: 1.1;
    letter-spacing: -.022em;
    font-weight: 650;
    max-width: 340px;
    text-wrap: balance;
}
.rd-cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: fit-content;
    gap: .4rem;
    margin-top: .35rem;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(255,255,255,.28);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1rem;
    transition: border-bottom-color .3s ease;
}
.rd-cta i { transition: transform .2s ease; }

/* ---- Hover / focus ---- */
.rd-strip:hover, .rd-strip:focus-visible { flex-grow: 2.3; }
.rd-strip:hover  .rd-strip-media,
.rd-strip:focus-visible .rd-strip-media { filter: grayscale(.1) contrast(1.15) brightness(.9); transform: scale(1.04); }
.rd-strip:hover::before,
.rd-strip:focus-visible::before { opacity: .15; }
.rd-strip:hover  .rd-cta,
.rd-strip:focus-visible .rd-cta { border-bottom-color: #FFFFFF; }
.rd-strip:hover  .rd-cta i,
.rd-strip:focus-visible .rd-cta i { transform: translateX(5px); }
.rd-strip:focus-visible {
    outline: 3px solid var(--rd-a-on);
    outline-offset: -3px;
}

/* ---- Alt güven şeridi ----
   Hero'nun parçası: koyu zemin, fotoğrafların üzerine biner.
   Böylece paneller viewport'un en altına kadar uzanır. */
.rd-trust {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    box-sizing: border-box;
    min-height: var(--rd-trust-h);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem clamp(1rem, 3vw, 2rem);
    background: rgba(var(--rd-navy-rgb), .92);
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: clamp(.75rem, 1.2vw, .86rem);
}
.rd-trust-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .3rem .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: rgba(255,255,255,.72);
    letter-spacing: .04em;
}
.rd-trust-list li { display: inline-flex; align-items: center; gap: .4rem; }
.rd-trust-list li::after { content: "·"; margin-left: .55rem; opacity: .5; }
.rd-trust-list li:last-child::after { content: ""; margin: 0; }
.rd-trust-list i { color: rgba(255,255,255,.6); }

/* ============================================================
   Tablet / mobil (<1024px): şeritler tek sütuna iner, ekranı
   eşit böler. Hero burada da TEK EKRAN — scroll yok.
   ============================================================ */
@media (max-width: 1023px) {
    .rd-strips { flex-direction: column; }
    .rd-strip { flex: 1 1 0; min-height: 0; }
    .rd-strip + .rd-strip { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
    /* dokunmatikte genişleme yerine eşit yükseklik */
    .rd-strip:hover, .rd-strip:focus-visible { flex-grow: 1; }

    /* İlk şeridin metni, üstte yüzen (mobilde iki satıra sarabilen) bara girmesin */
    .rd-strip:first-child .rd-strip-content { padding-top: calc(var(--rd-topbar) + 12px); }

    .rd-strip-content {
        min-height: 0;
        gap: .3rem;
        padding: 0 24px 18px;
    }
    /* alt şerit yalnızca son şeridin altını örter */
    .rd-strip:last-child .rd-strip-content { padding-bottom: calc(var(--rd-trust-h) + 30px); }
    .rd-strip-title { font-size: clamp(26px, 5.4vw, 30px); max-width: none; }
    .rd-quote { font-size: 15px; }
    .rd-cta { font-size: .95rem; margin-top: .2rem; padding-bottom: 5px; }
}

/* ============================================================
   Hareket azaltma tercihi: büyüme/kayma efektleri kapatılır,
   renk ve opaklık geçişleri korunur.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .rd-strip,
    .rd-strip-media,
    .rd-cta,
    .rd-cta i {
        transition: none;
    }
    .rd-strip-media { transform: none; }
    .rd-strip:hover, .rd-strip:focus-visible { flex-grow: 1; }
    .rd-strip:hover .rd-strip-media,
    .rd-strip:focus-visible .rd-strip-media { transform: none; }
    .rd-strip:hover .rd-cta i,
    .rd-strip:focus-visible .rd-cta i { transform: none; }
}