/* ===========================================================================
   HAKKIMIZDA SAYFASI (02.09.2026, Ozgur - Claude Design handoff "Oyuneks Hakkimizda")

   Sayfa kurumsal sol menu kabugunun DISINDA, tam genislikte basilir
   (master.blade.php istisnasi). Icerik sitenin .container'ina (1550px) oturur;
   tuvaldeki 1920/100px kenar bosluklari yerine header ile ayni hiza.
   Token'lar tuvaldeki tablodan; acik tema eslemesi README'deki tabloyla.
   Yazi tipi sitenin kendi fontu (Wix Madefor Display). Kurumsal sekme seridi
   03.09'da css/kurumsal-sekmeler.css'e tasindi (iletisim ile ortak).
   =========================================================================== */
.hkSayfa {
    --hkZemin: #181820;
    --hkBant: #1B1C26;
    --hkKart: #20212B;
    --hkKenar: #333444;
    --hkInceKenar: #2A2B38;
    --hkBaslik: #EDEEF2;
    --hkMetin: #C8C9D8;
    --hkGovde: #ABACB5;
    --hkUcuncul: #8B8C99;
    --hkNane: #80F1B1;
    --hkNaneHover: #A8F6CE;
    --hkNaneZemin: rgba(128,241,177,.10);
    --hkNaneKenar: rgba(128,241,177,.28);
    --hkParilti: rgba(128,241,177,.14);
    --hkRozetZemin: rgba(24,24,32,.85);
    --hkGorselPerde: rgba(24,24,32,.95);
    --hkKartGolge: none;
    --hkLogoFiltre: none;
}
body.light .hkSayfa {
    --hkZemin: #FAF9F5;
    --hkBant: #F5F4EE;
    --hkKart: #FFFFFF;
    --hkKenar: #E3E1D9;
    --hkInceKenar: #E8E6DF;
    --hkBaslik: #1F1E1D;
    --hkMetin: #1F1E1D;
    --hkGovde: #6B6A65;
    --hkUcuncul: #5F5E58;
    --hkNane: #137E4C;
    --hkNaneHover: #1A9A5E;
    --hkNaneZemin: rgba(19,126,76,.10);
    --hkNaneKenar: rgba(19,126,76,.28);
    --hkParilti: rgba(19,126,76,.12);
    --hkRozetZemin: rgba(250,249,245,.88);
    --hkGorselPerde: rgba(31,30,29,.85);
    --hkKartGolge: 0 1px 2px rgba(31,30,29,.05);
    /* Ortaklik logolari acik temada ayri dosya yerine CSS ile siyaha cevrilir */
    --hkLogoFiltre: brightness(0) opacity(.85);
}

/* ---- Sayfa iskeleti ---------------------------------------------------------- */
.hkSayfa { color: var(--hkMetin); padding-bottom: 0; }
.hkSayfa a { color: var(--hkNane); }
.hkSayfa a:hover { color: var(--hkNaneHover); }
.hkEtiket { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; color: var(--hkNane); text-transform: uppercase; }

