/* htc_platform — sade, kendi kendine yeten arayüz (CDN yok) */
:root {
  --lacivert: #1f3a5f;
  --lacivert-koyu: #16293f;
  --turuncu: #e8762d;
  --zemin: #f4f6f9;
  --cizgi: #dde3ea;
  --metin: #2b3440;
  --soluk: #7a8794;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--zemin); color: var(--metin);
  font-family: "Segoe UI", system-ui, sans-serif; font-size: 15px;
}
a { color: var(--lacivert); text-decoration: none; }

/* Yerleşim: sol menü + içerik (gövde dikey flex → çerçeve footer'ı en alta oturur) */
body { min-height: 100vh; display: flex; flex-direction: column; }
.yerlesim { display: flex; flex: 1; }
.yan-menu {
  width: 256px; background: var(--lacivert-koyu); color: #cdd7e4;
  display: flex; flex-direction: column; flex-shrink: 0;
  transition: margin-left .22s ease;
}
.yerlesim.menu-kapali .yan-menu { margin-left: -256px; }
.yan-menu .logo { padding: 18px 16px; background: #fff; text-align: center; }
.yan-menu .logo img { max-width: 100%; height: auto; }
.yan-menu nav { padding: 12px 0; flex: 1; }
.yan-menu nav a {
  display: block; padding: 12px 20px; font-size: 16px; color: #cdd7e4;
  border-left: 3px solid transparent;
}
.yan-menu nav a:hover { background: var(--lacivert); color: #fff; }
.yan-menu nav a.secili { background: var(--lacivert); color: #fff; border-left-color: var(--turuncu); }
.yan-menu .baslik {
  padding: 16px 20px 5px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--soluk);
}
.yan-menu .alt { padding: 14px 20px; font-size: 12px; color: var(--soluk); border-top: 1px solid #24384f; }

.icerik { flex: 1; padding: 24px 30px; min-width: 0; }
.ust-cubuk { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.ust-cubuk h1 { margin: 0; font-size: 21px; color: var(--lacivert); }
.ust-sol { display: flex; align-items: center; gap: 10px; min-width: 0; }
#menu-dugme {
  display: inline-flex; align-items: center; background: none; border: 0; cursor: pointer;
  padding: 6px; border-radius: 8px; color: var(--lacivert);
}
#menu-dugme:hover { background: #e6ebf2; }
.kullanici-kutu { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--soluk); }
.kullanici-kutu .kullanici-ad { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; }
.ust-buton {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px;
  border: 1px solid var(--cizgi); border-radius: 999px; background: #fff;
  color: var(--lacivert); font-size: 13px; transition: .15s;
}
.ust-buton:hover { border-color: var(--lacivert); box-shadow: 0 2px 6px rgba(31,58,95,.14); }
.ust-buton.cikis { color: #c94f3d; }
.ust-buton.cikis:hover { border-color: #c94f3d; }
/* Menü açıkken arkayı karartan perde (yalnız çekmece kipinde görünür).
   Sebep: çekmece içeriğin ÜSTÜNDE duruyor ve hamburger düğmesi onun ALTINDA kalıyor
   → menüyü kapatmanın hiçbir yolu yoktu. Perdeye dokunmak kapatır. */
.menu-perde { display: none; }
tr.tikla-satir { cursor: pointer; }

/* Kartlar / kutular */
.kutu { background: #fff; border: 1px solid var(--cizgi); border-radius: 8px; padding: 18px; margin-bottom: 18px; }
.ozet-kartlar { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.ozet-kart {
  background: #fff; border: 1px solid var(--cizgi); border-radius: 8px;
  padding: 16px 20px; min-width: 170px; flex: 1;
}
.ozet-kart .deger { font-size: 28px; font-weight: 600; color: var(--lacivert); }
.ozet-kart .etiket { font-size: 13px; color: var(--soluk); }

.modul-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.modul-kart {
  background: #fff; border: 1px solid var(--cizgi); border-radius: 8px; padding: 18px;
  display: block; transition: box-shadow .15s;
}
.modul-kart:hover { box-shadow: 0 3px 10px rgba(31,58,95,.15); }
/* İkon ve modül adı ORTALI (kuzen kararı, 28 Tem 2026); açıklama metni sola
   dayalı kalıyor — uzun cümleyi ortalamak okumayı zorlaştırıyor. */
.modul-kart .ikon { font-size: 26px; text-align: center; }
.modul-kart h3 {
  margin: 8px 0 6px; font-size: 16px; color: var(--lacivert); text-align: center;
  /* Yeni adlar uzun ("E-Ticaret Sitesi – Pazaryeri Entegrasyon Sistemi") ve
     240px'lik kartta iki-üç satıra iniyor; kısa adlarla aynı hizada dursunlar
     diye asgari yükseklik veriliyor, yoksa kart içerikleri kayıyor. */
  min-height: 2.6em; display: flex; align-items: center; justify-content: center;
}
/* `overflow-wrap` ŞART: kart metinlerinde kırılamayan uzun diziler geçebiliyor
   (ör. sağlayıcı adlarının eğik çizgiyle sıralandığı bir liste). Böyle bir kelime
   245px'lik kolona sığmayınca kutunun DIŞINA taşıyor, metin kırpılıyor ve sayfa
   yatay kayıyordu (28 Tem 2026'da rapor panelinde ölçüldü: 18px taşma). */
.modul-kart p { margin: 0; font-size: 13px; color: var(--soluk); overflow-wrap: anywhere; }
.modul-kart .sure { margin-top: 10px; font-size: 12px; color: var(--turuncu); }
/* Kart bir <a> OLABİLİR ya da içinde <a> BULUNDURABİLİR: demo'da kartın altına
   açılır anlatım (<details>) biniyor ve <details> bir <a> içine konamaz, o yüzden
   o kartlar sarıcı div + iç <a> düzeninde. Görünüm iki düzende de aynı kalsın
   diye iç bağlantı blok yapılır. */
.modul-kart > a { display: block; }
/* Aynı kartta iki paragraf olabiliyor (rapor kartında soru + açıklama);
   `p { margin: 0 }` ikisini birbirine yapıştırıyordu. */
.modul-kart p + p { margin-top: 6px; }

/* İşletmeye özel rapor teklifi (31 Tem 2026) — rapor kartlarıyla AYNI ızgarada
   ama kesik çerçeveyle ayrışır: tıklanacak bir rapor değil, bir hizmet.
   Tıklanabilir görünmemesi için `cursor` değişmiyor ve hover gölgesi yok. */
/* Demoda "yakında" kartı: tıklanamaz, soluk. `.kart-ic` <a>'nın yerine geçer —
   blok davranışı korunsun diye aynı display kuralını alır (bkz. panel.html). */
.modul-kart > .kart-ic { display: block; }
.modul-kart.yakinda { background: #fbfbfc; border-style: dashed; cursor: default; }
.modul-kart.yakinda:hover { box-shadow: none; }
.modul-kart.yakinda h3, .modul-kart.yakinda .ikon { opacity: .72; }
.modul-kart .yakinda-rozet {
  display: inline-block; margin: 0 auto 6px; padding: 2px 10px; border-radius: 999px;
  background: #fff6e9; border: 1px solid #f0c98a; color: #a35b00; font-size: 12px;
}
.modul-kart .yakinda-not { margin-top: 8px; font-size: 12px; color: var(--soluk); font-style: italic; }

.modul-kart.teklif { border-style: dashed; background: #fcfdff; }
.modul-kart.teklif:hover { box-shadow: none; }
.modul-kart.teklif summary {
  cursor: pointer; font-size: 13px; font-weight: 500;
  color: var(--lacivert); margin-top: 10px;
}
.modul-kart.teklif ul { margin: 8px 0 0; padding-left: 18px; }
.modul-kart.teklif li { font-size: 13px; color: var(--soluk); margin-bottom: 5px; }
.modul-kart.teklif li b { color: var(--lacivert); font-weight: 500; }
.modul-kart.teklif .teklif-ornek {
  margin-top: 8px; font-size: 12px; color: var(--soluk); font-style: italic;
}
.modul-kart.teklif .teklif-iletisim {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--cizgi);
  font-size: 13px; color: var(--lacivert);
}

/* ── Demo: "Bu ne işe yarar?" açılır anlatımı ──────────────────────────────
   Ziyaretçi satıcı olmadan anlamalı (kuzen kararı, 28 Tem 2026). Kapalı
   dururken kartın boyunu değiştirmez; ilgilenen tıklar. */
.kart-anlatim { margin-top: 12px; border-top: 1px solid var(--cizgi); padding-top: 10px; }
.kart-anlatim > summary {
  cursor: pointer; font-size: 13px; font-weight: 500; color: var(--turuncu);
  list-style: none;
}
.kart-anlatim > summary::-webkit-details-marker { display: none; }
.kart-anlatim > summary::before { content: '▸ '; }
.kart-anlatim[open] > summary::before { content: '▾ '; }
.kart-anlatim .birim {
  margin: 8px 0 2px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--soluk);
}
.kart-anlatim ul { margin: 6px 0 0; padding-left: 18px; }
.kart-anlatim li { font-size: 13px; color: var(--soluk); line-height: 1.5; margin-bottom: 6px; }
/* Raporun cevapladığı soru — açıklamadan ÖNCE ve ondan ayırt edilebilir dursun. */
.modul-kart p.rapor-soru { color: var(--lacivert); font-weight: 500; font-style: italic; }

/* Tablolar */
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--cizgi); text-align: left; }
th { background: var(--lacivert); color: #fff; font-weight: 500; font-size: 13px; }
tr:hover td { background: #f0f4f9; }
.tablo-kutu { background: #fff; border: 1px solid var(--cizgi); border-radius: 8px; overflow: auto; }

/* Formlar */
/* Seçici bilerek `form.dikey` DEĞİL: sınıf form yerine bir sarıcı div'e verildiğinde
   (rapor ayarları sayfası — iki sütunlu yerleşim) kural eşleşmiyordu, etiketler
   `inline` kalıp kutuların YANINA akıyor ve sayfa iç içe geçmiş görünüyordu. */
.dikey label { display: block; margin: 12px 0 4px; font-size: 13px; color: var(--soluk); }
input[type=text], input[type=password], input[type=email], input[type=date],
input[type=number], select, textarea {
  width: 100%; max-width: 480px; padding: 8px 10px; border: 1px solid var(--cizgi);
  border-radius: 6px; font: inherit; background: #fff;
}
textarea { min-height: 70px; }
/* Şifre alanı: göster/gizle butonlu sarıcı */
.sifre-kutu { position: relative; max-width: 480px; }
.sifre-kutu input { max-width: none; padding-right: 40px; }
.sifre-goster {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; font-size: 15px; padding: 2px;
  line-height: 1; opacity: .65;
}
.sifre-goster:hover { opacity: 1; }
.buton {
  display: inline-block; background: var(--lacivert); color: #fff; border: 0;
  padding: 9px 18px; border-radius: 6px; font: inherit; cursor: pointer; margin-top: 14px;
}
.buton:hover { background: var(--lacivert-koyu); }
.buton.turuncu { background: var(--turuncu); }
.buton.kucuk { padding: 4px 10px; font-size: 12px; margin: 0; }
.buton.gri { background: var(--soluk); }

/* Durum rozetleri + mesajlar */
.rozet { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 12px; color: #fff; }
.rozet.yesil { background: #2e9e5b; }
.rozet.gri { background: var(--soluk); }
.rozet.kirmizi { background: #c94f3d; }
.rozet.sari { background: #d99a1b; }
.mesaj { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-size: 14px; }
.mesaj.bilgi, .mesaj.basari { background: #e2f2e8; color: #1e6b40; border: 1px solid #b8dfc7; }
.mesaj.hata { background: #f9e4e0; color: #96331f; border: 1px solid #ecc4bc; }

/* Giriş sayfası */
.giris-sayfa {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--lacivert-koyu), var(--lacivert));
  padding: 20px 16px;
}
/* Sabit 360px değil: 360'tan dar telefonlarda (iPhone SE 320px) kutu ekrandan taşıyordu. */
.giris-kutu { background: #fff; border-radius: 10px; padding: 34px 38px; width: 100%; max-width: 360px; }
.giris-kutu img { display: block; max-width: 220px; margin: 0 auto 20px; }
.giris-kutu h2 { margin: 0 0 16px; font-size: 17px; color: var(--lacivert); text-align: center; }
.arac-cubugu { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.arac-cubugu form { display: flex; gap: 8px; }
.arac-cubugu input[type=text] { width: 240px; }

/* ══ Duyarlı yerleşim — tablet ve telefon ═══════════════════════════════════
   Kırılma 900px: iPad dikey (768–834px) de çekmece kipine girsin. 900'ün üstünde
   yan menü akışta durur. temel.html'deki JS aynı eşiği kullanır — biri değişirse
   diğeri de değişmeli (menü "açık" hatırlanırken telefonda içeriği örtmesin). */
@media (max-width: 1180px) {
  .icerik { padding: 20px 22px; }
}
@media (max-width: 900px) {
  .yan-menu {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 1200; margin-left: 0 !important;
    width: min(280px, 82vw); transform: translateX(0); transition: transform .22s ease;
    box-shadow: 4px 0 18px rgba(0,0,0,.25); overflow-y: auto;
  }
  .yerlesim.menu-kapali .yan-menu { transform: translateX(-100%); box-shadow: none; }
  .menu-perde {
    display: block; position: fixed; inset: 0; z-index: 1100;
    background: rgba(12,22,36,.5);
  }
  .yerlesim.menu-kapali .menu-perde { display: none; }
  .yan-menu nav a { padding: 14px 20px; }   /* dokunma hedefi ~48px */

  .icerik { padding: 14px 14px 22px; }
  .ust-cubuk { margin-bottom: 14px; gap: 8px; }
  .ust-cubuk h1 { font-size: 18px; }
  .kullanici-kutu .kullanici-ad { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ust-buton span { display: none; }        /* dar ekranda yalnız simge */
  .ust-buton { padding: 9px 11px; }
  #menu-dugme { padding: 9px; }

  /* Tablolar: 6-7 kolonu 390px'e SIKIŞTIRMAK yerine yatay kaydır. `width:100%`
     tek başına kaydırma üretmez — tablo kabına küçülür, sütunlar okunmaz olur. */
  .tablo-kutu { -webkit-overflow-scrolling: touch; }
  .tablo-kutu table { min-width: 640px; }
  th, td { padding: 10px; }

  .kutu { padding: 14px; }
  .ozet-kart { padding: 14px 16px; min-width: 130px; }
  .ozet-kart .deger { font-size: 24px; }
  .buton.kucuk { padding: 8px 12px; font-size: 13px; }

  /* iOS Safari 16px'ten küçük yazılı bir alana odaklanınca sayfayı otomatik
     yakınlaştırır ve geri çıkmaz — form alanları bu yüzden 16px. */
  input[type=text], input[type=password], input[type=email], input[type=date],
  input[type=number], select, textarea { font-size: 16px; }
}
@media (max-width: 560px) {
  .modul-kartlar { grid-template-columns: 1fr; }
  .ozet-kartlar { gap: 10px; }
  .ozet-kart { flex: 1 1 calc(50% - 5px); }
  .arac-cubugu { gap: 8px; }
  .arac-cubugu form { flex: 1 1 100%; }
  .arac-cubugu input[type=text] { width: auto; flex: 1; min-width: 0; }
  .giris-kutu { padding: 26px 20px; }
}