/* ============================================
   PanOS — Windows 10 (1507 / build 10240) style
   Flat UI, Segoe UI, accent #0078D7
   ============================================ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --accent:#0078d7;          /* Win10 accent blue */
  --accent-h:#106ebe;        /* Win10 hover blue */
  --accent-soft:#e5f1fb;     /* Win10 hover background */
  --bg:#ececec;              /* Win10 desktop background */
  --bar:#fafafa;             /* window / ribbon background */
  --card:#ffffff;
  --line:#d3d3d3;            /* Win10 border gray */
  --line-2:#c6c6c6;
  --txt:#1a1a1a;
  --txt-2:#3c3c3c;
  --dim:#8a8a8a;
  --taskbar:#1f1f1f;
  --mono:"Consolas","Cascadia Mono","Courier New",monospace;
}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:"Segoe UI","Segoe UI Emoji","Ubuntu",Arial,sans-serif;
  line-height:1.65;
  min-height:100vh;
}
::selection{background:var(--accent);color:#fff}
a{color:#0067c0;text-decoration:none}
a:hover{color:#004578;text-decoration:underline}

/* ---------- üst şerit (Explorer/ayarlar gibi) ---------- */
header{
  position:sticky;top:0;z-index:1000;
  background:var(--bar);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.topbar{
  max-width:1080px;margin:auto;padding:8px 18px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.logo{
  display:flex;align-items:center;gap:12px;
  font-weight:600;font-size:20px;color:var(--txt);
  white-space:nowrap;
}
.logo img{width:40px;height:40px;object-fit:contain;display:block}
.logo small{font-size:11px;color:var(--dim);display:block;font-weight:400}
nav{margin-left:auto;display:flex;align-items:center;gap:2px;flex-wrap:wrap}
nav a{
  color:var(--txt-2);padding:7px 13px;font-weight:600;font-size:14px;
  border:1px solid transparent;border-radius:2px;transition:.12s;
}
nav a:hover{background:var(--accent-soft);color:var(--txt);text-decoration:none}
.lang{display:flex;gap:0;margin-left:8px}
.lang a{
  background:#f4f4f4;border:1px solid var(--line-2);
  color:var(--txt-2);padding:6px 12px;font-size:12px;font-weight:600;
  border-radius:0;
}
.lang a + a{border-left:none}
.lang a:hover{background:var(--accent-soft);text-decoration:none}
.lang a.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- içerik ---------- */
.wrap{max-width:1080px;margin:auto;padding:24px 18px}
.box{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:2px;
  padding:28px;
  margin:0 0 18px;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
h1,h2,h3{font-weight:600;letter-spacing:0}
h1{font-size:42px;line-height:1.1;color:var(--txt)}
h2{color:var(--txt);font-size:24px;margin:0 0 12px}
h3{color:var(--txt);font-size:16px;margin-bottom:8px}
p{margin:8px 0}
.dim{color:var(--dim);font-size:13px}

/* ---------- pencere başlık çubuğu ---------- */
.titlebar{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--bar);
  border:1px solid var(--line);
  border-bottom:none;
  padding:8px 12px;
  font-size:12px;color:var(--txt-2);
  border-radius:2px 2px 0 0;
}
.titlebar .ctl{letter-spacing:6px;color:var(--txt-2);font-size:11px}

/* ---------- hero ---------- */
.hero{text-align:center;padding:40px 30px}
.hero .pano{width:96px;height:96px;margin:0 auto 12px;display:block;object-fit:contain}
.tag{color:var(--txt-2);font-size:18px;font-weight:400;margin-top:4px}
.blink{display:inline-block;color:var(--accent);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- butonlar (Windows 10 flat) ---------- */
.btn{
  display:inline-block;padding:10px 20px;margin:7px 7px 7px 0;
  font-weight:600;font-size:14px;
  color:#fff;border-radius:2px;border:1px solid var(--accent);
  background:var(--accent);
  cursor:pointer;transition:.12s;text-decoration:none;
}
.btn:hover{background:var(--accent-h);border-color:var(--accent-h);text-decoration:none}
.btn.ghost{
  background:var(--bar);border-color:#8a8a8a;color:var(--txt-2);
}
.btn.ghost:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--txt)}
.btn.big{padding:13px 26px;font-size:16px;font-weight:600}
.dl{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.dl .meta{color:var(--dim);font-size:13px}

/* ---------- Başlat menüsü tarzı renkli karolar ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.card{
  border:1px solid transparent;border-radius:2px;
  padding:20px 18px;color:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:.12s;
}
.card:hover{filter:brightness(1.08);transform:translateY(-1px)}
.card h3{color:#fff;font-size:16px}
.card p{color:rgba(255,255,255,.88);font-size:13.5px}
.card .ic{font-size:30px;line-height:1;margin-bottom:8px}
.card.c-blue{background:var(--accent)}
.card.c-teal{background:#00a28a}
.card.c-purple{background:#744da9}
.card.c-red{background:#d13438}

/* ---------- indirme kartları (ayarlar tarzı) ---------- */
.dcard{
  background:var(--card);border:1px solid var(--line);
  border-radius:2px;padding:20px 18px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.dcard:hover{border-color:var(--accent)}
.dcard h3{color:var(--txt)}
.dcard .dim{color:var(--dim)}

/* ---------- terminal (Komut İstemi) ---------- */
.term{
  background:#000;border:1px solid #4a4a4a;border-radius:0;
  font-family:var(--mono);font-size:13px;color:#dcdcdc;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.term .tb{
  display:flex;gap:5px;align-items:center;padding:6px 10px;
  background:#f4f4f4;border-bottom:1px solid var(--line);color:var(--txt-2);
  font-size:11px;font-family:"Segoe UI",Arial,sans-serif;
}
.term .tb i{width:9px;height:9px;border-radius:0;display:block}
.term .tb .r{background:#e81123}.term .tb .y{background:#ffbb00}
.term .tb .g{background:#00a300}
.term .tb span{margin-left:8px}
.term pre{padding:12px 14px;margin:0;white-space:pre-wrap;word-break:break-word}
.term .p{color:#569cd6}
.term .ok{color:#6a9955}
.term .u{text-decoration:underline}
.term b{color:#ffd700}
.term .path{color:#56d67a}

/* ---------- tablo ---------- */
table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
th{color:var(--txt);font-weight:600;background:var(--bar)}
tr:hover td{background:var(--accent-soft)}

/* ---------- dosya listesi (nostaljik, Windows Explorer) ---------- */
.filelist{
  font-family:var(--mono);font-size:13px;
  background:#fff;border:1px solid var(--line);border-radius:0;padding:12px 14px;
}
.filelist div{padding:3px 0}
.filelist .d{color:var(--accent)}
.filelist .s{color:var(--txt)}
.filelist .imp{color:var(--dim)}

/* ---------- ASCII / logo maskot (Arch, sağ duvara bakıyor) ---------- */
.mascot{
  position:fixed;left:6px;bottom:64px;width:46px;height:46px;
  z-index:4900;opacity:.92;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.2));
  animation:mBob 3.4s ease-in-out infinite;
  pointer-events:none;
}
.mascot svg{width:100%;height:100%;display:block;
  transform:scaleX(-1) rotate(-18deg);
}
@keyframes mBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}

/* ---------- alt (görev çubuğu tarzı) ---------- */
footer{
  background:var(--taskbar);color:#d9d9d9;text-align:center;
  padding:18px 18px;margin-top:34px;
  border-top:1px solid #2b2b2b;
}
footer .mini{color:#b9b9b9;font-size:13px;margin:2px 0}

/* ---------- mobil ---------- */
@media(max-width:720px){
  .topbar{flex-direction:column;gap:6px;padding:10px}
  nav{width:100%;justify-content:center;gap:2px}
  nav a{font-size:13px;padding:6px 8px}
  h1{font-size:32px}
  .box{padding:20px 14px}
  .hero{padding:28px 12px}
  .hero .pano{width:74px;height:74px}
  .mascot{width:36px;height:36px;bottom:54px;left:4px}
}