/* Hero baslik */
.hkHero { padding-top: 40px; display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.hkHero h1 { font-size: 56px; font-weight: 800; letter-spacing: -1.6px; line-height: 1.02; color: var(--hkBaslik); margin: 0; }
.hkHero p { font-size: 16px; color: var(--hkUcuncul); margin: 0; }

/* Bolumler: tek sayililar govde zemininde, cift sayililar bant */
.hkBolum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
.hkBolum.govde { padding-top: 80px; }
.hkBolum.govde:first-of-type { padding-top: 70px; }
.hkBant { margin-top: 80px; padding: 70px 0; background: var(--hkBant); border-top: 1px solid var(--hkInceKenar); border-bottom: 1px solid var(--hkInceKenar); }
.hkBant.son { padding-bottom: 90px; border-bottom: 0; }
.hkBant .hkBolum { padding-top: 0; }
.hkMetinBlok { display: flex; flex-direction: column; gap: 16px; }
.hkMetinBlok h2 { font-size: 34px; font-weight: 800; letter-spacing: -.8px; line-height: 1.1; color: var(--hkBaslik); margin: 0; }
.hkMetinBlok p { font-size: 15px; line-height: 1.75; color: var(--hkGovde); margin: 0; }

/* 01 Kimlik: ISO cipleri + hero gorseli */
.hkCipler { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.hkCip { padding: 7px 12px; border-radius: 8px; background: var(--hkNaneZemin); border: 1px solid var(--hkNaneKenar); font-size: 12px; font-weight: 700; color: var(--hkNane); }
.hkGorsel { position: relative; }
.hkGorsel::before { content: ""; position: absolute; inset: -36px; background: radial-gradient(closest-side, var(--hkParilti), transparent); pointer-events: none; }
.hkGorselCerceve { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--hkKenar); }
/* height:auto sart: img height="" niteligi aspect-ratio'yu eziyordu (gorsel dogal boyunda kaliyordu). */
.hkGorselCerceve img { width: 100%; height: auto; aspect-ratio: 1.85 / 1; object-fit: cover; display: block; }
.hkRozet {
    position: absolute; left: 24px; bottom: 24px; padding: 12px 16px; border-radius: 12px;
    background: var(--hkRozetZemin); border: 1px solid var(--hkKenar); display: flex; flex-direction: column; gap: 2px;
}
.hkRozet strong { font-size: 22px; font-weight: 800; color: var(--hkNane); line-height: 1.2; }
.hkRozet span { font-size: 12px; color: var(--hkGovde); }

/* 02 Ortakliklar: 2x2 logo karti */
.hkKartIzgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hkKart { background: var(--hkKart); border: 1px solid var(--hkKenar); border-radius: 14px; box-shadow: var(--hkKartGolge); }
.hkOrtak { padding: 22px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.hkOrtakLogo { height: 56px; width: 100%; display: flex; align-items: center; justify-content: center; color: var(--hkUcuncul); filter: var(--hkLogoFiltre); }
.hkOrtakLogo img { height: 100%; max-width: 100%; object-fit: contain; display: block; }
.hkOrtakLogo svg { height: 44px; width: auto; }
.hkOrtakAd { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hkOrtakAd strong { font-size: 13.5px; font-weight: 700; color: var(--hkBaslik); }
.hkOrtakAd span { font-size: 11.5px; color: var(--hkUcuncul); }

/* 03 Hizmetler / 06 Inovasyon: ikonlu satirlar */
.hkSatirlar { display: flex; flex-direction: column; gap: 10px; }
.hkSatir { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 12px; }
.hkIkon {
    width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--hkNaneZemin);
    border: 1px solid var(--hkNaneKenar); display: flex; align-items: center; justify-content: center; color: var(--hkNane);
}
.hkIkon svg { width: 18px; height: 18px; }
.hkSatirMetin { display: flex; flex-direction: column; gap: 2px; }
.hkSatirMetin strong { font-size: 15px; font-weight: 700; color: var(--hkBaslik); }
.hkSatirMetin span { font-size: 12.5px; color: var(--hkUcuncul); }

/* 04 Guvenlik: iki rakam karti */
.hkRakam { padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; }
.hkRakam .hkIkon { width: 44px; height: 44px; border-radius: 11px; }
.hkRakam .hkIkon svg { width: 20px; height: 20px; }
.hkRakam strong { font-size: 26px; font-weight: 800; color: var(--hkBaslik); line-height: 1.2; }
.hkRakam span { font-size: 13px; line-height: 1.55; color: var(--hkGovde); }

/* 05 Topluluk: 2x2 gorsel izgarasi */
.hkGorselIzgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 200px 200px; gap: 12px; }
.hkGorselKart { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--hkKenar); background: var(--hkKart); }
.hkGorselKart.genis { grid-column: 1 / -1; }
.hkGorselKart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Gorsel olmayan kart icin yedek zemin (nane parilti); su an kullanilmiyor, gorseller geldi. */
.hkGorselKart.yer { background: radial-gradient(120% 90% at 80% 10%, var(--hkParilti), transparent 60%), var(--hkKart); }
.hkGorselKart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--hkGorselPerde), transparent 65%); pointer-events: none; }
.hkGorselKart.genis::after { background: linear-gradient(to top, var(--hkGorselPerde), transparent 70%); }
.hkGorselYazi { position: absolute; left: 18px; bottom: 16px; z-index: 1; display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.hkGorselKart.genis .hkGorselYazi { left: 22px; bottom: 18px; }
.hkGorselYazi strong { font-size: 15px; font-weight: 800; color: #EDEEF2; }
.hkGorselYazi .hkOdul { font-size: 30px; font-weight: 800; color: var(--hkNane); font-variant-numeric: tabular-nums; line-height: 1.15; }
.hkGorselYazi small { font-size: 12.5px; color: #C8C9D8; }
body.light .hkGorselYazi strong, body.light .hkGorselYazi small { color: #FAF9F5; }

/* ---- Mobil (390 tuvali): tek kolon, bant bolumlerinde metin once ----------- */
@media (max-width: 991.98px) {
    .hkHero { padding-top: 28px; gap: 10px; }
    .hkHero h1 { font-size: 34px; letter-spacing: -1px; line-height: 1.05; }
    .hkHero p { font-size: 13.5px; line-height: 1.5; }
    .hkBolum { grid-template-columns: 1fr; gap: 24px; }
    .hkBolum.govde, .hkBolum.govde:first-of-type { padding-top: 40px; }
    .hkBolum.govde:first-of-type { padding-top: 36px; }
    .hkBant { margin-top: 40px; padding: 36px 0; }
    .hkBant.son { padding-bottom: 48px; }
    /* Bant bolumlerinde kartlar DOM'da once; metin ustte gorunsun */
    .hkBant .hkBolum > .hkMetinBlok { order: -1; }
    .hkMetinBlok h2 { font-size: 24px; letter-spacing: -.6px; line-height: 1.15; }
    .hkMetinBlok p { font-size: 14px; line-height: 1.7; }
    .hkGorsel::before { inset: -20px; }
    .hkRozet { left: 14px; bottom: 14px; padding: 9px 12px; }
    .hkRozet strong { font-size: 17px; }
    .hkOrtak { padding: 16px 12px; gap: 12px; }
    .hkOrtakLogo { height: 44px; }
    .hkOrtakLogo svg { height: 36px; }
    .hkSatir { gap: 12px; padding: 14px; }
    .hkRakam { padding: 18px 16px; gap: 10px; }
    .hkRakam strong { font-size: 21px; }
    .hkGorselIzgara { grid-template-rows: 170px 150px; gap: 10px; }
    .hkGorselYazi { left: 12px; bottom: 12px; }
    .hkGorselKart.genis .hkGorselYazi { left: 14px; bottom: 12px; right: 14px; }
    .hkGorselYazi strong { font-size: 13px; }
    .hkGorselYazi .hkOdul { font-size: 24px; }
    .hkGorselYazi small { font-size: 11.5px; }
}